starred/uptime-kuma

Fork 0

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

Status Page High Density Display #2925

New issue

Closed

opened 2026-02-28 03:11:47 -05:00 by deekerman · 5 comments

deekerman commented

2026-02-28 03:11:47 -05:00

Owner

Originally created by @brooksvb on GitHub (Dec 13, 2023).

⚠️ Please verify that this feature request has NOT been suggested before.

I checked and didn't find similar feature request

🏷️ Feature Request Type

UI Feature

🔖 Feature description

The default status page display wastes a ton of screen real estate on anything larger than mobile. I think there should be an option to enable higher density styling on a status page.

We plan to display a status page on a large wall-mounted TV, so we would like to see much more information using that screen real-estate.

✔️ Solution

A checkbox option in the edit sidebar for a status to enable high-density display, reducing empty space on the page and displaying many more items in more than a single column. Enabling this option should not break styling for smaller screens and mobile.

❓ Alternatives

I solved this by writing some custom CSS. I was pleased with the results and wanted to share my work, so I created a Reddit post.

The CSS can be viewed in this Gist.

I tested at typical computer monitor sizes and made sure mobile size still looked fine. I still need to see how it looks on 4K screen sizes and will likely need to add a couple additional tweaks, which I will update in the Gist.

I figured my CSS could be a good reference for implementing this as a feature, but as things currently stand, we are satisfied with our custom CSS.

Here are before and after pictures for comparison:

Here is a list of the changes my CSS makes:

Removed large gutters on the sides of content to use more of full screen width
Dynamic grid layout with min and max width for each item; will try to fit as many columns appropriate for the screen size
Changed item layout to a stacked layout for compactness
Moved uptime percentage on items to empty space to allow more width for display name
Added border around items for slightly improved readability
Compacted header by moving Uptime Status side-by-side with the main Status Page Title
Compacted footer
Overrides for various margins and padding for compactness
Tweaked the blue color used for maintenance message because original was harsh on the eyes
Consideration for not applying certain changes that don't look good on mobile

📝 Additional Context

No response

Originally created by @brooksvb on GitHub (Dec 13, 2023). ### ⚠️ Please verify that this feature request has NOT been suggested before. - [X] I checked and didn't find similar feature request ### 🏷️ Feature Request Type UI Feature ### 🔖 Feature description The default status page display wastes a ton of screen real estate on anything larger than mobile. I think there should be an option to enable higher density styling on a status page. We plan to display a status page on a large wall-mounted TV, so we would like to see much more information using that screen real-estate. ### ✔️ Solution A checkbox option in the edit sidebar for a status to enable high-density display, reducing empty space on the page and displaying many more items in more than a single column. Enabling this option should not break styling for smaller screens and mobile. ### ❓ Alternatives I solved this by writing some custom CSS. I was pleased with the results and wanted to share my work, so I created a [Reddit post](https://www.reddit.com/r/UptimeKuma/comments/18hv05l/sharing_my_high_density_status_page_css/). The CSS can be viewed in [this Gist](https://gist.github.com/brooksvb/78a54355151a18477e33c224177dc5fa). I tested at typical computer monitor sizes and made sure mobile size still looked fine. I still need to see how it looks on 4K screen sizes and will likely need to add a couple additional tweaks, which I will update in the Gist. I figured my CSS could be a good reference for implementing this as a feature, but as things currently stand, we are satisfied with our custom CSS. Here are before and after pictures for comparison: ![kuma-before](https://github.com/louislam/uptime-kuma/assets/14019044/9b87bf8f-d5c2-4cf2-b7fe-11ac55e76d20) ![kuma-after](https://github.com/louislam/uptime-kuma/assets/14019044/303b23f5-1797-40a3-a01e-861a8383aead) Here is a list of the changes my CSS makes: - Removed large gutters on the sides of content to use more of full screen width - Dynamic grid layout with min and max width for each item; will try to fit as many columns appropriate for the screen size - Changed item layout to a stacked layout for compactness - Moved uptime percentage on items to empty space to allow more width for display name - Added border around items for slightly improved readability - Compacted header by moving Uptime Status side-by-side with the main Status Page Title - Compacted footer - Overrides for various margins and padding for compactness - Tweaked the blue color used for maintenance message because original was harsh on the eyes - Consideration for not applying certain changes that don't look good on mobile ### 📝 Additional Context _No response_

deekerman

2026-02-28 03:11:47 -05:00

closed this issue
added the
feature-request

A:status-page
labels

deekerman commented

2026-02-28 03:11:52 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Dec 13, 2023):

Multi column displays for the status page are tracked in #3934 and #1844
I don't see a real difference between this and the other issues
=> closing as a duplicate

@CommanderStorm commented on GitHub (Dec 13, 2023): Multi column displays for the status page are tracked in #3934 and #1844 I don't see a real difference between this and the other issues => closing as a duplicate

deekerman commented

2026-02-28 03:11:52 -05:00

Author

Owner

@brooksvb commented on GitHub (Dec 13, 2023):

My bad, I tried searching a few terms but didn't find those issues. Thanks.

@brooksvb commented on GitHub (Dec 13, 2023): My bad, I tried searching a few terms but didn't find those issues. Thanks.

deekerman commented

2026-02-28 03:11:52 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Dec 13, 2023):

Yea, GitHub's search is not great. Fully agree on that one

@CommanderStorm commented on GitHub (Dec 13, 2023): Yea, GitHub's search is not great. Fully agree on that one

deekerman commented

2026-02-28 03:11:52 -05:00

Author

Owner

@ShadowWhisperer commented on GitHub (Nov 25, 2025):

For reference, both above issues are closed. All of the issues they reference are closed, except this #592.

@ShadowWhisperer commented on GitHub (Nov 25, 2025): For reference, both above issues are closed. All of the issues they reference are closed, except this [#592](592 ).

deekerman commented

2026-02-28 03:11:52 -05:00

Author

Owner

@pacholoamit commented on GitHub (Dec 4, 2025):

Just wanting to say I referenced this here: https://github.com/pacholoamit/uptime-kuma-themes

@pacholoamit commented on GitHub (Dec 4, 2025): Just wanting to say I referenced this here: https://github.com/pacholoamit/uptime-kuma-themes

deekerman referenced this issue

2026-02-28 03:18:34 -05:00

[Feature Request] Add option to select different notifications for DOWN and UP #3115