Skip to content

fix(web): capitalize project name display across all five sites #2301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
neogenix wants to merge 13 commits into from
Closed

fix(web): capitalize project name display across all five sites #2301

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f8297ee
fix(web): preserve project title casing on design files page
neogenix May 19, 2026
a11687f
test(web): behavior-level coverage for project title capitalization
neogenix May 19, 2026
4738ce9
test(web): remove duplicate CSS-only spec, fix CWD-dependent path
neogenix May 19, 2026
7380104
docs(css): document brand-name trade-off in capitalize rule
neogenix May 19, 2026
630bd99
feat(web): apply capitalize to all five project-name display sites
neogenix May 19, 2026
8107094
test(e2e): project name capitalize across five display sites
neogenix May 19, 2026
8b59bbe
fix(web): scope text-transform capitalize to project names only
neogenix May 19, 2026
eea1a1c
test(e2e): flip nav-tab capitalize assertion to negative after CSS sc…
neogenix May 19, 2026
06c51fd
fix(web): apply capitalize to kanban project-card names
neogenix May 19, 2026
af448d0
fix(web): remove orphaned hiddenTabCount overflow chip after all-tabs…
May 20, 2026
bf61d02
fix(web): move workspace-tabs-actions outside scrollable strip
May 21, 2026
58fa202
test(e2e): drop locale-sensitive ASCII-capital assertions from nav-ta…
May 22, 2026
17c9d41
test(web): add useI18n to i18n mock in ProjectView title-casing spec
May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/components/DesignsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -785,7 +785,7 @@ export function DesignsTab({
<ProjectTag category={projectCategory(p)} />
)}
</div>
<div className="design-card-name" title={p.name}>
<div className="design-card-name design-card-name--project" title={p.name}>
Copy link
Copy Markdown
Contributor

@mrcfps mrcfps May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch scoping the grid-card selector. One remaining path in this same component still bypasses the new rule: the kanban branch renders project names with .design-kanban-card-name at DesignsTab.tsx:716-720, and apps/web/src/index.css:9063-9069 still has no text-transform for that selector. That means a project called acme studio is fixed in grid view but flips back to lowercase as soon as the user switches the Designs tab to kanban, which is the same consistency bug this PR is trying to remove. Please apply the same project-name casing treatment to the kanban card title path as well, and extend the Vitest/Playwright coverage to exercise the kanban view so this view-mode regression is caught next time.

🔁 Powered by Looper · runner=reviewer · agent=opencode · An autonomous AI dev team for your GitHub repos.

{p.name}
</div>
<div className="design-card-meta">
Expand Down
172 changes: 86 additions & 86 deletions apps/web/src/components/WorkspaceTabsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,7 @@ export function WorkspaceTabsBar({ route, projects }: Props) {
<span className="workspace-tab__icon" aria-hidden>
<Icon name={display.icon} size={14} />
</span>
<span className="workspace-tab__label">{display.title}</span>
<span className={`workspace-tab__label${tab.kind === 'project' ? ' workspace-tab__label--project' : ''}`}>{display.title}</span>
</button>
<button
type="button"
Expand All @@ -497,92 +497,92 @@ export function WorkspaceTabsBar({ route, projects }: Props) {
})}
</div>
<div className="workspace-tabs-actions" ref={menuRef}>
<button
type="button"
className="workspace-tabs-new-btn"
onClick={createNewTab}
title="New tab"
aria-label="New tab"
>
<Icon name="plus" size={14} />
</button>
<button
type="button"
className={`workspace-tabs-icon-btn${tabsMenuOpen ? ' is-active' : ''}`}
onClick={() => setTabsMenuOpen((open) => !open)}
title="Search tabs"
aria-label="Search tabs"
aria-haspopup="dialog"
aria-expanded={tabsMenuOpen}
>
<Icon name="search" size={15} />
</button>
{tabsMenuOpen && typeof document !== 'undefined'
? createPortal(
<div
className="workspace-tabs-popover"
role="dialog"
aria-label="Search tabs"
ref={popoverRef}
>
<div className="workspace-tabs-search">
<Icon name="search" size={14} />
<input
ref={searchInputRef}
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search tabs"
aria-label="Search tabs"
/>
</div>
<div className="workspace-tabs-popover__section">
<span>Open tabs</span>
<span>{state.tabs.length}</span>
</div>
<div className="workspace-tabs-list" role="listbox" aria-label="Open tabs">
{filteredTabs.length > 0 ? (
filteredTabs.map((display) => {
const active = display.id === state.activeTabId;
return (
<div
key={display.id}
className={`workspace-tabs-list__item${active ? ' is-active' : ''}`}
role="option"
aria-selected={active}
<button
type="button"
className="workspace-tabs-new-btn"
onClick={createNewTab}
title="New tab"
aria-label="New tab"
>
<Icon name="plus" size={14} />
</button>
<button
type="button"
className={`workspace-tabs-icon-btn${tabsMenuOpen ? ' is-active' : ''}`}
onClick={() => setTabsMenuOpen((open) => !open)}
title="Search tabs"
aria-label="Search tabs"
aria-haspopup="dialog"
aria-expanded={tabsMenuOpen}
>
<Icon name="search" size={15} />
</button>
{tabsMenuOpen && typeof document !== 'undefined'
? createPortal(
<div
className="workspace-tabs-popover"
role="dialog"
aria-label="Search tabs"
ref={popoverRef}
>
<div className="workspace-tabs-search">
<Icon name="search" size={14} />
<input
ref={searchInputRef}
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search tabs"
aria-label="Search tabs"
/>
</div>
<div className="workspace-tabs-popover__section">
<span>Open tabs</span>
<span>{state.tabs.length}</span>
</div>
<div className="workspace-tabs-list" role="listbox" aria-label="Open tabs">
{filteredTabs.length > 0 ? (
filteredTabs.map((display) => {
const active = display.id === state.activeTabId;
return (
<div
key={display.id}
className={`workspace-tabs-list__item${active ? ' is-active' : ''}`}
role="option"
aria-selected={active}
>
<button
type="button"
className="workspace-tabs-list__main"
onClick={() => openTab(display.tab)}
>
<button
type="button"
className="workspace-tabs-list__main"
onClick={() => openTab(display.tab)}
>
<span className="workspace-tabs-list__icon" aria-hidden>
<Icon name={display.icon} size={15} />
</span>
<span className="workspace-tabs-list__text">
<span className="workspace-tabs-list__title">{display.title}</span>
<span className="workspace-tabs-list__meta">{display.meta}</span>
</span>
</button>
<button
type="button"
className="workspace-tabs-list__close"
onClick={() => closeTab(display.id)}
title={t('common.close')}
aria-label={t('common.close')}
>
<Icon name="close" size={11} />
</button>
</div>
);
})
) : (
<div className="workspace-tabs-empty">No tabs found</div>
)}
</div>
</div>,
document.body,
)
: null}
<span className="workspace-tabs-list__icon" aria-hidden>
<Icon name={display.icon} size={15} />
</span>
<span className="workspace-tabs-list__text">
<span className={`workspace-tabs-list__title${display.tab.kind === 'project' ? ' workspace-tabs-list__title--project' : ''}`}>{display.title}</span>
<span className="workspace-tabs-list__meta">{display.meta}</span>
</span>
</button>
<button
type="button"
className="workspace-tabs-list__close"
onClick={() => closeTab(display.id)}
title={t('common.close')}
aria-label={t('common.close')}
>
<Icon name="close" size={11} />
</button>
</div>
);
})
) : (
<div className="workspace-tabs-empty">No tabs found</div>
)}
</div>
</div>,
document.body,
)
: null}
</div>
{hoverPreview && typeof document !== 'undefined' && !tabsMenuOpen
? createPortal(
Expand Down
28 changes: 28 additions & 0 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -684,6 +684,12 @@ code {
font-weight: 520;
letter-spacing: 0;
}
.workspace-tab__label--project {
/* Same display-layer capitalize as .app-project-title .title — see that rule for the
brand-name trade-off note. Scoped to project tabs only; Home/Marketplace/etc. use
localized strings that must not be auto-capitalized. */
text-transform: capitalize;
Comment on lines +688 to +691
Copy link
Copy Markdown
Contributor

@mrcfps mrcfps May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These shared tab-label selectors also style non-project tabs. WorkspaceTabsBar.displayTabFor() feeds the same elements entry and marketplace titles like entry.navDesignSystems and workspaceTabs.marketplace, so this rule will retitle those localized labels too (Design systems → Design Systems, etc.). That broadens the fix beyond project names and can produce incorrect copy in locales that intentionally do not capitalize every word. Please scope the transform to project tabs only—for example by adding a project-only modifier class when tab.kind === project and moving text-transform onto that class instead of the shared tab-label selectors.

🔁 Powered by Looper · runner=reviewer · agent=opencode · An autonomous AI dev team for your GitHub repos.

}
.workspace-tab__close {
width: 18px;
height: 18px;
Expand Down Expand Up @@ -854,6 +860,12 @@ code {
font-size: 12.5px;
font-weight: 600;
}
.workspace-tabs-list__title--project {
/* Same display-layer capitalize as .app-project-title .title — see that rule for the
brand-name trade-off note. Scoped to project tabs only; Home/Marketplace/etc. use
localized strings that must not be auto-capitalized. */
text-transform: capitalize;
}
.workspace-tabs-list__meta {
color: var(--text-muted);
font-size: 11px;
Expand Down Expand Up @@ -1215,6 +1227,12 @@ code {
text-overflow: ellipsis;
flex: 0 1 auto;
min-width: 0;
/* Display-layer fix: project names are stored as typed (often all-lowercase when
auto-generated), so capitalize the first letter of each word for readability.
Trade-off: brand names with intentional mid-word capitalisation (e.g. "iPhone")
will render incorrectly as "IPhone". A storage-layer fix (preserving input casing
on create/rename) would make this rule redundant and should remove it when landed. */
text-transform: capitalize;
}
.app-project-title .meta {
color: var(--text-muted);
Expand Down Expand Up @@ -8985,6 +9003,12 @@ button.connector-action.is-loading {
text-overflow: ellipsis;
color: var(--text-strong);
}
.design-card-name--project {
/* Same display-layer capitalize as .app-project-title .title — see that rule for the
brand-name trade-off note. Scoped to project cards only; live-artifact titles may
have intentional casing (brand names, version strings). */
text-transform: capitalize;
Comment on lines +9007 to +9010
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Scope capitalization to project cards only

This rule changes .design-card-name globally, but that class is used for both project names and live-artifact titles in DesignsTab (the live-artifact card renders artifact.title with the same class). That means a fix intended for project-name display also rewrites unrelated artifact titles, so mixed-case or intentionally styled artifact names are shown incorrectly. Please scope this transform to project-name rendering only (or split the class) so artifact titles keep user-provided casing.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Contributor Author

@neogenix neogenix May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this is a bad thing. I'm open to changing it, but we might want to either split out the class, or apply the fix universally.

Comment on lines +9007 to +9010
Copy link
Copy Markdown
Contributor

@mrcfps mrcfps May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.design-card-name is shared by both project cards and live-artifact cards in DesignsTab—the live-artifact branch renders artifact.title with this same class. With text-transform here, arbitrary artifact titles now get rewritten too, so values with intentional casing (for example brand names or version strings) display incorrectly even though this PR is meant to touch project names only. Please split the project-name styling from the shared card-title class, or add a project-only class on the project-card path and leave artifact titles on the existing selector without text-transform.

🔁 Powered by Looper · runner=reviewer · agent=opencode · An autonomous AI dev team for your GitHub repos.

Copy link
Copy Markdown
Contributor Author

@neogenix neogenix May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm debating how best to respond to the feedback. The fix should probably be applied to all of them, but the feedback is correct given the naming / usage / etc... I'll noodle on it, and likely focus on the individual fix.

}
.design-card-meta {
display: flex;
align-items: baseline;
Expand Down Expand Up @@ -9505,6 +9529,10 @@ button.connector-action.is-loading {
text-overflow: ellipsis;
/* Reserve room for the absolutely-positioned close button. */
padding-right: 20px;
/* Same display-layer capitalize as .app-project-title .title — see that rule for the
brand-name trade-off rationale. Selector is project-name-only (kanban renders only
project cards; live artifacts use .design-card-name in the grid view). */
text-transform: capitalize;
}
.design-kanban-card-meta {
font-size: 12px;
Expand Down
3 changes: 3 additions & 0 deletions apps/web/src/styles/home/recent-projects.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,9 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Same display-layer capitalize as .app-project-title .title — see that rule for the
brand-name trade-off note. */
text-transform: capitalize;
}
.recent-projects__card-time {
font-size: 11.5px;
Expand Down
Loading
Loading