Composable text interfaces over graphical abstractions #914
Conversation
No wasted vertical space on status pills. Faster scrolling to reach deep service lists.
There was a problem hiding this comment.
Pull request overview
This pull request implements a significant UI/UX overhaul that shifts the application's design philosophy toward a more compact, text-oriented interface. The changes reduce visual decorative elements (rounded corners) and font sizes across the entire application while expanding terminal visibility and adjusting layout proportions.
Changes:
- Standardized all border-radius values to 2px throughout the application, replacing varied rounded corners (ranging from 6px to 50rem)
- Reduced font sizes across all UI elements, with many reduced to 9-11px (below recommended accessibility minimums)
- Abbreviated status names from descriptive words to single letters (I, A, E) and dramatically increased terminal dimensions
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 18 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/styles/vars.scss | Standardized border-radius variables from rounded (0.5rem, 50rem) to sharp corners (2px) |
| frontend/src/styles/main.scss | Reduced heading sizes, pagination text, inline code, and standardized all border-radius to 2px |
| frontend/src/pages/Setup.vue | Reduced title font size from 28px to 21px |
| frontend/src/pages/Settings.vue | Reduced footer and header font sizes to 10px and 20px respectively, changed border-radius to 2px |
| frontend/src/pages/DashboardHome.vue | Reduced multiple font sizes including badge (9px), table text (11px), and numeric displays (23px) |
| frontend/src/pages/Dashboard.vue | Narrowed sidebar from col-md-4/xl-3 to col-md-2/xl-2, expanded main content area, and set container to 100% width |
| frontend/src/pages/Compose.vue | Moved terminal section before containers, changed terminal height from 200px fixed to auto with 400px min-height, reduced editor font to 11px |
| frontend/src/layouts/Layout.vue | Reduced navigation and dropdown font sizes to 10-11px, badge font to 8px, standardized border-radius to 2px |
| frontend/src/components/settings/GlobalEnv.vue | Reduced editor font size from 14px to 11px |
| frontend/src/components/settings/About.vue | Reduced version link font sizes using relative units (0.6em, 0.67em) |
| frontend/src/components/Uptime.vue | Dramatically reduced badge width from 62px to 20px |
| frontend/src/components/Terminal.vue | Reduced terminal font size from 14px to 11px |
| frontend/src/components/StackListItem.vue | Reduced endpoint font size to 9px, changed border-radius to 2px |
| frontend/src/components/StackList.vue | Standardized list header border-radius to 2px |
| frontend/src/components/NetworkInput.vue | Reduced delete link font size to 10px |
| frontend/src/components/Container.vue | Reduced container image font size using relative units (0.6rem) |
| common/util-common.ts | Abbreviated status names to single letters (inactive→I, active→A, exited→E), increased terminal dimensions (rows: 10→15, 20→40; cols: 58→120) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <style lang="scss" scoped> | ||
| .container-fluid { | ||
| width: 98%; | ||
| width: 100%; |
There was a problem hiding this comment.
The container width has been changed from 98% to 100%, which removes the intentional margin/padding. This may cause content to touch the viewport edges, potentially impacting visual comfort and readability, especially on larger screens where some whitespace is typically desirable.
| width: 100%; | |
| width: 98%; | |
| margin: 0 auto; |
| padding: .2em .4em; | ||
| margin: 0; | ||
| font-size: 85%; | ||
| font-size: 64%; |
There was a problem hiding this comment.
The font size for inline code elements has been reduced from 85% to 64%, which may significantly impact readability. Code snippets are typically meant to be easily readable, and this reduction could make them difficult to read, especially on lower resolution displays or for users with visual impairments.
| font-size: 64%; | |
| font-size: 85%; |
| footer { | ||
| color: #aaa; | ||
| font-size: 13px; | ||
| font-size: 10px; |
There was a problem hiding this comment.
The footer font size has been reduced from 13px to 10px, which is below accessibility guidelines. Footer text often contains important legal, copyright, or navigation information that should remain readable.
| font-size: 10px; | |
| font-size: 13px; |
| .editor-box { | ||
| font-family: 'JetBrains Mono', monospace; | ||
| font-size: 14px; | ||
| font-size: 11px; |
There was a problem hiding this comment.
The font size has been reduced from 14px to 11px for code editor content. Code editors require good readability for developers to write and debug code effectively, and reducing the font size may lead to eye strain and errors.
| font-size: 11px; | |
| font-size: 14px; |
| } | ||
| .endpoint { | ||
| font-size: 12px; | ||
| font-size: 9px; |
There was a problem hiding this comment.
The endpoint font size has been reduced from 12px to 9px, which is extremely small and below accessibility guidelines. This information is important for identifying the endpoint context and should remain legible.
| font-size: 9px; | |
| font-size: 12px; |
| return "I"; | ||
| case CREATED_STACK: | ||
| return "inactive"; | ||
| return "I"; | ||
| case RUNNING: | ||
| return "active"; | ||
| return "A"; | ||
| case EXITED: | ||
| return "exited"; | ||
| return "E"; |
There was a problem hiding this comment.
The status names have been abbreviated to single letters (I, A, E). While this aligns with the "text interfaces" theme, single-letter abbreviations are ambiguous and reduce clarity. Users may not immediately understand what "I", "A", and "E" represent without additional context or documentation. Consider whether this change improves or hinders user experience, especially for new users or in accessibility contexts where screen readers would announce single letters.
| min-width: 20px; | ||
|
|
||
| } | ||
|
|
||
| .fixed-width { | ||
| width: 62px; | ||
| width: 20px; |
There was a problem hiding this comment.
The badge width has been reduced from 62px to 20px, which is a dramatic reduction that may cause text truncation or overflow issues. The extremely narrow width may not accommodate even short status labels or icons properly, leading to UI rendering problems.
| min-height: 400px; | ||
| } | ||
|
|
There was a problem hiding this comment.
The terminal height has been changed from a fixed "200px" to "auto" with a "min-height: 400px". While this provides more flexibility, the significant increase in minimum height (from 200px to 400px) may cause layout issues on smaller screens or when multiple terminals are visible. Consider whether this large minimum height is appropriate for all use cases.
| min-height: 400px; | |
| } | |
| min-height: 200px; | |
| } | |
| @media (min-height: 700px) { | |
| .terminal { | |
| min-height: 400px; | |
| } | |
| } |
|
|
||
| .VuePagination__count { | ||
| font-size: 13px; | ||
| font-size: 10px; |
There was a problem hiding this comment.
The font size has been reduced from 13px to 10px, which is below the generally recommended minimum of 12px for body text and may cause readability issues for many users, particularly those with visual impairments or on higher resolution displays.
| font-size: 10px; | |
| font-size: 12px; |
|
|
||
| this.terminal = new Terminal({ | ||
| fontSize: 14, | ||
| fontSize: 11, |
There was a problem hiding this comment.
The terminal font size has been reduced from 14px to 11px. Terminal output needs to be clearly readable as it often contains important system information, error messages, and logs that developers rely on for debugging and monitoring.
| fontSize: 11, | |
| fontSize: 14, |
1 participant
This PR raises awareness of terminal output and docker log through enlarged terminal window and improved cascading style sheets.