From c01c34d3e031c4125dca819142ecae34bbde4d24 Mon Sep 17 00:00:00 2001
From: emil <emil28092005@gmail.com>
Date: Fri, 15 May 2026 18:23:35 +0300
Subject: [PATCH] style(dm): widen desktop dashboard at xl/2xl breakpoints

Bump container max-width and right context column at xl/2xl so the
reference and notes panels get noticeably more room on larger monitors.
Mobile and lg layouts are unchanged.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/components/dm/NotesPanel.astro | 2 +-
 src/layouts/DmLayout.astro         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/dm/NotesPanel.astro b/src/components/dm/NotesPanel.astro
index 2f01335..79cfdee 100644
--- a/src/components/dm/NotesPanel.astro
+++ b/src/components/dm/NotesPanel.astro
@@ -7,7 +7,7 @@ import { dmTranslations as T } from '../../i18n/dm-translations';
 <DmCard padding="md" dataTestid="notes-section">
   <textarea
     id="notes-textarea"
-    class="w-full h-64 bg-[var(--bg-input)] border border-[var(--border-color)] rounded-lg p-4 text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--gold)] focus:ring-1 focus:ring-[var(--gold)] transition-all resize-none"
+    class="w-full h-64 xl:h-80 2xl:h-96 bg-[var(--bg-input)] border border-[var(--border-color)] rounded-lg p-4 text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--gold)] focus:ring-1 focus:ring-[var(--gold)] transition-all resize-none"
     placeholder={T.emptyNotesPlaceholder}
     data-testid="notes-textarea"
   ></textarea>
diff --git a/src/layouts/DmLayout.astro b/src/layouts/DmLayout.astro
index d4f8d20..4402c21 100644
--- a/src/layouts/DmLayout.astro
+++ b/src/layouts/DmLayout.astro
@@ -37,8 +37,8 @@ const {
     </div>
 
     <!-- Dashboard grid -->
-    <div class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
-      <div class="grid grid-cols-1 lg:grid-cols-[260px_1fr_300px] gap-4">
+    <div class="flex-1 max-w-7xl xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
+      <div class="grid grid-cols-1 lg:grid-cols-[260px_1fr_320px] xl:grid-cols-[280px_minmax(0,1fr)_460px] 2xl:grid-cols-[300px_minmax(0,1fr)_560px] gap-4 xl:gap-6">
 
         <!-- Sidebar (desktop only) -->
         <aside class="hidden lg:block">
@@ -71,7 +71,7 @@ const {
 
     <!-- Footer -->
     <footer class="w-full border-t border-[var(--border-gold)] bg-[var(--bg-secondary)]/60 backdrop-blur-sm">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
+      <div class="max-w-7xl xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
         <span class="text-sm text-[var(--text-secondary)]">
           {T.footer}
         </span>