Truncate long names

[tzador]

Summary by CodeRabbit

• Style
  • Standardized max width for name/secret/key columns (approx. 30 characters) across pipelines, runs, snapshots, secrets, service accounts, and component runs tab.
  • Enabled graceful truncation with ellipsis to prevent overflow and improve readability.
  • Refined cell layouts for better alignment and responsiveness; links, status indicators, and Copy buttons now align consistently.
  • Preserved secondary details (IDs/descriptions) beneath primary titles.
  • Minor spacing cleanup in secrets value cell.

[coderabbitai]

Walkthrough

Adds meta.className "max-w-[30ch]" to multiple "name"/key columns and refactors their cell DOM to flex-based layouts with min-w-0, flex-1, and truncate classes. CopyButton and tooltips retained, with minor spacing fix. No data logic changes; updates are presentational across pipelines, runs, secrets, service accounts, and stack components.

Changes

Cohort / File(s)	Summary
Pipelines: Deployments column layout src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx	Add meta.className "max-w-[30ch]" to name column; restructure cell to flex column with inner flex row; move CopyButton inside row; apply truncate to title.
Pipelines: Snapshots column layout src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx	Add meta.className "max-w-[30ch]" to name column; switch to full-width flex column; inner row uses min-w-0 flex-1; truncate name text.
Pipelines: Shared columns src/app/pipelines/_components/columns.tsx	Add meta.className "max-w-[30ch]" to name column; rework name cell to flex column; Link gets min-w-0; truncate name span.
Runs: Name column src/app/runs/columns.tsx	Add meta.className "max-w-[30ch]" to name column; refactor to flex column with min-w-0 flex-1; truncate name; DOM structure updated.
Secrets: Detail view columns src/app/settings/secrets/[id]/columns.tsx	Add meta.className "max-w-[30ch]" to key column; refactor to single flex container with min-w-0/flex-1; truncate key; remove extra space in className.
Secrets: List columns src/app/settings/secrets/columns.tsx	Add meta.className "max-w-[30ch]" to secret column; switch to flex w-full flex-col; inner row uses flex-1 and min-w-0; truncate Link text.
Service Accounts: Detail columns src/app/settings/service-accounts/[service-account-id]/columns.tsx	Add meta.className "max-w-[30ch]" to name column; widen containers (w-full); inner row min-w-0 flex-1; truncate name; keep description line.
Service Accounts: List columns src/app/settings/service-accounts/columns.tsx	Constrain width via meta.className "max-w-[30ch]"; adjust layout to flex-1/min-w-0; truncate name; minor class tweaks.
Stack Components: Runs tab src/components/stack-components/component-sheet/runs-tab/columns.tsx	Add meta.className "max-w-[30ch]" to name column; convert to two-level flex layout; Link with min-w-0; truncate name; keep status tooltip and copy button.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10–15 minutes

Possibly related PRs

• Serving Followup #846 — Similar refactors to deployments and snapshots column renderers, adjusting name/ID display and CopyButton/layout in the same UI areas.

Suggested reviewers

• Cahllagerfeld

Poem

I nibble on bytes with whiskers keen,
Snipping long names to a tidy sheen.
Flexing rows where links align—
Ellipses twinkle, trim and fine.
Copy, click, and off we hop—
Thirty ch wide, then full-stop! 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “Truncate long names” succinctly captures the main change of adding truncation and width constraints to name columns across the application, clearly reflecting the pull request’s focus on handling long names in the UI without introducing unrelated details.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/816-long-names-rendering

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/app/settings/service-accounts/columns.tsx (1)

54-63: LGTM: Truncation layout correctly implemented.

The flex layout with min-w-0 and flex-1 on the Link container correctly enables text truncation. The truncate class on the Link will apply ellipsis when the service account name exceeds the column width.

Optional: Consider adding a title attribute to the Link for better UX:

 <Link
   className="truncate text-text-md font-semibold text-theme-text-primary"
   to={routes.settings.service_accounts.detail(row.original.id)}
+  title={row.original.name}
 >
   {row.original.name}
 </Link>

This would show the full name in a native browser tooltip on hover when truncated.

src/components/stack-components/component-sheet/runs-tab/columns.tsx (1)

37-46: Truncation implementation is correct. Consider adding a tooltip for truncated names.

The flex layout with min-w-0 on the Link (lines 39-42) and truncate on the span (line 43-45) correctly enables text truncation. The structure properly propagates width constraints from the table cell through the flex containers to the text element.

However, when names exceed 30 characters, users have no visual way to view the full text. Consider wrapping the name Link with a Tooltip component (similar to the status tooltip at lines 47-54) to show the full name on hover, improving discoverability compared to relying solely on the CopyButton.

Example implementation:

 <div className="flex flex-1 items-center gap-1">
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
         <Link
           to={routes.projects.runs.detail(id)}
           className="flex min-w-0 flex-1 items-center gap-1"
         >
           <span className="truncate text-text-md font-semibold text-theme-text-primary">
             {name}
           </span>
         </Link>
+      </TooltipTrigger>
+      <TooltipContent>{name}</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
   <TooltipProvider>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d15108c and 236d183.

📒 Files selected for processing (9)

• src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx (1 hunks)
• src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx (1 hunks)
• src/app/pipelines/_components/columns.tsx (1 hunks)
• src/app/runs/columns.tsx (2 hunks)
• src/app/settings/secrets/[id]/columns.tsx (3 hunks)
• src/app/settings/secrets/columns.tsx (1 hunks)
• src/app/settings/service-accounts/[service-account-id]/columns.tsx (1 hunks)
• src/app/settings/service-accounts/columns.tsx (2 hunks)
• src/components/stack-components/component-sheet/runs-tab/columns.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (6)

src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx (1)

src/router/routes.tsx (1)

• routes (1-86)

src/components/stack-components/component-sheet/runs-tab/columns.tsx (1)

src/router/routes.tsx (1)

• routes (1-86)

src/app/pipelines/_components/columns.tsx (2)

src/components/ExecutionStatus.tsx (1)

• getExecutionStatusColor (13-34)

src/router/routes.tsx (1)

• routes (1-86)

src/app/settings/secrets/columns.tsx (1)

src/lib/code-snippets.ts (1)

• getSecretSnippet (22-27)

src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx (1)

src/router/routes.tsx (1)

• routes (1-86)

src/app/runs/columns.tsx (1)

src/router/routes.tsx (1)

• routes (1-86)

🔇 Additional comments (17)

src/app/settings/service-accounts/columns.tsx (1)

42-44: LGTM: Consistent width constraint applied.

The max-w-[30ch] constraint appropriately limits column width to prevent layout issues with long names.

src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx (2)

55-57: LGTM: Width constraint applied.

---

64-86: LGTM: Proper truncation structure.

The nested flex layout correctly implements truncation with min-w-0 on the Link and truncate on the name span.

src/app/pipelines/_components/columns.tsx (2)

55-57: LGTM: Consistent width constraint.

---

64-96: LGTM: Truncation implemented correctly with preserved functionality.

The layout correctly implements truncation while maintaining the ExecutionStatusIcon tooltip and CopyButton functionality.

src/app/runs/columns.tsx (2)

57-59: LGTM: Width constraint applied.

---

69-94: LGTM: Correct truncation with preserved interactivity.

The flex layout properly enables truncation while maintaining the tooltip and copy functionality.

src/app/settings/service-accounts/[service-account-id]/columns.tsx (2)

44-46: LGTM: Width constraint applied.

---

51-60: LGTM: Truncation correctly applied.

The flex layout with min-w-0 and truncate on the name container correctly implements text truncation for API key names.

src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx (2)

21-23: LGTM: Width constraint applied.

---

30-52: LGTM: Correct truncation implementation.

The flex layout with min-w-0 and truncate properly implements text truncation for deployment names.

src/app/settings/secrets/columns.tsx (2)

18-20: LGTM: Width constraint applied.

---

27-49: LGTM: Truncation correctly implemented with preserved tooltip.

The flex layout properly enables truncation while maintaining the SecretTooltip functionality.

src/app/settings/secrets/[id]/columns.tsx (3)

14-14: LGTM: Formatting fix.

Removed extra space in className.

---

30-32: LGTM: Width constraint applied.

---

43-52: LGTM: Truncation correctly implemented.

The flex layout with min-w-0 and truncate properly implements text truncation for secret keys while preserving the SecretTooltip functionality.

src/components/stack-components/component-sheet/runs-tab/columns.tsx (1)

25-27: LGTM! Max-width constraint applied correctly.

The max-w-[30ch] constraint is a reasonable approach to prevent long names from breaking the table layout. The constraint is applied consistently across similar columns per the PR context.

[Cahllagerfeld]

Question for @znegrin: with this change, all the icons are pushed ot the very right, which on one hand aligns them, but on the other makes them a bit floating around. Wdyt?

[znegrin]

@Cahllagerfeld, I would keep them aligned with the pipeline name, as showing them there would miss the context and consistency.

[Cahllagerfeld]

• I think we need to add some shrink-prevention to the icons, as they seem to disappear if there is a truncate now. (See Screenshot)

I dont know so much about the the ch unit in css to clearly say if its a good practice for truncates or not, but I think you know 👍

Do you have all the cases from the ticket covered with the current changes? It always tackles the first column of the tables

[znegrin]

• I think we need to add some shrink-prevention to the icons, as they seem to disappear if there is a truncate now. (See Screenshot)

I think the icons should just be fixed with the same size always, as in the designs, and not change or disappear if the text varies, as it happens now. I also imagine it is even easier to have a fixed-size icon that always uses the 24px regular icon size.