refactor: DRY layout bounds via --page-max-width and --sidebar-width CSS vars

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>
This commit is contained in:
2026-04-01 20:56:33 -04:00
parent d5771a3d5c
commit 23a7ed7822
9 changed files with 24 additions and 20 deletions
+6 -6
View File
@@ -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);