Handle longer tags in dialog title

Author: drankou

src/features/dashboard/templates/tags/components/index.ts

@@ -2,3 +2,4 @@ export { TagDialogBuildRow } from './tag-dialog-build-row'
 export { TagDialogFooter, type TagDialogStage } from './tag-dialog-footer'
 export { TagDialogStageTransition } from './tag-dialog-stage-transition'
 export { TagDialogSuccess } from './tag-dialog-success'
+export { TagDialogTitle } from './tag-dialog-title'

src/features/dashboard/templates/tags/components/tag-dialog-success.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '@/lib/utils/ui'
 import { CheckIcon } from '@/ui/primitives/icons'
+import { MiddleTruncate } from '@/ui/primitives/middle-truncate'
 
 interface TagDialogSuccessProps {
   tag: string
@@ -22,9 +23,15 @@ export function TagDialogSuccess({
       )}
     >
       <CheckIcon className="size-12 text-accent-positive-highlight" />
-      <p className="prose-headline-small uppercase text-fg">
-        <span className="font-mono">‘{tag}’</span>
-        <br />
+      <p className="prose-headline-small text-fg max-w-full uppercase">
+        <span
+          className="flex max-w-full items-baseline justify-center font-mono"
+          title={`‘${tag}’`}
+        >
+          <span className="shrink-0">‘</span>
+          <MiddleTruncate tail={10} text={tag} className="min-w-0" />
+          <span className="shrink-0">’</span>
+        </span>
         {message}
       </p>
     </div>

src/features/dashboard/templates/tags/components/tag-dialog-title.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { cn } from '@/lib/utils/ui'
+import { DialogTitle } from '@/ui/primitives/dialog'
+import { MiddleTruncate } from '@/ui/primitives/middle-truncate'
+
+interface TagDialogTitleProps {
+  prefix?: string
+  tag: string
+  suffix?: string
+  className?: string
+  srOnly?: boolean
+}
+
+export function TagDialogTitle({
+  prefix,
+  tag,
+  suffix,
+  className,
+  srOnly,
+}: TagDialogTitleProps) {
+  if (srOnly) {
+    return (
+      <DialogTitle className="sr-only">
+        {prefix}‘{tag}’{suffix}
+      </DialogTitle>
+    )
+  }
+
+  return (
+    <DialogTitle
+      className={cn('flex min-w-0 items-baseline pr-6', className)}
+      title={`${prefix ?? ''}‘${tag}’${suffix ?? ''}`}
+    >
+      {prefix ? (
+        <span className="shrink-0 whitespace-pre">{prefix}</span>
+      ) : null}
+      <span className="shrink-0">‘</span>
+      <MiddleTruncate text={tag} className="min-w-0 font-mono" />
+      <span className="shrink-0">’</span>
+      {suffix ? (
+        <span className="shrink-0 whitespace-pre">{suffix}</span>
+      ) : null}
+    </DialogTitle>
+  )
+}

src/features/dashboard/templates/tags/reassign-dialog.tsx

@@ -6,7 +6,6 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  DialogTitle,
 } from '@/ui/primitives/dialog'
 import { ArrowDivider } from './arrow-divider'
 import BuildPicker, { type BuildSelectionSource } from './build-picker'
@@ -15,6 +14,7 @@ import {
   TagDialogFooter,
   TagDialogStageTransition,
   TagDialogSuccess,
+  TagDialogTitle,
 } from './components'
 import { trackTagTableInteraction } from './table-config'
 import { useTagAssignmentMutation } from './use-tag-assignment-mutation'
@@ -138,11 +138,11 @@ function ReassignTagDialogBody({
   return (
     <TagDialogStageTransition phase={stage === 'success' ? 'success' : 'form'}>
       <DialogHeader>
-        <DialogTitle className={stage === 'success' ? 'sr-only' : undefined}>
-          {stage === 'success'
-            ? `‘${tag}’ reassigned successfully`
-            : `reassign ‘${tag}’`}
-        </DialogTitle>
+        {stage === 'success' ? (
+          <TagDialogTitle srOnly tag={tag} suffix=" reassigned successfully" />
+        ) : (
+          <TagDialogTitle prefix="reassign " tag={tag} />
+        )}
         <DialogDescription className="sr-only">
           {stage === 'success'
             ? `Tag ${tag} reassigned.`

src/features/dashboard/templates/tags/rollback-dialog.tsx

@@ -6,14 +6,14 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  DialogTitle,
 } from '@/ui/primitives/dialog'
 import { ArrowDivider } from './arrow-divider'
 import {
   TagDialogBuildRow,
   TagDialogFooter,
   TagDialogStageTransition,
   TagDialogSuccess,
+  TagDialogTitle,
 } from './components'
 import { trackTagTableInteraction } from './table-config'
 import { useTagAssignmentMutation } from './use-tag-assignment-mutation'
@@ -115,11 +115,16 @@ function RollbackTagDialogBody({
   return (
     <TagDialogStageTransition phase={stage === 'success' ? 'success' : 'form'}>
       <DialogHeader>
-        <DialogTitle className={stage === 'success' ? 'sr-only' : undefined}>
-          {stage === 'success'
-            ? `Rollback ‘${tag}’ succeeded`
-            : `Rollback ‘${tag}’`}
-        </DialogTitle>
+        {stage === 'success' ? (
+          <TagDialogTitle
+            srOnly
+            prefix="Rollback "
+            tag={tag}
+            suffix=" succeeded"
+          />
+        ) : (
+          <TagDialogTitle prefix="Rollback " tag={tag} />
+        )}
         <DialogDescription className="sr-only">
           {stage === 'success'
             ? `Tag ${tag} rolled back to build ${targetBuildId}.`