From 23a7ed7822601bd19fca62505478a54156101666 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 1 Apr 2026 20:56:33 -0400
Subject: [PATCH] refactor: DRY layout bounds via --page-max-width and
 --sidebar-width CSS vars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add --page-max-width (1200px), --page-padding-x (1rem), and --sidebar-width (260px)
to theme.css so all views share a single source of truth.

- HomeView: 1100px → var(--page-max-width) (aligns with all other views)
- NotesListView, TasksListView, ProjectListView, ProjectView, CalendarView: var(--page-max-width)
- ChatView: sidebar + context sidebar → var(--sidebar-width); inner message/input
  column max-widths → var(--page-max-width)
- KnowledgeView: filter panel 180px → var(--sidebar-width); minichat left offset updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/theme.css          |  4 ++++
 frontend/src/views/CalendarView.vue    |  2 +-
 frontend/src/views/ChatView.vue        | 12 ++++++------
 frontend/src/views/HomeView.vue        |  6 +++---
 frontend/src/views/KnowledgeView.vue   |  4 ++--
 frontend/src/views/NotesListView.vue   |  4 ++--
 frontend/src/views/ProjectListView.vue |  4 ++--
 frontend/src/views/ProjectView.vue     |  4 ++--
 frontend/src/views/TasksListView.vue   |  4 ++--
 9 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index e5668e5..7cb9e4b 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -50,6 +50,10 @@
   --radius-lg: 18px;
   --radius-pill: 9999px;
   --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
+  /* Layout */
+  --page-max-width: 1200px;
+  --page-padding-x: 1rem;
+  --sidebar-width: 260px;
 }
 
 [data-theme="dark"] {
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index b1a6513..ff72128 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -338,7 +338,7 @@ const upcomingGrouped = computed(() => {
 
 <style scoped>
 .calendar-view {
-  max-width: 1200px;
+  max-width: var(--page-max-width);
   margin: 0 auto;
   padding: 1.5rem 1.5rem 3rem;
 }
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index 33d92b2..fdc6cee 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -1037,7 +1037,7 @@ onUnmounted(() => {
 }
 
 .chat-sidebar {
-  width: 260px;
+  width: var(--sidebar-width);
   min-width: 200px;
   display: flex;
   flex-direction: column;
@@ -1360,14 +1360,14 @@ onUnmounted(() => {
   padding: 1rem 1.5rem;
   display: flex;
   flex-direction: column;
-  max-width: 1200px;
+  max-width: var(--page-max-width);
   margin: 0 auto;
   width: 100%;
 }
 
 .context-sidebar {
-  width: 220px;
-  min-width: 180px;
+  width: var(--sidebar-width);
+  min-width: 200px;
   background: var(--color-bg-secondary);
   display: flex;
   flex-direction: column;
@@ -1578,7 +1578,7 @@ details[open] .thinking-summary::before {
 
 /* Input wrapper */
 .input-wrapper {
-  max-width: 1200px;
+  max-width: var(--page-max-width);
   margin: 0 auto 2rem;
   padding: 0 1rem;
   width: 100%;
@@ -1914,7 +1914,7 @@ details[open] .thinking-summary::before {
     z-index: 100;
     transform: translateX(-100%);
     transition: transform 0.25s ease;
-    width: 260px;
+    width: var(--sidebar-width);
   }
   .chat-sidebar.open {
     transform: translateX(0);
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 929fff3..87783db 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -574,9 +574,9 @@ function formatUpcomingTime(event: EventEntry): string {
 
 <style scoped>
 .home {
-  max-width: 1100px;
+  max-width: var(--page-max-width);
   margin: 2rem auto;
-  padding: 0 1.5rem;
+  padding: 0 var(--page-padding-x);
 }
 
 /* ─── Chat widget ────────────────────────────────────────────── */
@@ -1015,7 +1015,7 @@ function formatUpcomingTime(event: EventEntry): string {
 
 /* ─── Mobile ─────────────────────────────────────────────────── */
 @media (max-width: 680px) {
-  .home { padding: 0 1rem; margin: 1rem auto; }
+  .home { padding: 0 var(--page-padding-x); margin: 1rem auto; }
   .hero-top { flex-direction: column; align-items: flex-start; }
   .btn-workspace-hero { width: 100%; justify-content: center; }
   .projects-grid { grid-template-columns: 1fr; }
diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 34b32b9..f4787ab 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -618,7 +618,7 @@ onUnmounted(() => {
 
 /* ── Filter panel ────────────────────────────────────────── */
 .filter-panel {
-  width: 180px;
+  width: var(--sidebar-width);
   flex-shrink: 0;
   padding: 16px 12px;
   border-right: 1px solid var(--color-border, rgba(255,255,255,0.06));
@@ -933,7 +933,7 @@ onUnmounted(() => {
 .minichat {
   position: absolute;
   bottom: 0;
-  left: 180px; /* align with content area past filter panel */
+  left: var(--sidebar-width); /* align with content area past filter panel */
   right: 0;
   z-index: 20;
   display: flex;
diff --git a/frontend/src/views/NotesListView.vue b/frontend/src/views/NotesListView.vue
index 0e9a54c..f99eefc 100644
--- a/frontend/src/views/NotesListView.vue
+++ b/frontend/src/views/NotesListView.vue
@@ -192,9 +192,9 @@ function onOffsetUpdate(offset: number) {
 
 <style scoped>
 .notes-list {
-  max-width: 1200px;
+  max-width: var(--page-max-width);
   margin: 2rem auto;
-  padding: 0 1rem;
+  padding: 0 var(--page-padding-x);
   overflow-x: clip;
 }
 .header {
diff --git a/frontend/src/views/ProjectListView.vue b/frontend/src/views/ProjectListView.vue
index 27c1ebb..edd331e 100644
--- a/frontend/src/views/ProjectListView.vue
+++ b/frontend/src/views/ProjectListView.vue
@@ -253,9 +253,9 @@ function truncate(text: string | null, max = 120): string {
 
 <style scoped>
 .projects-list {
-  max-width: 1200px;
+  max-width: var(--page-max-width);
   margin: 2rem auto;
-  padding: 0 1rem;
+  padding: 0 var(--page-padding-x);
   overflow-x: clip;
 }
 
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 1fefc0a..c8d61c1 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -639,9 +639,9 @@ async function confirmDelete() {
 <style scoped>
 /* ── Layout ─────────────────────────────────────────────────── */
 .project-view {
-  max-width: 1200px;
+  max-width: var(--page-max-width);
   margin: 2rem auto;
-  padding: 0 1rem;
+  padding: 0 var(--page-padding-x);
   overflow-x: clip;
 }
 
diff --git a/frontend/src/views/TasksListView.vue b/frontend/src/views/TasksListView.vue
index a8de3fb..2b8c572 100644
--- a/frontend/src/views/TasksListView.vue
+++ b/frontend/src/views/TasksListView.vue
@@ -353,9 +353,9 @@ function toggleGroup(key: string) {
 
 <style scoped>
 .tasks-list {
-  max-width: 1200px;
+  max-width: var(--page-max-width);
   margin: 2rem auto;
-  padding: 0 1rem;
+  padding: 0 var(--page-padding-x);
   overflow-x: clip;
 }
 .header {