/* Hide the mobile-only action sheet + overlay on every viewport by default. Without this, desktop has no rule for these classes and the elements (injected into by mobile.js on every page load) render with the browser's default block display in normal flow. They're then briefly visible at the top of the body before #app reveals and covers them. The @media block below sets the on-mobile layout and the .open rule that makes them visible while open; on desktop no .open is ever added, so display:none stays in effect. */ .mobileActionSheet, .mobileOverlay { display: none; } /* Mobile-only overrides — all rules inside this media query */ @media (max-width: 768px) { /* === TOP BAR: two-row layout === */ #topBar { height: auto; flex-wrap: wrap; padding: 6px 10px; gap: 6px; } #userInfo { order: 1; } #projectDropdown { order: 2; flex: 1; min-width: 0; font-size: 12px; padding: 4px 10px; } #topActions { order: 3; gap: 2px; } /* Hide original action buttons; hamburger (injected by mobile.js) stays visible */ #topActions > button { display: none; } #topActions > .mobileMenuBtn { display: flex !important; } /* === HAMBURGER ACTION SHEET === */ .mobileOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 699; } .mobileOverlay.open { display: block; } .mobileActionSheet { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 220px; background: var(--bg-raised); border-left: 1px solid var(--border); z-index: 700; flex-direction: column; padding: 16px; gap: 8px; box-shadow: -4px 0 20px rgba(0,0,0,0.4); } .mobileActionSheet.open { display: flex; } .mobileActionSheet button { width: 100%; padding: 12px; border: 1px solid #3a3a5a; border-radius: 7px; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; text-align: left; } .mobileActionSheet button:hover { background: #333; color: var(--text-bright); } /* === WORKSPACE: stack vertically === */ #workspace { flex-direction: column; height: calc(100dvh - var(--mobile-topbar-h, 80px)); } #tablePanel { flex: 1; min-height: 0; } #detailResize { display: none; } /* === DETAIL PANEL: bottom strip === */ #detailPanel { width: 100% !important; min-width: unset; max-width: unset; max-height: 45vh; overflow-y: auto; border-top: 1px solid var(--border); flex-shrink: 0; } #detailPreview { flex-direction: row; padding: 4px; gap: 4px; align-items: start; } #detailPreview .previewMain { flex: 1; min-width: 0; height: auto; aspect-ratio: 1; } #previewSmall { flex-direction: row; gap: 4px; flex: 2; min-width: 0; } #previewSmall img { flex: 1; min-width: 0; height: auto; aspect-ratio: 1; } #detailActions { padding: 4px 6px; } #detailInfo { max-height: 120px; } /* === TABLE: show only Name and Seg columns === */ .thCell:not([data-col="name"]):not([data-col="seg"]), .td:not([data-col="name"]):not([data-col="seg"]) { display: none !important; } /* Convert visible columns from absolute to flow layout */ .thCell[data-col="name"], .td[data-col="name"] { position: static !important; width: 65% !important; left: auto !important; } .thCell[data-col="seg"], .td[data-col="seg"] { position: static !important; width: 35% !important; left: auto !important; } #tableHeader { display: flex; overflow: visible; } /* Larger touch targets */ :root { --row-height: 40px; } .row { min-height: 40px; } /* === LOGIN: responsive width === */ #loginBox { width: 90vw; max-width: 340px; } /* === MODALS: responsive width === */ #trainModalContent { width: 90vw; max-width: 380px; } #uploadReviewContent { width: 90vw; max-width: 540px; } .tsModal { width: 92vw; max-height: 80vh; padding: 14px; } }