louislam/uptime-kuma

Navbar in mobile view has broken navbar position when on the list tab

Open

Aperta il 11 lug 2025

Vedi su GitHub
 (13 commenti) (0 reazioni) (1 assegnatario)JavaScript (86.760 star) (7844 fork)batch import
A:ui/uxbuggood first issue

Descrizione

📑 I have found these related issues/pull requests

none

🛡️ Security Policy

📝 Description

The following piece of html in the app causes the navbar to go out of sight in (at least) Chrome and Firefox.

filter-dropdown-menu is pre-rendered to go out of bounds for labels.

It seems the dropdown pushes into overflow with labels that are too long.(?) It doesn't seem to maintain a margin from the right of the viewport.

https://github.com/user-attachments/assets/e66f2a56-976f-4748-9752-3b9ba789d282

This only happens when the labels get to big. I tried reproducing but couldn't figure why it didn't happen in an old instance (Docker) untill I added the label: Local IP Address to make 4 labels total and gave the label a long name.

👟 Reproduction steps

Open Uptime Kuma on a mobile device (or with small enough resolution in Chrome with devtools open).

👀 Expected behavior

The lists tab should not move down the navbar and cause overflow issues.

😓 Actual Behavior

The lists tab does cause the navbar to move down and causes overflow issues.

🐻 Uptime-Kuma Version

1.23.16

💻 Operating System and Arch

LXC (Proxmox via Community Scripts) and also a LXC with Docker containing this container

🌐 Browser

Shows in Chrome and Firefox (latest)

🖥️ Deployment Environment

n/a

📝 Relevant log output

Guida contributor

Tech stack
vuejavascriptcss
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
blocked
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
Vue.js basicsCSS responsive design
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
35
Direzione di ricerca
Indaga sul componente filter dropdown menu nella scheda dell'elenco della vista mobile. Identifica come il posizionamento del menu a discesa influisca sull'overflow della barra di navigazione. Considera di regolare il CSS per impedire che il menu a discesa si estenda oltre il viewport, eventualmente impostando max width e allineamento a destra. Esamina i file di stile del componente o il layout della barra di navigazione genitore per garantire un corretto contenimento.