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 <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
liyizhouAI 2026-04-11 17:32:52 +08:00
parent 36e616101a
commit 4b682f24f4
1 changed files with 22 additions and 0 deletions

View File

@ -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;