From 37709d37b74c534ec76ab0c5647edd94856b061a Mon Sep 17 00:00:00 2001
From: kris <krisoso.com@gmail.com>
Date: Sun, 22 Mar 2026 12:15:11 +0800
Subject: [PATCH] style: make storyforge web v4 responsive

---
 web/storyforge-web-v4/assets/styles.css | 388 ++++++++++++++++++++++++
 1 file changed, 388 insertions(+)

diff --git a/web/storyforge-web-v4/assets/styles.css b/web/storyforge-web-v4/assets/styles.css
index 46004d1..cb04a3f 100644
--- a/web/storyforge-web-v4/assets/styles.css
+++ b/web/storyforge-web-v4/assets/styles.css
@@ -38,6 +38,7 @@ body {
     radial-gradient(circle at top left, rgba(129, 180, 255, 0.18), transparent 28%),
     linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
   color: var(--text);
+  overflow-x: hidden;
 }
 
 a {
@@ -55,6 +56,7 @@ select {
   display: grid;
   grid-template-columns: 272px minmax(0, 1fr);
   min-height: 100vh;
+  width: 100%;
 }
 
 .sidebar {
@@ -65,6 +67,7 @@ select {
   position: sticky;
   top: 0;
   height: 100vh;
+  overflow: auto;
 }
 
 .brand {
@@ -186,6 +189,7 @@ select {
 
 .content {
   padding: 18px 22px 26px;
+  min-width: 0;
 }
 
 .topbar {
@@ -206,6 +210,7 @@ select {
   display: flex;
   align-items: center;
   gap: 12px;
+  min-width: 0;
 }
 
 .workspace-switch,
@@ -236,6 +241,7 @@ select {
   align-items: center;
   gap: 10px;
   min-width: 340px;
+  max-width: 100%;
   padding: 12px 14px;
   color: var(--muted);
 }
@@ -482,6 +488,7 @@ select {
 .layout-grid {
   display: grid;
   gap: 18px;
+  min-width: 0;
 }
 
 .grid-4 {
@@ -510,6 +517,7 @@ select {
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-soft);
   overflow: hidden;
+  min-width: 0;
 }
 
 .panel.pad {
@@ -572,6 +580,7 @@ select {
   border-radius: 18px;
   border: 1px solid var(--line);
   background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
+  min-width: 0;
 }
 
 .task-item,
@@ -684,6 +693,7 @@ select {
 
 .table-wrap {
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 table {
@@ -978,6 +988,384 @@ tbody tr:hover {
   font-size: 13px;
 }
 
+@media (max-width: 1400px) {
+  .grid-5 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-split {
+    grid-template-columns: 240px minmax(0, 1fr) 280px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .app-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sidebar {
+    position: relative;
+    top: auto;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid rgba(201, 220, 239, 0.75);
+    padding: 18px 18px 14px;
+  }
+
+  .brand {
+    padding-bottom: 14px;
+  }
+
+  .nav-group {
+    margin-top: 10px;
+  }
+
+  .nav-group + .nav-group {
+    margin-top: 14px;
+  }
+
+  .nav-title {
+    padding: 0 4px 8px;
+  }
+
+  .nav-group .nav-item {
+    display: inline-flex;
+    width: auto;
+    margin: 0 8px 8px 0;
+  }
+
+  .sidebar-foot {
+    margin-top: 12px;
+  }
+
+  .content {
+    padding: 16px 18px 24px;
+  }
+
+  .topbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .topbar-left,
+  .topbar-right {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .workspace-switch,
+  .search {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .screen-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .screen-head p {
+    max-width: none;
+  }
+
+  .grid-main,
+  .grid-split,
+  .two-col,
+  .three-col {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .grid-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-5 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .detail-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .toolbar-stack {
+    min-width: 0;
+  }
+
+  table {
+    min-width: 760px;
+  }
+}
+
+@media (max-width: 760px) {
+  .sidebar {
+    padding: 14px 14px 12px;
+  }
+
+  .brand {
+    gap: 10px;
+    padding: 4px 4px 12px;
+  }
+
+  .brand-mark {
+    width: 38px;
+    height: 38px;
+    border-radius: 12px;
+  }
+
+  .brand h1 {
+    font-size: 17px;
+  }
+
+  .brand p {
+    font-size: 11px;
+  }
+
+  .nav-group .nav-item {
+    width: calc(50% - 8px);
+    justify-content: flex-start;
+    margin-right: 8px;
+  }
+
+  .sidebar-foot {
+    padding: 12px;
+  }
+
+  .content {
+    padding: 12px 12px 22px;
+  }
+
+  .topbar {
+    padding: 14px;
+    border-radius: 18px;
+  }
+
+  .top-pill {
+    padding: 7px 10px;
+  }
+
+  .auth-inline {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .auth-status {
+    max-width: none;
+    width: 100%;
+  }
+
+  .auth-modal-backdrop,
+  .action-modal-backdrop {
+    padding: 12px;
+    align-items: end;
+  }
+
+  .auth-modal,
+  .action-modal {
+    width: 100%;
+    max-height: min(90vh, 100%);
+    border-radius: 20px;
+    padding: 18px;
+  }
+
+  .auth-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .auth-actions {
+    flex-direction: column-reverse;
+  }
+
+  .auth-actions .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .screen {
+    margin-top: 14px;
+  }
+
+  .screen-head {
+    margin-bottom: 14px;
+  }
+
+  .screen-head h2 {
+    font-size: 24px;
+  }
+
+  .action-row {
+    width: 100%;
+  }
+
+  .action-row .btn {
+    flex: 1 1 calc(50% - 10px);
+    min-width: 0;
+  }
+
+  .grid-4,
+  .grid-5,
+  .mini-grid,
+  .calendar {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .stat-card strong {
+    font-size: 24px;
+  }
+
+  .stat-foot {
+    gap: 8px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .panel.pad,
+  .hero-card,
+  .task-item,
+  .queue-card,
+  .review-card,
+  .sheet-html,
+  .insight-card,
+  .playbook-item {
+    padding: 14px;
+  }
+
+  .task-meta,
+  .entity-meta,
+  .row-meta,
+  .chip-row,
+  .kpi-inline,
+  .timeline {
+    gap: 6px;
+  }
+
+  .toolbar {
+    padding: 14px;
+  }
+
+  .search-inline {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .filters {
+    gap: 8px;
+  }
+
+  .filter {
+    min-width: calc(50% - 4px);
+    flex: 1 1 calc(50% - 4px);
+  }
+
+  .entity-cell {
+    align-items: flex-start;
+  }
+
+  .avatar-lg {
+    width: 40px;
+    height: 40px;
+    border-radius: 13px;
+  }
+
+  .bar-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px;
+  }
+
+  table {
+    min-width: 680px;
+  }
+}
+
+@media (max-width: 560px) {
+  .sidebar {
+    padding: 12px;
+  }
+
+  .brand {
+    padding: 2px 2px 10px;
+  }
+
+  .nav-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+    margin-top: 8px;
+    scrollbar-width: none;
+  }
+
+  .nav-group::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-title {
+    padding: 0 4px 0 2px;
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  .nav-group .nav-item {
+    width: auto;
+    margin-right: 0;
+    flex: 0 0 auto;
+    white-space: nowrap;
+    padding: 9px 11px;
+  }
+
+  .nav-item .icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    font-size: 12px;
+  }
+
+  .sidebar-foot {
+    display: none;
+  }
+
+  .topbar-right {
+    gap: 8px;
+  }
+
+  .search {
+    padding: 10px 12px;
+  }
+
+  .action-row .btn,
+  .btn {
+    width: 100%;
+  }
+
+  .filter {
+    min-width: 100%;
+    flex-basis: 100%;
+  }
+
+  .panel-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .hero-card h3 {
+    font-size: 17px;
+  }
+
+  .screen-head h2 {
+    font-size: 22px;
+  }
+
+  table {
+    min-width: 620px;
+  }
+}
+
 .slot {
   margin-top: 8px;
   padding: 8px 10px;