diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx index 238d05a3f3..3ed74a578e 100644 --- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx +++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx @@ -1202,10 +1202,6 @@ const WorkspaceItem: React.FC = ({ data-testid="nav-workspace-remote-meta" data-remote-status={remoteMeta.status} > - ) : null} + diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss index 314c24bf95..ea0c31a0aa 100644 --- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss +++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss @@ -482,7 +482,7 @@ gap: 5px; min-width: 0; max-width: 100%; - padding: 0 6px 0 5px; + padding: 0 5px 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--element-bg-medium) 62%, transparent); color: var(--color-text-secondary); @@ -505,7 +505,9 @@ } &__workspace-item-remote-name { + flex: 0 1 auto; min-width: 0; + max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts index 1fa445147a..e77d16bada 100644 --- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts +++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts @@ -10,6 +10,13 @@ function readWorkspaceListStylesheet(): string { return stylesheet.replace(/\r\n/g, '\n'); } +function readWorkspaceItemSource(): string { + return readFileSync( + fileURLToPath(new URL('./WorkspaceItem.tsx', import.meta.url)), + 'utf8', + ).replace(/\r\n/g, '\n'); +} + function extractBlock(stylesheet: string, selector: string): string { const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); const match = stylesheet.match(new RegExp(`${escapedSelector}\\s*\\{(?[\\s\\S]*?)\\n\\s*\\}`)); @@ -90,4 +97,24 @@ describe('WorkspaceListSection layout styles', () => { expect(block).toContain('height: 20px;'); } }); + + it('keeps remote connection metadata inside the sidebar with the status dot on the right', () => { + const stylesheet = readWorkspaceListStylesheet(); + const remoteName = extractBlock(stylesheet, '&__workspace-item-remote-name'); + + expect(remoteName).toContain('flex: 0 1 auto;'); + expect(remoteName).toContain('max-width: 160px;'); + expect(remoteName).toContain('overflow: hidden;'); + expect(remoteName).toContain('text-overflow: ellipsis;'); + + const source = readWorkspaceItemSource(); + const remoteMetaStart = source.indexOf('data-testid="nav-workspace-remote-meta"'); + const remoteMetaEnd = source.indexOf('', remoteMetaStart); + const remoteMetaMarkup = source.slice(remoteMetaStart, remoteMetaEnd); + + expect(remoteMetaStart).toBeGreaterThanOrEqual(0); + expect(remoteMetaEnd).toBeGreaterThan(remoteMetaStart); + expect(remoteMetaMarkup.indexOf('workspace-item-remote-name')) + .toBeLessThan(remoteMetaMarkup.indexOf('workspace-item-status-dot')); + }); });