These CSS tweaks are for higher density display for Uptime Kuma status pages in dark mode.

Uptime-Kuma-Status-Page-Dark-Mode-High-Density-Tweaks.css

:root {
  --min-item-width: 28ch;
  --max-item-width: .5fr;
  --grid-spacing: .25rem;
  --item-padding: .25rem;
}

/* Let items expand on small screens */
@media (max-width: 600px) {
  :root {
    --max-item-width: 1fr;
  }
}

/* Cap item width for better appearance on large screens */
@media (min-width: 2560px) {
  :root {
    --max-item-width: 300px;
  }
}

/* Readability on 4K screens at distance */
@media (min-width: 3840px) {
  .item-name {
    font-size 1.3em;
    font-weight: 700;
    letter-spacing: 0.8px;
  }
  .badge {
    font-size: .9em;
  }
  .wrap > .d-flex {
    font-size: .9em;
    font-weight: 500;
    letter-spacing: .8px;
  }
}

/* Expand container */
.container {
  max-width: 98%
}

/* Grid layout */
.monitor-list > .monitor-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), var(--max-item-width)));
  grid-gap: var(--grid-spacing);
}

.item {
  width: 100%;
  padding: var(--item-padding) !important;
  border: #3d3d3d solid 2px;
}

.item > .row {
  flex-direction: column;
}

.row > div {
  width: 100%;
}

/* Text readability */
.item-name {
  color: #f1f1f1;
}

/* Badge movement */
.row {
  position: relative;
}
body:not(.mobile) .badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Header compacting */
.main {
  position: relative;
}
.overall-status {
  padding: .5rem !important;
}
body:not(.mobile) .overall-status {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}

/* Tweaks for mobile size */
body.mobile {}

/* Footer compacting */
footer .alert-heading {
  padding: 0 !important;
}

/* Margin resets */
.mb-4, .mb-5 {
  margin-bottom: .5rem !important;
}

.mt-4 {
  margin-top: .5rem !important;
}
  
.mt-5 {
  margin-top: 0 !important;
}


/* Reduce glaring blue maintenance color */
.bg-maintenance {
  background-color: #4962bd !important;
}

Added tweaks for 4k screen readability

I changed line 3 to --max-item-width: .25fr; because otherwise, on wider displays, groups with less than 4 monitors would inaccurately show gray bars on the left-hand side. I would prefer allowing the full width if there's a way to make the data display accurately.

wow thank you so much

Thank you so much!

How do I fix the empty heartbeats on the left?

Thank you so much!

How do I fix the empty heartbeats on the left?

I have this same issue. Currently working on a fix. It's odd because as soon as you go into the page editor mode they get fixed.

I adjusted Line 3 of the CSS Code to be .15 and it fixes the problem although it doesn't look as good now but it will do for now.

--max-item-width: .5fr; Adjust to --max-item-width: .15fr;
`
Thanks,

Some Tweaks and Aesthetics added!

`:root {
--min-item-width: 320px;
--grid-spacing: 1rem;
--item-padding: 1rem;
--bg-dark: #0f0f0f;
--bg-card: #1a1a1a;
--text-color: #eaeaea;
--accent-color: #3ddc84;
--danger-color: #ff4d4d;
--maintenance-color: #ff9900;
--border-color: #2e2e2e;
--hover-color: #232323;
--transition-fast: 0.2s ease-in-out;
}

body {
background-color: var(--bg-dark);
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header compacting */
.main {
position: relative;
}
.overall-status {
padding: .5rem !important;
}
body:not(.mobile) .overall-status {
position: absolute;
top: 0;
right: 0;
width: 50%;
}

/* Readability on 4K screens at distance */
@media (min-width: 3840px) {
.item-name {
font-size: 1.3em;
font-weight: 700;
letter-spacing: 0.8px;
}
.badge {
font-size: .9em;
}
.wrap > .d-flex {
font-size: .9em;
font-weight: 500;
letter-spacing: .8px;
}
}

/* Container Setup */
.container {
max-width: 95%;
margin: auto;
}

/* Grid layout: 2 per row desktop, 1 on mobile */
.monitor-list > .monitor-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), 1fr));
gap: var(--grid-spacing);
}

/* Card Design */
.item {
background-color: var(--bg-card);
border-radius: 14px;
border: 1px solid var(--border-color);
padding: var(--item-padding);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.item:hover {
background-color: var(--hover-color);
transform: translateY(-4px);
}

/* Title */
.item-name {
font-size: 1.1rem;
font-weight: 600;
text-align: center;
color: var(--text-color);
margin-bottom: 0.5rem;
}

/* Uptime/Status Badge */
.badge {
font-size: 0.75rem;
background-color: #2a2a2a;
color: var(--text-color);
padding: 0.4rem 0.6rem;
border-radius: 6px;
display: inline-block;
margin-top: 0.5rem;
align-self: flex-end;
margin-left: auto;
}

/* Info rows (ping, time, etc.) */
.row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 0.9rem;
gap: 0.5rem;
margin-top: 0.75rem;
}
.row > div {
flex: 1 1 45%;
text-align: center;
}

/* Status bar */
.status-bar {
display: flex;
width: 100%;
height: 8px;
border-radius: 6px;
overflow: hidden;
background-color: #333;
margin-top: 1rem;
}
.status-bar .up {
background-color: var(--accent-color);
flex: 1;
}
.status-bar .down {
background-color: var(--danger-color);
flex: 1;
}
.status-bar .maintenance {
background-color: var(--maintenance-color);
flex: 1;
}

/* Footer + header minimal */
header, footer {
background-color: #111;
color: var(--text-color);
}
footer .alert-heading {
padding: 0.5rem !important;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
.monitor-list > .monitor-list {
grid-template-columns: 1fr;
}

.row {
flex-direction: column;
}

.row > div {
flex: 1 1 100%;
}

.badge {
align-self: center;
}

.status-bar {
height: 6px;
}
}
`

Thanks for this, much better than default.

Small typo on line 25. Missing colon after name: font-size 1.3em;

Thanks for this, much better than default.

Small typo on line 25. Missing colon after name: font-size 1.3em;

Thanks for pointing it out. Fixed it!

@TrulyInfinite, thank you for your template.

@brooksvb, thank you too, I actually came here for your template. But for some reason, yours didn't work quite well for me, the percentage was conflicting with the uptime. The screenshot was taken in 1080p resolution, browser at fullscreen. I don't know why the uptime didn't stayed at the left as it is in the smaller displays. I actually like it better with the uptime percentage centered below, between uptime and last verification time. Is there an way to fix it?

@mizifih
It's quite possible the HTML or CSS changed since I originally wrote this snippet. It's hard for me to test fixing this without having the webpage in front of me; our Uptime Kuma instance hasn't been updated for a while and we are in no rush to do so. I don't see this issue in our instance.

Drop yourself into dev tools and look at the flex properties, where the boxes for containing elements start and end, and you may be able to see where the issue lies.

I would not expect the project devs to offer much support in the way of custom CSS. I tried asking for a simple change that would make the CSS much easier to write and less likely to break, and was told they aren't interested in doing it because you can do it in an objectively worse way and they offer no stability guarantees: louislam/uptime-kuma#4674

So be aware that you'll need the skills to fix the CSS yourself when / if it breaks from an Uptime Kuma update.