From 837a187bd108cc98afbf68d449294352ed356687 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Tue, 5 May 2026 10:58:10 -0700
Subject: [PATCH] fix(web): stabilize mobile layouts

---
 web/src/app/(app)/notes/[noteId]/page.tsx |  4 ++--
 web/src/app/(app)/workspaces/page.tsx     |  2 +-
 web/src/app/globals.css                   | 16 ++++++++++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/src/app/(app)/notes/[noteId]/page.tsx b/web/src/app/(app)/notes/[noteId]/page.tsx
index 159fd2c..0c764c0 100644
--- a/web/src/app/(app)/notes/[noteId]/page.tsx
+++ b/web/src/app/(app)/notes/[noteId]/page.tsx
@@ -228,7 +228,7 @@ export default function NoteDetailPage() {
       title={note.title}
       description="Editable note surface with metadata, linked context, tasks, artifacts, and review history."
       actions={
-        <div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center" }}>
+        <div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center", flexWrap: "wrap" }}>
           {isSaving ? (
             <Badge>Saving</Badge>
           ) : (
@@ -259,7 +259,7 @@ export default function NoteDetailPage() {
         </div>
       }
     >
-      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--nl-space-4)" }}>
+      <div className="note-detail-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--nl-space-4)" }}>
         <NoteEditor
           note={note}
           onSave={handleSave}
diff --git a/web/src/app/(app)/workspaces/page.tsx b/web/src/app/(app)/workspaces/page.tsx
index 497875c..8ffebd1 100644
--- a/web/src/app/(app)/workspaces/page.tsx
+++ b/web/src/app/(app)/workspaces/page.tsx
@@ -172,7 +172,7 @@ function WorkspacesPageInner() {
         </div>
       }
     >
-      <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
+      <section className="workspace-layout-grid" style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
         <aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
           <div style={{ fontWeight: 700 }}>Saved views</div>
           <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index b71faba..28f269e 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -124,6 +124,22 @@ button {
     border-right: 0;
     border-bottom: 1px solid var(--nl-border-default);
   }
+
+  .main-panel {
+    padding: var(--nl-space-5);
+  }
+
+  .note-detail-grid,
+  .workspace-layout-grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}
+
+@media (max-width: 520px) {
+  .main-panel {
+    padding: var(--nl-space-4);
+    padding-top: var(--nl-space-8);
+  }
 }
 
 /* Focus-visible — keyboard accessibility */