Bug Report ZimaOS: Layout Error in Settings Modal

[UhlhornHH]

Bug Report ZimaOS: Layout Error in Settings Modal

Summary

The settings modal in the ZimaOS web interface has a responsive layout issue when the browser uses a larger default font size. The main content area overflows horizontally beyond the right edge of the modal, content is clipped, and the left sidebar title "Settings" (German: "Einstellungen") is truncated unnecessarily.

Environment

Component	Version / Details
ZimaOS	v1.6.2-beta3 (also observed on v1.6.2-beta2 and v1.6.2)
Device	ZimaCube
Browser	Google Chrome 150.0.7871.100
Client OS	macOS Sonoma 14.7.3
Client Hardware	iMac Retina 5K 2020, Intel Core i7
Client Resolution	5K Retina (5120×2880)
UI Language	German
Triggering Chrome Setting	Appearance → Font size: Large

Steps to Reproduce

1. Open the ZimaOS web interface in Google Chrome (http://zimaos.lan or http://10.0.10.30).
2. In Chrome, open Settings → Appearance → Font size and set it to Large.
3. In the ZimaOS UI, click the user/settings icon in the top-right corner.
4. Open Settings.
5. The General page opens by default.
6. Observe the layout of the modal window.

Expected Behavior

• The left sidebar title is fully visible ("Einstellungen" / "Settings").
• The settings cards in the main area fit within the available width with a consistent right margin.
• No horizontal overflow of content beyond the modal boundary.
• Scrollbars only appear where necessary (vertical).

Actual Behavior

1. Sidebar title truncated: The title shows "Einst…" instead of "Einstellungen".
2. Horizontal overflow in main area: The white cards extend too far to the right and are clipped at the right edge of the modal.
3. Cards overlap modal boundary: The cards "ZimaOS+", "Wallpaper", and "Login screen" exceed the drawn window border.
4. Scrollbar issue: The vertical scrollbar in the main area is partially covered by the overflowing content.
5. Reproducible trigger: The issue is reliably triggered by setting Chrome’s font size to Large. With the default setting Medium (recommended), the layout is correct.

Workarounds Tested (Unsuccessful)

• Changing browser zoom (Cmd + / Cmd -)
• Resizing the browser window (fullscreen, windowed mode)
• Clearing browser cache
• Reloading the page
• Opening Chrome in Incognito mode (issue persists as long as font size is set to Large)

Root Cause / Trigger

The issue is not caused by cache, extensions, or zoom level. It is triggered specifically by Chrome’s Appearance → Font size: Large setting.

This indicates that the ZimaOS settings modal does not properly adapt to larger base font sizes. The CSS layout likely relies on fixed widths, fixed margins, or insufficiently flexible flex/grid containers that break when the text scale increases.

Suggested Fix

1. Main content container:

   • Ensure the main area has a flexible width (e.g., flex: 1 or width: calc(100% - <sidebar-width>)).
   • Apply overflow-x: hidden or overflow: hidden to prevent horizontal overflow.
   • Add min-width: 0 to flexible flex children so they can shrink when space is limited.

2. Cards:

   • Use relative widths (%, max-width: 100%) instead of fixed pixel widths.
   • For grid layouts, consider grid-template-columns: repeat(auto-fit, minmax(..., 1fr)).

3. Sidebar title:

   • Increase the sidebar width or allow the title to wrap (white-space: normal).
   • Remove or increase any restrictive max-width on the title container.

4. General:

   • Test the settings modal at different browser font sizes, especially Large.
   • Ensure box-sizing: border-box is used consistently.
   • Consider using rem-based spacing so layouts scale proportionally with font size.

Screenshot

The screenshot shows the settings modal with the truncated sidebar title ("Einst...") and the horizontally overflowing cards in the main content area.

Web UI Files (Reference)

• Base directory: /usr/share/casaos/www/
• Main CSS: /usr/share/casaos/www/assets/index-DsTq7Wgb.css
• Main JS: /usr/share/casaos/www/assets/index-B01lj2PQ.js

Reporter

Gerhard Uhlhorn
Date: 2026-07-09