starred/uptime-kuma

Fork 0

mirror of https://github.com/louislam/uptime-kuma.git synced 2026-03-02 22:57:00 -05:00

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

New issue

Open

opened 2026-02-28 03:54:26 -05:00 by deekerman · 11 comments

deekerman commented

2026-02-28 03:54:26 -05:00

Owner

Originally created by @VNRARA on GitHub (Jul 10, 2025).

Originally assigned to: @Angel-Mathew007 on GitHub.

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

Originally created by @VNRARA on GitHub (Jul 10, 2025). Originally assigned to: @Angel-Mathew007 on GitHub. ### 📑 I have found these related issues/pull requests none ### 🛡️ Security Policy - [x] I have read and agree to Uptime Kuma's [Security Policy](https://github.com/louislam/uptime-kuma/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. <img width="504" height="861" alt="Image" src="https://github.com/user-attachments/assets/822ca95d-77e0-421d-828c-8cd77542b76e" /> 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. <img width="493" height="288" alt="Image" src="https://github.com/user-attachments/assets/e4c71b70-f04e-42f0-8c7a-b9bd0ee22d48" /> ### 👟 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 ```bash session `````

deekerman added the

bug

A:ui/ux

good first issue

labels

2026-02-28 03:54:26 -05:00

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Jul 10, 2025):

Nice work debugging this! It looks like a fairly straightforward fix — would you be open to opening a PR for it?

@CommanderStorm commented on GitHub (Jul 10, 2025): Nice work debugging this! It looks like a fairly straightforward fix — would you be open to opening a PR for it?

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@VNRARA commented on GitHub (Jul 10, 2025):

Hey, I don't know this code/lang. I've tried to look for it, but I've gotten as far as devtools and some basic HTML debugging. Could you point me in the right direction?

This is where I've been trying to find something: src/components/MonitorListFilterDropdown.vue

I'll try and find it and do the PR.

EDIT: seems like whatever I'm doing in devtools causes the dropdown menu to just get totally out of place.

@VNRARA commented on GitHub (Jul 10, 2025): Hey, I don't know this code/lang. I've tried to look for it, but I've gotten as far as devtools and some basic HTML debugging. Could you point me in the right direction? This is where I've been trying to find something: src/components/MonitorListFilterDropdown.vue I'll try and find it and do the PR. EDIT: seems like whatever I'm doing in devtools causes the dropdown menu to just get totally out of place.

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@VNRARA commented on GitHub (Jul 10, 2025):

I've got something I forked and changed. But I can't seem to figure out how to get my test on dockerhub or in docker for now... I'll try again later when I wake up again.

@VNRARA commented on GitHub (Jul 10, 2025): I've got something I forked and changed. But I can't seem to figure out how to get my test on dockerhub or in docker for now... I'll try again later when I wake up again.

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Jul 11, 2025):

You can just open an pull request and then use https://github.com/louislam/uptime-kuma/wiki/Test-Pull-Requests

For development the setup is slightly simpler.

@CommanderStorm commented on GitHub (Jul 11, 2025): You can just open an pull request and then use https://github.com/louislam/uptime-kuma/wiki/Test-Pull-Requests For development the setup is slightly simpler.

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@Angel-Mathew007 commented on GitHub (Sep 4, 2025):

can we work on this

@Angel-Mathew007 commented on GitHub (Sep 4, 2025): can we work on this

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Sep 4, 2025):

Shure

@CommanderStorm commented on GitHub (Sep 4, 2025): Shure

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@Angel-Mathew007 commented on GitHub (Sep 7, 2025):

Shure

@CommanderStorm Thanks a lot! I’ve started working on this and will need a few weeks to complete it.

@Angel-Mathew007 commented on GitHub (Sep 7, 2025): > Shure @CommanderStorm Thanks a lot! I’ve started working on this and will need a few weeks to complete it.

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@Angel-Mathew007 commented on GitHub (Sep 30, 2025):

@CommanderStorm Created a pr for this issue #6154

@Angel-Mathew007 commented on GitHub (Sep 30, 2025): @CommanderStorm Created a pr for this issue #6154

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@Ayush4158 commented on GitHub (Oct 4, 2025):

@Angel-Mathew007 You're Woking on this issue??

@Ayush4158 commented on GitHub (Oct 4, 2025): @Angel-Mathew007 You're Woking on this issue??

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@Angel-Mathew007 commented on GitHub (Oct 7, 2025):

@Ayush4158 Yes, I’m currently working on this issue. The PR has already been created and is awaiting review and merge.

@Angel-Mathew007 commented on GitHub (Oct 7, 2025): @Ayush4158 Yes, I’m currently working on this issue. The PR has already been created and is awaiting review and merge.

deekerman commented

2026-02-28 03:54:32 -05:00

Author

Owner

@louislam commented on GitHub (Oct 10, 2025):

Re-opened due to reverted.

@louislam commented on GitHub (Oct 10, 2025): Re-opened due to reverted.