dirtydishes/islandflow
1
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions 1

Adjust dashboard grid proportions

Browse source 
Set Options tape to 2/3 width, Equities to 1/3, and keep Flow/Alerts/Classifier hits as equal thirds with responsive fallbacks.
This commit is contained in:
dirtydishes 2025-12-29 16:31:02 -05:00
parent 58f326877b
commit b8f9e585e9
2 changed files with 48 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

44
apps/web/app/globals.css
View file

@ -109,7 +109,21 @@ h1 {
.cards {
display: grid;
gap: 28px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.card-options {
grid-column: span 4;
}
.card-equities {
grid-column: span 2;
}
.card-flow,
.card-alerts,
.card-classifiers {
grid-column: span 2;
}
.status {
@ -431,3 +445,31 @@ h1 {
text-align: left;
}
}
@media (max-width: 1100px) {
.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-options,
.card-equities,
.card-flow,
.card-alerts,
.card-classifiers {
grid-column: span 2;
}
}
@media (max-width: 860px) {
.cards {
grid-template-columns: minmax(0, 1fr);
}
.card-options,
.card-equities,
.card-flow,
.card-alerts,
.card-classifiers {
grid-column: span 1;
}
}

10
apps/web/app/page.tsx
View file

@ -905,7 +905,7 @@ export default function HomePage() {
</header>
<div className="cards">
<section className="card">
<section className="card card-options">
<div className="card-header">
<div>
<h2>Options Tape</h2>
@ -958,7 +958,7 @@ export default function HomePage() {
</div>
</section>
<section className="card">
<section className="card card-equities">
<div className="card-header">
<div>
<h2>Equities Tape</h2>
@ -1013,7 +1013,7 @@ export default function HomePage() {
</div>
</section>
<section className="card">
<section className="card card-flow">
<div className="card-header">
<div>
<h2>Flow Packets</h2>
@ -1077,7 +1077,7 @@ export default function HomePage() {
</div>
</section>
<section className="card">
<section className="card card-alerts">
<div className="card-header">
<div>
<h2>Alerts</h2>
@ -1138,7 +1138,7 @@ export default function HomePage() {
</div>
</section>
<section className="card">
<section className="card card-classifiers">
<div className="card-header">
<div>
<h2>Classifier Hits</h2>