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
+3 -3
View File
@@ -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; }