fix(ui): make exchange table fill page height with vertical scroll
Some checks failed
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 58s
CI / docker (push) Successful in 50s
CI / deploy-feature (push) Has been skipped
CI / deploy (push) Has been cancelled

This commit is contained in:
hsiegeln
2026-03-28 14:54:29 +01:00
parent 5cb3de03af
commit 048f6566a9
3 changed files with 40 additions and 25 deletions

View File

@@ -268,7 +268,7 @@ function LayoutContent() {
<ContentTabs active={scope.tab} onChange={setTab} scope={scope} />
)}
<main style={{ flex: 1, overflow: 'auto', padding: isAdminPage ? '1.5rem' : 0 }}>
<main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', padding: isAdminPage ? '1.5rem' : 0 }}>
<Outlet />
</main>
</AppShell>

View File

@@ -1,23 +1,36 @@
/* Scrollable content area */
/* Scrollable content area — fills remaining height */
.content {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
min-height: 0;
min-width: 0;
background: var(--bg-body);
}
/* Table section — stretches to fill and scrolls internally */
/* Filter bar spacing */
.filterBar {
margin-bottom: 16px;
}
/* Table section */
.tableSection {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
background: var(--bg-surface);
border-bottom: 1px solid var(--border-subtle);
overflow: hidden;
}
.tableScroll {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.tableHeader {
display: flex;
align-items: center;

View File

@@ -267,27 +267,29 @@ export default function Dashboard() {
</div>
</div>
<DataTable
columns={columns}
data={rows}
onRowClick={handleRowClick}
selectedId={selectedId}
sortable
flush
onSortChange={handleSortChange}
rowAccent={handleRowAccent}
expandedContent={(row: Row) =>
row.errorMessage ? (
<div className={styles.inlineError}>
<span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
<div>
<div className={styles.inlineErrorText}>{row.errorMessage}</div>
<div className={styles.inlineErrorHint}>Click to view full stack trace</div>
<div className={styles.tableScroll}>
<DataTable
columns={columns}
data={rows}
onRowClick={handleRowClick}
selectedId={selectedId}
sortable
flush
onSortChange={handleSortChange}
rowAccent={handleRowAccent}
expandedContent={(row: Row) =>
row.errorMessage ? (
<div className={styles.inlineError}>
<span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
<div>
<div className={styles.inlineErrorText}>{row.errorMessage}</div>
<div className={styles.inlineErrorHint}>Click to view full stack trace</div>
</div>
</div>
</div>
) : null
}
/>
) : null
}
/>
</div>
</div>
</div>
</>