Fix vertical text in runtime container update-state cards on mobile#199
Merged
LarsLaskowski merged 2 commits intoJul 23, 2026
Merged
Conversation
Stack the Update State cell content vertically in the mobile card layout instead of squeezing it into a single flex row. The long vulnerability summary and available update tag no longer collapse to a near-zero-width column that wrapped character by character.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Stack the Update State cell content vertically in the runtime containers mobile card layout instead of forcing it into a single horizontal flex row.
Why
On mobile, every table cell becomes a horizontal flex row (
display: flex; justify-content: space-between). The Update State cell holds several stacked children (update chip, available-update tag, vulnerability chips, and the long vulnerability summary text). Squeezed side by side, the long text span collapsed to a near-zero-width column and, combined withoverflow-wrap: anywhere, wrapped character by character — rendering the text vertically. The available-update tag in the same cell was affected the same way.Linked issues
None
Review notes
CSS-only change scoped to the
@media (max-width: 959.98px)block inwwwroot/app.css. The Update State cell now usesflex-direction: column; align-items: flex-start, so each chip and text span gets the full card width and text wraps horizontally. Simple label/value cells (CPU, Memory, Instance) are unchanged. Desktop layout is unaffected.Follow-up work
None