From 4b682f24f457c1e6b49f7d32a3d7bd1202b9ae0c Mon Sep 17 00:00:00 2001 From: liyizhouAI Date: Sat, 11 Apr 2026 17:32:52 +0800 Subject: [PATCH] feat: dark mode full-page responsive layout overrides Override inner container max-width constraints (.main-content, .dashboard-section, .content-area, .main-content-area, .panel-wrapper) so dark mode content fills widescreen displays like light mode does natively. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude Co-Authored-By: Happy --- frontend/src/App.vue | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 7c03d51b..f442bb23 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -687,6 +687,28 @@ html[data-theme='dark'][data-theme='dark'] .main-view { max-width: none !important; } +/* Dark mode layout: override inner container max-width constraints */ +html[data-theme='dark'][data-theme='dark'] .main-content { + max-width: none !important; + width: 100% !important; +} + +html[data-theme='dark'][data-theme='dark'] .dashboard-section { + max-width: none !important; + width: 100% !important; +} + +html[data-theme='dark'][data-theme='dark'] .content-area, +html[data-theme='dark'][data-theme='dark'] .main-content-area { + width: 100% !important; + max-width: none !important; +} + +html[data-theme='dark'][data-theme='dark'] .panel-wrapper.left, +html[data-theme='dark'][data-theme='dark'] .panel-wrapper.right { + max-width: none !important; +} + @media (max-width: 768px) { .theme-toggle { width: 16px;