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:
@@ -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"] {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user