louislam/uptime-kuma

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

Open

#5977 opened on Jul 11, 2025

View on GitHub
 (13 comments) (0 reactions) (1 assignee)JavaScript (86,760 stars) (7,844 forks)batch import
A:ui/uxbuggood first issue

Description

📑 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

Contributor guide

Tech stack
vuejavascriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.js basicsCSS responsive design
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the filter dropdown menu component in the list tab of the mobile view. Identify how the dropdown's positioning affects the navbar overflow. Consider adjusting CSS to prevent the dropdown from extending beyond the viewport, possibly by setting max width and right alignment. Look at the component's style files or the parent navbar layout to ensure proper containment.