Navbar in mobile view has broken navbar position when on the list tab · louislam/uptime-kuma#5977

(13 留言) (0 反應) (1 負責人)JavaScript (86,760 star) (7,844 fork)batch import

A:ui/uxbuggood first issue

描述

📑 I have found these related issues/pull requests

none

🛡️ Security Policy

I have read and agree to Uptime Kuma's 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

貢獻者指南

技術棧: vuejavascriptcss
領域: frontend
議題類型: bug
難度: 3
預計時間: 1-3 hours
活動狀態: blocked
清晰度: clear
前置要求: Vue.js basicsCSS responsive design
新手友善度: 35
研究方向: 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.