alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make workspace project name visible on mobile and desktop cards

Browse Source 
- Move the project name below the workspace title row so it reads as a
  distinct line with a project icon.
- Move the status badge into the title row next to the workspace name,
  preventing it from crowding the project label.
- Add .workspace-title-row flex styles and update .workspace-project-name
  to display inline-flex with a brand-colored project icon.

Quality gates: npm run typecheck, npm run lint clean,
npm test -- --run 87 passed.
This commit is contained in:
Developer
2026-06-13 19:53:43 +00:00
parent 86360661e9
commit 4913cc7297
21 changed files with 300 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/styles/.pi-map.index.md
+1 -1
View File
@@ -2,7 +2,7 @@
dir: apps/web/src/styles
## role
Houses the complete CSS styling system for a web application, including design tokens, global styles, syntax highlighting themes, and utility classes.
Provides the complete visual design system and styling foundation for a web application, including themes, utilities, and component-specific styles.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
apps/web/src/styles/.pi-map.md
+2 -2
View File
@@ -4,14 +4,14 @@ dir: apps/web/src/styles
index: apps/web/src/styles/.pi-map.index.md
## role
Houses the complete CSS styling system for a web application, including design tokens, global styles, syntax highlighting themes, and utility classes.
Provides the complete visual design system and styling foundation for a web application, including themes, utilities, and component-specific styles.
## files
- global.css | Defines global CSS styles for a web application shell layout, navigation, cards, forms, dialogs, settings pages, and responsive design patterns. | dep: CSS custom properties (CSS variables: --border, --panel, --brand, --muted, --ink, --bg, --danger, --success, --warning, --font-size-xs, --font-size-sm, --space-2, --space-3, --space-4, --space-5)
- syntax-highlight.css | Stylesheet for a syntax highlighting component with toolbar, line numbers, code display, and Prism.js theme integration | dep: Prism.js
- tokens.css | Defines a comprehensive CSS design token system with light/dark themes, spacing scales, breakpoints, and fluid typography for a web application.
- utilities.css | Provides a comprehensive responsive CSS utility system with terminal-specific styling, mobile adaptations, and component patterns for a web application. | dep: CSS custom properties (var(--space-*), var(--border), var(--bg), var(--text), var(--brand), var(--muted), var(--success), var(--danger), var(--danger-light)), xterm.js (terminal integration)
## arch
Token-driven CSS architecture using CSS custom properties for themeable light/dark modes, utility-first responsive patterns, and component-scoped stylesheets with Prism.js integration for syntax highlighting.
Token-based CSS architecture using CSS custom properties for light/dark theming, with layered stylesheets separating tokens, global styles, utilities, and component-specific styling, supporting responsive and fluid design patterns.
## tags
var(, space, global, css, web, application, syntax, defines
## symbols
apps/web/src/styles/pages/.pi-map.index.md
+1 -1
View File
@@ -2,7 +2,7 @@
dir: apps/web/src/styles/pages
## role
Package containing page-specific CSS stylesheets for individual web application views
Contains page-specific CSS stylesheets for individual application views in the web frontend, providing scoped styling for distinct feature areas.
## parent
index: apps/web/src/styles/.pi-map.index.md
map: apps/web/src/styles/.pi-map.md
apps/web/src/styles/pages/.pi-map.md
+4 -4
View File
@@ -4,18 +4,18 @@ dir: apps/web/src/styles/pages
index: apps/web/src/styles/pages/.pi-map.index.md
## role
Package containing page-specific CSS stylesheets for individual web application views
Contains page-specific CSS stylesheets for individual application views in the web frontend, providing scoped styling for distinct feature areas.
## files
- git-history.css | Stylesheet for a Git history visualization page with commit list, branch selector, and detail panel layout | dep: CSS custom properties (var(--border), var(--panel), var(--ink), var(--brand), var(--muted))
- projects.css | Stylesheet for a projects page UI featuring expandable project toggles, repository listings, workspace grids, and repository creation radio controls. | dep: CSS custom properties (variables)
- sessions.css | Stylesheet for session management UI components including cards, dropdowns, forms, and responsive mobile layouts. | dep: CSS custom properties/variables (var(--border), var(--panel), var(--text), var(--space-*), var(--danger), var(--color-border))
- ssh-keys.css | Styles a responsive SSH key list component that stacks vertically on mobile and switches to horizontal layout on larger screens | dep: CSS custom properties (var(--space-3), var(--space-2), var(--space-4), var(--bg), var(--border))
- workspace-detail.css | Stylesheet for a workspace detail page with tabbed interface including files, git, tools, and settings views, plus a workspace creation form | dep: CSS custom properties (variables for colors, spacing, typography)
- workspaces.css | Styles a workspaces page with responsive card grid layout, status badges, and instance chips | dep: CSS custom properties (var(--space-*), var(--border), var(--brand), var(--panel), var(--ink), var(--muted), var(--bg), var(--success), var(--warning), var(--danger), var(--font-size-*))
- workspaces.css | Stylesheet for a workspaces management page featuring responsive grid layout, workspace cards with status badges, instance chips, and mobile adaptations. | dep: CSS custom properties (design tokens: --space-*, --border, --panel, --brand, --ink, --muted, --bg, --success, --warning, --danger, --font-size-*)
## arch
Modular CSS architecture with dedicated stylesheets per page domain, featuring responsive design patterns, component-based styling, and mobile-first breakpoint strategies
Modular CSS architecture with page-level style separation, responsive design patterns using media queries for mobile adaptation, and component-scoped styling organized by feature domain rather than shared component library.
## tags
var(, workspace, space, stylesheet, git, page, detail, history
var(, workspace, stylesheet, space, git, page, detail, history
## symbols
-
## workflows
apps/web/src/styles/pages/workspaces.css
+23 -10
View File
@@ -40,7 +40,6 @@
.workspace-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
@@ -63,15 +62,11 @@
min-width: 0;
}
.workspace-project-name {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.workspace-title-row {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.workspace-name {
@@ -82,6 +77,24 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.workspace-project-name {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.workspace-project-name .icon {
color: var(--brand);
}
/* Body: meta row + instance chips */