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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user