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>
This commit is contained in:
emil
2026-05-15 18:23:35 +03:00
co-authored by Claude Opus 4.7
parent 659b042de5
commit c01c34d3e0
2 changed files with 4 additions and 4 deletions
+1 -1
View File
@@ -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>
+3 -3
View File
@@ -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>