Overlapping of window title and window decoration buttons on smaller screens

[cybrejon]

This can be fixed by reducing the dimensions of the buttons. Reducing the padding for the window container will compliment this change, so as not to seem disproportionate with the reduced button dimensions.

[gabriel230701]

1. CENTERED TITLE (INTENTIONAL OVERLAY)

The title is centered using position: absolute; left: 50%; transform: translateX(-50%) and a higher z-index to overlap the buttons. This approach works well when you want a visual overlay effect.

2. TRUNCATE THE TITLE (NO OVERLAY)

If you prefer to avoid overlap, use flex with min-width: 0 and text-overflow: ellipsis. The title will shrink visually with an ellipsis when it doesn’t fit.

3. AUTO-SCALE TITLE (JS) — tries to fit before truncating

Basic example: dynamically reduce the title’s font-size until it fits between the icon and the buttons. Useful when you want to preserve the full text.

If the title can be cut without issue (for example, when showing a tooltip with the full name), prefer truncation with text-overflow: ellipsis — it’s simple and accessible.

If aesthetics matter (centered title overlapping the buttons), use the absolute positioning technique with z-index and pointer-events: none. But ensure accessibility: provide a tooltip or aria-label so screen readers can read the full title.

For better experiences on very small screens, combine strategies: first try resizing the text (with JS), then truncating it, and as a fallback, turn the window buttons into a hamburger menu.