Your VPN card is hugely tall on the dashboard — how to fix the stretched layout

You open your self-hosted dashboard and the VPN card (and often the Weather card next to it) has ballooned to over a thousand pixels tall, shoving everything below it off the screen. The VPN itself is fine — this is a CSS layout bug. A stretchy card grid and an activity list with no height limit are dragging the whole row taller than it should be.

Rather not touch CSS at all? SparkBox ships the dashboard with this layout already corrected, so cards stay their natural height out of the box. See the walkthrough →

What you're actually seeing

Dashboards like this arrange their widgets in a bento grid — a CSS grid where each widget ("card") sits in a cell, laid out in rows. When we measured the cards in a headless browser (an automated browser with no visible window, used for testing), the numbers were dramatic:

• Weather card: 1135px tall → should be about 173px
• VPN card: 1135px tall → should be about 267px
• Activity list: growing endlessly, with no cap
• Disk and container-health cards: their bottom sections ("tails") pushed clean off the visible area

Every card in the affected row was locked to the same 1135px height. That is the tell-tale sign of the two problems below working together.

Cause 1: the grid stretches every card to match the tallest one

The bento grid was set with align-items: stretch. In CSS grid and flexbox, align-items controls how items are sized along the cross axis (the up-and-down direction, for a normal row of cards). stretch means "make every card as tall as the row." That is usually what you want when all the cards are similar — it keeps clean, even edges.

The problem is that a row is only as short as its tallest card allows. As soon as one card gets tall for any reason, every neighbour in that row is forced to match it. So the VPN card wasn't broken on its own — it was being dragged up to 1135px because something else in the row shot up to 1135px.

The fix

1. Open your dashboard's stylesheet (the .css file for the dashboard, or the custom-CSS box in its settings if it has one).
2. Find the rule for the card grid. It targets the grid container — in our build that selector is .bento.
3. Change the alignment so cards keep their own natural height instead of matching the row:

.bento {
  align-items: start;
}

start tells each card to size itself to its own content and sit at the top of its cell. A short card stays short even if a tall card sits beside it. On its own this stops one runaway card from inflating its neighbours — but you still want to stop that one card from running away in the first place, which is Cause 2.

Cause 2: the activity/queue list has no height limit

The real culprit that started the chain was the activity list — the running feed of recent events (and, on a VPN dashboard, this is the same kind of element as a connection or download queue). It was rendered with no maximum height, so every new item made it taller, and taller, with nothing to stop it. That one element is what climbed to 1135px, and Cause 1 then broadcast that height across the whole row.

A long list should scroll inside its own box, not grow the page. That keeps the card a fixed, sensible size no matter how many entries pile up.

The fix

1. In the same stylesheet, find the activity or queue list element. In our build it's #activity.
2. Give it a maximum height and let it scroll internally:

#activity {
  max-height: 360px;
  overflow-y: auto;
}

Now the list can hold as many items as it likes, but it never grows past 360px — beyond that it scrolls within its own frame. We picked 360px because it shows a healthy number of rows without dominating the layout; adjust it to taste, but keep it a fixed, finite number.

Confirm the fix

1. Save the stylesheet and hard-refresh the dashboard (Ctrl/Cmd + Shift + R) so the browser drops the old CSS from its cache.
2. Check the VPN and Weather cards — they should now sit at their natural heights (roughly 267px and 173px in our measurements) instead of 1135px.
3. Scroll the activity list. It should scroll inside its own box and stop at your max-height.
4. Look at the disk and container-health cards — their bottom rows should be visible again now that nothing is pushing them off-screen.

After we applied both changes we re-ran a full sweep of 18 cards. Every one measured correctly, including an embedded iframe card ("My Ship"), and the Overview page came out about 19% shorter overall — proof the fix trimmed real dead space rather than just hiding the symptom.

What this is not

An empty VPN library or empty queue is a separate, harmless thing — it just means there's nothing to list yet, and it's cosmetic. It does not cause the giant-card symptom. If your VPN card is the right height but simply shows no entries, that's normal until traffic or items arrive; nothing above needs changing for that.

Frequently asked

Why is my VPN card so tall on the dashboard?

The card grid uses align-items: stretch, so every card in a row grows to match the tallest one. When the activity or queue list has no height limit, it balloons its row and drags the VPN card up with it — in our audit the VPN card went from a natural 267px to 1135px.

How do I stop the activity list from making cards huge?

Give the list a max-height (we used 360px) and overflow-y: auto so it scrolls internally instead of pushing the row taller. Then switch the grid from align-items: stretch to align-items: start so each card keeps its own natural height.

Will fixing the VPN card break the Weather card or others?

No. The two changes are the same fix for the whole grid. In our 18-card regression sweep every card measured correctly afterwards, including Weather (1135px down to 173px) and an embedded iframe card.

Is the VPN library or queue itself broken?

Not usually. An empty VPN library or queue is a separate, cosmetic state. The giant-card symptom is purely a layout issue in the dashboard's CSS, not a fault in the VPN itself.