fix(dependencies): keep the staged chip visible beside a long name

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/PrerequisitesTable/PrerequisitesTable.scss

@@ -15,9 +15,18 @@
   background: var(--color-surface-muted);
 }
 
-// Held for a change request: still listed, but on its way out.
-.prerequisite-row--staged-remove .btn-link {
+// A button only shrinks below its text with a min width.
+.prerequisite-name > .btn {
+  min-width: 0;
+}
+
+// Held for a change request: still listed, but on its way out. On the inner
+// span, as .btn-link clears text-decoration with !important.
+.prerequisite-row--staged-remove .prerequisite-name .btn-link {
   color: var(--color-text-secondary);
+}
+
+.prerequisite-row--staged-remove .prerequisite-name__text {
   text-decoration: line-through;
 }
 

frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/PrerequisitesTable/PrerequisitesTable.tsx

@@ -121,25 +121,32 @@ const PrerequisitesTable: FC<PrerequisitesTableProps> = ({
           onClick={() => onSelect(edge)}
           pending={isRemoving === edge.prerequisite.id}
         >
-          <TableCell className='font-weight-medium text-truncate'>
-            <Button
-              theme='text'
-              onClick={(e: MouseEvent) => {
-                e.stopPropagation()
-                onSelect(edge)
-              }}
-            >
-              {edge.prerequisite.name}
-            </Button>
-            {!!staged && (
-              <Chip
-                size='xs'
-                variant={staged === 'add' ? 'accent' : 'neutral'}
-                className='ms-2'
+          <TableCell className='font-weight-medium'>
+            {/* The name gives way to the chip, so a long name cannot hide
+                what is about to happen to it. */}
+            <div className='prerequisite-name d-flex align-items-center gap-2'>
+              <Button
+                theme='text'
+                className='text-truncate'
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation()
+                  onSelect(edge)
+                }}
               >
-                {staged === 'add' ? 'Staged: add' : 'Staged: remove'}
-              </Chip>
-            )}
+                <span className='prerequisite-name__text'>
+                  {edge.prerequisite.name}
+                </span>
+              </Button>
+              {!!staged && (
+                <Chip
+                  size='xs'
+                  variant={staged === 'add' ? 'accent' : 'neutral'}
+                  className='flex-shrink-0'
+                >
+                  {staged === 'add' ? 'Staged: add' : 'Staged: remove'}
+                </Chip>
+              )}
+            </div>
           </TableCell>
           <TableCell>
             <StateToggle isEnabled={isEnabled} />