vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): keep console layout usable at mid widths

Browse source
This commit is contained in:
vince 2026-06-20 02:21:16 +02:00
parent 0c75220adc
commit 8bb5052dd5
6 changed files with 98 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.test.tsx
View file

@ -35,7 +35,7 @@ describe("React app dashboard state view", () => {
expect(html).toContain('data-ui-theme-toggle="true"');
expect(html).toContain('data-ui-theme-current="dark"');
expect(html).toContain('aria-label="Switch to light theme"');
expect(html).toContain('aria-label="Light theme"');
expect(html).toContain('aria-pressed="false"');
expect(html).toContain("Theme");
expect(html).toContain("Dark");

3
src/lib/ui/components/ThemeToggle.tsx
View file

@ -9,11 +9,10 @@ export interface ThemeToggleProps {
export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
const nextTheme = getNextUiTheme(theme);
const label = `Switch to ${nextTheme} theme`;
return (
<button
aria-label={label}
aria-label="Light theme"
aria-pressed={theme === "light"}
className="theme-toggle"
data-ui-theme-current={theme}

2
src/lib/ui/components/render.test.tsx
View file

@ -190,7 +190,7 @@ describe("dashboard UI components", () => {
expect(body).toContain('class="theme-toggle"');
expect(body).toContain('data-ui-theme-current="light"');
expect(body).toContain('aria-label="Switch to dark theme"');
expect(body).toContain('aria-label="Light theme"');
expect(body).toContain('aria-pressed="true"');
expect(body).toContain('class="theme-toggle__label"');
expect(body).toContain('class="theme-toggle__switch"');

23
src/lib/ui/components/styles.css
View file

@ -862,13 +862,34 @@
}
}
@media (max-width: 780px) {
@media (max-width: 1180px), (max-height: 840px) {
.dashboard-frame {
grid-template-rows: auto auto auto auto;
height: auto;
min-height: 100vh;
overflow: visible;
}
.dashboard-frame__panels {
overflow: visible;
}
}
@media (max-width: 1180px) {
.dashboard-frame__header {
grid-template-columns: 1fr;
}
.dashboard-frame__panels {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 780px) {
.dashboard-frame__header,
.dashboard-frame__title,
.dashboard-header,