Fix mobile dashboard layout

biolmnet/ui/styles.py

@@ -723,13 +723,223 @@ body, .gradio-container {
 
 /* ── responsive ───────────────────────────────────────────────────────── */
 @media (max-width: 1000px) {
-  .app-shell { display: block !important; }
-  .rail-col { min-width: 100% !important; max-width: 100% !important; }
-  .rail { position: relative; min-height: auto; border-right: 0; border-bottom: 1px solid var(--color-divider); }
-  .stage-grid, .results-grid { grid-template-columns: 1fr !important; }
+  .app-shell {
+    display: block !important;
+    min-height: 100vh !important;
+  }
+  .rail-col {
+    min-width: 100% !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    flex: none !important;
+  }
+  .rail {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    height: auto !important;
+    min-height: 0 !important;
+    padding: 12px 12px 10px;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-divider);
+    background: color-mix(in srgb, var(--color-bg) 96%, #fff);
+  }
+  .rail-brand {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: 0 4px 9px;
+  }
+  .rail-brand .name {
+    font-size: 22px;
+  }
+  .rail-brand .mono {
+    margin-top: 0 !important;
+    font-size: 8.5px;
+  }
+  .rail-kicker,
+  .rail-spacer {
+    display: none !important;
+  }
+  .rail-nav {
+    display: grid !important;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(154px, max-content);
+    gap: 6px;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    padding: 0 2px 2px;
+    scrollbar-width: none;
+  }
+  .rail-nav::-webkit-scrollbar {
+    display: none;
+  }
+  .rail-row-wrap {
+    min-width: 154px !important;
+  }
+  .rr {
+    min-height: 36px;
+    padding: 8px 9px 8px 8px;
+    gap: 8px;
+    border-left-width: 2px;
+    font-size: 12.5px;
+    white-space: nowrap;
+  }
+  .rr .rn {
+    width: 19px;
+    height: 19px;
+    font-size: 9.5px;
+  }
+  .rr .st {
+    font-size: 8px;
+    letter-spacing: .08em;
+  }
+  .workspace-col {
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+  .topbar {
+    padding: 10px 116px 10px 14px;
+    gap: 10px;
+  }
+  .topbar > .num {
+    display: none;
+  }
+  .intro-open-btn {
+    right: 12px;
+    top: 5px;
+  }
+  .pghd {
+    padding: 20px 14px 0;
+    gap: 10px;
+  }
+  .pghd h2 {
+    font-size: 30px;
+  }
+  .pghd .desc {
+    max-width: none;
+    font-size: 13px;
+  }
+  .stage-grid,
+  .results-grid {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    padding: 20px 14px 0 !important;
+    gap: 22px !important;
+  }
+  .stage-grid > *,
+  .results-grid > * {
+    min-width: 0 !important;
+    max-width: 100% !important;
+    width: 100% !important;
+  }
+  .results-stat-row,
+  .stat-grid {
+    padding: 20px 14px 0 !important;
+  }
+  .metric-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .field-pair {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    gap: 12px !important;
+  }
+  .srow-row {
+    display: grid !important;
+    grid-template-columns: minmax(118px, 34%) minmax(0, 1fr) !important;
+    gap: 12px !important;
+    padding: 8px 0 !important;
+  }
+  .srow-row > * {
+    min-width: 0 !important;
+  }
+  .actbar-row {
+    align-items: flex-start !important;
+    flex-wrap: wrap !important;
+    padding: 12px 14px !important;
+    gap: 12px !important;
+  }
+  .actbar-buttons {
+    width: 100% !important;
+    flex: 1 1 100% !important;
+    justify-content: flex-start !important;
+    flex-wrap: wrap !important;
+  }
+  .actbar-buttons button {
+    min-height: 34px !important;
+    padding: 0 12px !important;
+  }
+  .gradio-container .table-wrap,
+  .gradio-container .dataframe,
+  .gradio-container .wrap.svelte-1ipelgc,
+  .tbl {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  .intro-card {
+    width: min(556px, calc(100vw - 28px)) !important;
+    padding: 22px 20px 18px !important;
+  }
 }
 @media (max-width: 620px) {
-  .pghd h2 { font-size: 26px; }
-  .stat-grid, .metric-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
+  .topbar {
+    padding-right: 112px;
+  }
+  .topbar .mono {
+    font-size: 8.5px;
+    letter-spacing: .06em;
+  }
+  .pghd h2 {
+    font-size: 27px;
+  }
+  .section-heading-row {
+    display: block !important;
+  }
+  .section-heading-row .mono {
+    margin-top: 6px;
+    text-align: left !important;
+  }
+  .seg-radio label {
+    padding: 7px 8px !important;
+    font-size: 12px !important;
+  }
+  .stat-grid,
+  .metric-strip {
+    grid-template-columns: 1fr !important;
+  }
+  .srow-row {
+    grid-template-columns: 1fr !important;
+    gap: 6px !important;
+  }
+  .srow-value-row {
+    justify-content: flex-start !important;
+  }
+  .rr {
+    font-size: 12px;
+  }
+  .rr .st {
+    display: none;
+  }
+  .rail-nav {
+    grid-auto-columns: minmax(126px, max-content);
+  }
+  .rail-row-wrap {
+    min-width: 126px !important;
+  }
+  .intro-card h4 {
+    font-size: 24px;
+  }
+  .intro-card p {
+    font-size: 13px;
+  }
+  .intro-card-foot {
+    align-items: flex-start !important;
+  }
+  .intro-card-actions {
+    justify-content: flex-start !important;
+    flex: 1 1 100% !important;
+    gap: 9px !important;
+  }
 }
 """