What happened
On narrow screen widths, the controls on the right side of the header extend beyond the viewport.
The GitHub logo is partially or fully out of bounds, and part of the LIVE status badge is also clipped. This produces visual glitches near the right edge of the page and may also cause horizontal overflow.
Expected behaviour
All header controls should remain inside the viewport without clipping or causing horizontal overflow.
On smaller screens, the layout could reduce spacing, hide or collapse lower-priority controls, shorten labels, or otherwise adapt to the available width.
Steps to reproduce
- Open BEACON on a phone or in a narrow browser window.
- Make the viewport narrow enough that the header has limited horizontal space.
- Look at the right side of the header.
- Observe that the LIVE badge and GitHub icon extend beyond or are clipped by the viewport.
- Resize the window or rotate the device and observe the visual glitches as the available width changes.
Environment
- beacon-web image:
ghcr.io/meshcore-beacon/beacon-web:latest@sha256:987b8c971dadc2db0e0d7f20500c73359930a979b8a14650e75106a7a378776e
- Browser: Safari
- Deployment: Docker Swarm at
https://beacon.meshat.se
Screenshots
Console / network output
No relevant console or network errors observed.
Additional context
The header currently places the wordmark, region selector, theme picker, connection-status badge, and GitHub link in a single fixed-height row. The controls do not appear to have a narrow-screen fallback when their combined width exceeds the available space.
What happened
On narrow screen widths, the controls on the right side of the header extend beyond the viewport.
The GitHub logo is partially or fully out of bounds, and part of the LIVE status badge is also clipped. This produces visual glitches near the right edge of the page and may also cause horizontal overflow.
Expected behaviour
All header controls should remain inside the viewport without clipping or causing horizontal overflow.
On smaller screens, the layout could reduce spacing, hide or collapse lower-priority controls, shorten labels, or otherwise adapt to the available width.
Steps to reproduce
Environment
ghcr.io/meshcore-beacon/beacon-web:latest@sha256:987b8c971dadc2db0e0d7f20500c73359930a979b8a14650e75106a7a378776ehttps://beacon.meshat.seScreenshots
Console / network output
Additional context
The header currently places the wordmark, region selector, theme picker, connection-status badge, and GitHub link in a single fixed-height row. The controls do not appear to have a narrow-screen fallback when their combined width exceeds the available space.