console: 任务列表与 API Key 加滚动上限,左中右栏等高
任务列表与 Key 列表此前无高度上限:任务一多就把整栏 (乃至整页)撑到无限高,左中右栏又因 align-items:start 各按内容高度结束,底部参差不齐。 改法(仅宽/中屏,窄屏 <900px 仍是单列页面滚动,不动): - .issue-list 上限 60vh、内部纵向滚动,搜索/筛选栏在 列表外、滚动时仍可见;.api-key-list 上限 320px、内部 滚动;两处均 overscroll-behavior:contain,不让列表 滚动直接拖动整页。 - 三栏固定为同一高度:calc(100vh - 260px)(减顶栏、 数据卡片与页面边距),下限 480px,超出的部分各栏 自己内部滚动;网格 align-items 改为 stretch。
This commit is contained in:
1 parent
c192c5dec8
commit
41c2b0ab2f
3 files changed
+24
-5
No files matched your search
@@ -127,7 +127,7 @@ export default function ApiKeySection() {
|
||||
)}
|
||||
{msg && <div><span className="muted">{msg}</span></div>}
|
||||
{err && <div><span>{err}</span></div>}
|
||||
<div>
|
||||
<div className="api-key-list">
|
||||
{rows.length === 0 && <span className="muted">暂无 key(或列表加载失败,见上方报错)。</span>}
|
||||
{rows.map((row) => (
|
||||
<div key={row.id}>
|
||||
|
||||
@@ -123,6 +123,14 @@ pre{background:var(--inset-bg);color:var(--text);border:1px solid var(--line);bo
|
||||
.search-box input:focus{box-shadow:none}
|
||||
.list-section-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;margin:12px 0 4px}
|
||||
.issue-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
|
||||
/* Unbounded lists get their own scrollbar instead of stretching the
|
||||
whole column (and the whole page) indefinitely: the task list is
|
||||
capped at 60vh, the API Key list at 320px. Search/filter bars sit
|
||||
outside these containers, so they stay visible while the list
|
||||
scrolls. overscroll-behavior:contain keeps a list scroll from
|
||||
immediately dragging the page (or the column) with it. */
|
||||
.issue-list{max-height:60vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
|
||||
.api-key-list{max-height:320px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px}
|
||||
.issue-item{padding:8px 16px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;align-items:flex-start;background:#fff}
|
||||
.issue-item:last-child{border-bottom:0}
|
||||
.issue-item:hover{background:var(--subtle-bg)}
|
||||
@@ -190,15 +198,26 @@ pre{background:var(--inset-bg);color:var(--text);border:1px solid var(--line);bo
|
||||
every grid width. Nothing is duplicated or hidden at any width. */
|
||||
.dash-col{display:flex;flex-direction:column;gap:20px;min-width:0}
|
||||
.dash-col > *{min-width:0}
|
||||
/* Equal-height columns (wide/medium only; narrow stays a single
|
||||
page-scrolled column, see the max-width:899px block): every column
|
||||
is the same fixed height — viewport height minus the sticky
|
||||
topbar, the data-cards row and page padding (260px, floored at
|
||||
480px so short viewports still get a usable pane) — and scrolls
|
||||
internally when its sections exceed it, instead of growing
|
||||
indefinitely and leaving the other columns ending far above it.
|
||||
Together with the capped task/API Key lists above, no single
|
||||
list can push one column (and the page) to infinite height. */
|
||||
@media (min-width:900px) and (max-width:1399px){
|
||||
.dash-page{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start}
|
||||
.dash-page{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:stretch}
|
||||
.dash-page > .dash-cards{grid-column:1 / -1;grid-row:1}
|
||||
.dash-col{height:calc(100vh - 260px);min-height:480px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
|
||||
.dash-col-left{grid-column:1;grid-row:2}
|
||||
.dash-col-mid{grid-column:2;grid-row:2}
|
||||
.dash-col-right{grid-column:2;grid-row:3}
|
||||
}
|
||||
@media (min-width:1400px){
|
||||
.dash-page{max-width:1560px;display:grid;grid-template-columns:310px minmax(0,1fr) 330px;align-items:start}
|
||||
.dash-page{max-width:1560px;display:grid;grid-template-columns:310px minmax(0,1fr) 330px;align-items:stretch}
|
||||
.dash-col{height:calc(100vh - 260px);min-height:480px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
|
||||
.dash-page > .dash-cards{grid-column:1 / -1;grid-row:1}
|
||||
.dash-cards{grid-template-columns:repeat(6,1fr)}
|
||||
.dash-col-left{grid-column:1;grid-row:2}
|
||||
|
||||
Reference in new issue
Block a user