Add real-device mobile CSS override, preserve CSS minification, update package lock and workflow location

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.DS_Store
+*.log

src/main.js

@@ -1,4 +1,6 @@
 import './styles.css';
+import './mobile-fix.css';
+import './mobile-header-fix.css';
 import appHtml from './app.html?raw';
 
 const root = document.getElementById('root');

src/mobile-fix.css

@@ -0,0 +1,288 @@
+/* Real-device mobile override loaded after the main stylesheet.
+   Keeps desktop/tablet styles untouched while forcing phones and coarse-pointer
+   devices into a true single-column layout for older iOS Safari and Android. */
+@media screen and (max-width: 767px),
+       screen and (hover: none) and (pointer: coarse) and (max-width: 932px) {
+  html,
+  body,
+  #root {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-height: 100dvh !important;
+    margin: 0 !important;
+    overflow-x: hidden !important;
+  }
+
+  body {
+    -webkit-text-size-adjust: 100% !important;
+    position: relative !important;
+  }
+
+  #root {
+    display: block !important;
+  }
+
+  #root *,
+  #root *::before,
+  #root *::after {
+    box-sizing: border-box;
+    min-width: 0 !important;
+    max-width: 100%;
+  }
+
+  body > #root > .app,
+  #root .app,
+  .app {
+    display: block !important;
+    grid-template-columns: none !important;
+    grid-template-rows: none !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    min-height: 100dvh !important;
+    overflow-x: hidden !important;
+  }
+
+  body > #root .sidebar,
+  #root .app > .sidebar,
+  .app > .sidebar,
+  .sidebar {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+    max-width: 0 !important;
+    min-width: 0 !important;
+    height: 0 !important;
+    max-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+    overflow: hidden !important;
+    pointer-events: none !important;
+  }
+
+  body > #root .topbar,
+  #root .app > .topbar,
+  .app > .topbar,
+  .topbar {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    grid-column: auto !important;
+    grid-row: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    height: auto !important;
+    min-height: 64px !important;
+    padding: 10px 12px !important;
+    gap: 8px !important;
+    overflow: hidden !important;
+  }
+
+  #root .brand,
+  .topbar .brand {
+    order: 1 !important;
+    flex: 1 1 auto !important;
+    width: auto !important;
+    max-width: calc(100% - 104px) !important;
+    min-width: 0 !important;
+  }
+
+  #root .brand-text,
+  #root .brand-title,
+  #root .brand-subtitle {
+    min-width: 0 !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  #root .menu-btn,
+  .topbar .menu-btn {
+    order: 3 !important;
+    display: inline-flex !important;
+    visibility: visible !important;
+    flex: 0 0 42px !important;
+    width: 42px !important;
+    max-width: 42px !important;
+    height: 42px !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin-left: 0 !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+
+  #root .search,
+  .topbar .search {
+    order: 4 !important;
+    flex: 0 0 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    height: 38px !important;
+  }
+
+  #root .search input,
+  .topbar .search input {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    padding-right: 14px !important;
+  }
+
+  #root .search .shortcut,
+  #root .topbar-spacer,
+  #root .topbar .status-pill,
+  #root .topbar .secondary-btn,
+  #root .topbar .primary-btn {
+    display: none !important;
+  }
+
+  #root .status-pill,
+  #root .secondary-btn,
+  #root .primary-btn,
+  #root .icon-button {
+    max-width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  #root .topbar .icon-button {
+    order: 2 !important;
+    flex: 0 0 40px !important;
+    width: 40px !important;
+    max-width: 40px !important;
+    height: 40px !important;
+  }
+
+  body > #root .workspace,
+  #root .app > .workspace,
+  .app > .workspace,
+  .workspace {
+    display: block !important;
+    grid-column: auto !important;
+    grid-row: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    margin: 0 !important;
+    padding: 12px !important;
+    overflow-x: hidden !important;
+  }
+
+  #root .page-panel,
+  #root .page-panel.active {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  body > #root .bento,
+  #root .workspace .bento,
+  .workspace .bento,
+  .bento {
+    display: flex !important;
+    flex-direction: column !important;
+    grid-template-columns: none !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    gap: 12px !important;
+    overflow-x: hidden !important;
+  }
+
+  #root .bento > *,
+  #root .card,
+  #root [class*="card"],
+  #root .kpi,
+  #root .workflow-card,
+  #root .inbox-card,
+  #root .viewer-card,
+  #root .fields-card,
+  #root .review-card,
+  #root .validation-card,
+  #root .governance-card {
+    flex: 0 0 auto !important;
+    grid-column: auto !important;
+    grid-row: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    min-height: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  #root .workflow-top,
+  #root .workflow-actions,
+  #root .steps,
+  #root .step,
+  #root .viewer,
+  #root .paper,
+  #root .table-wrap,
+  #root .doc-list,
+  #root .validation-body,
+  #root .governance-body {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  #root .workflow-top,
+  #root .workflow-actions,
+  #root .steps {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+  #root .workflow-actions > *,
+  #root .primary-btn,
+  #root .secondary-btn {
+    max-width: 100% !important;
+    white-space: normal !important;
+  }
+
+  #root .drawer-overlay,
+  #root .utility-overlay {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  #root .drawer {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    display: flex !important;
+    width: min(320px, 88vw) !important;
+    max-width: 88vw !important;
+    height: 100dvh !important;
+    max-height: 100dvh !important;
+    overflow: hidden !important;
+    transform: translateX(-102%) !important;
+  }
+
+  #root .drawer.open {
+    transform: translateX(0) !important;
+  }
+
+  #root .drawer-body {
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+
+  #root .utility-sheet {
+    width: auto !important;
+    max-width: calc(100vw - 20px) !important;
+    left: 10px !important;
+    right: 10px !important;
+    overflow: hidden !important;
+  }
+}
+/* mobile-fix-v2-clean */