fix: keep slash highlight in sync in fullscreen

src/components/PromptInput/PromptInputFooterSuggestions.tsx

@@ -58,15 +58,13 @@ const SuggestionItemRow = memo(function SuggestionItemRow({
 }): ReactNode {
   const columns = useTerminalSize().columns
   const selectionPrefix = isSelected ? SELECTED_PREFIX : UNSELECTED_PREFIX
+  const rowBackgroundColor: keyof Theme | undefined = isSelected
+    ? 'suggestion'
+    : undefined
+  const textColor: keyof Theme | undefined = isSelected ? 'inverseText' : undefined
 
   if (isUnifiedSuggestion(item.id)) {
     const icon = getIcon(item.id)
-    const textColor: keyof Theme | undefined = isSelected
-      ? 'inverseText'
-      : undefined
-    const backgroundColor: keyof Theme | undefined = isSelected
-      ? 'suggestion'
-      : undefined
     const dimColor = !isSelected
     const isFile = item.id.startsWith('file-')
     const isMcpResource = item.id.startsWith('mcp-resource-')
@@ -113,15 +111,11 @@ const SuggestionItemRow = memo(function SuggestionItemRow({
     }
 
     return (
-      <Text
+      <Box width="100%" opaque={true} backgroundColor={rowBackgroundColor}>
-        color={textColor}
+        <Text color={textColor} dimColor={dimColor} bold={isSelected} wrap="truncate">
-        backgroundColor={backgroundColor}
-        dimColor={dimColor}
-        bold={isSelected}
-        wrap="truncate"
-      >
           {lineContent}
         </Text>
+      </Box>
     )
   }
 
@@ -130,10 +124,7 @@ const SuggestionItemRow = memo(function SuggestionItemRow({
     maxColumnWidth ?? stringWidth(item.displayText) + 5,
     maxNameWidth,
   )
-  const textColor = isSelected ? 'inverseText' : item.color
+  const displayTextColor = isSelected ? 'inverseText' : item.color
-  const backgroundColor: keyof Theme | undefined = isSelected
-    ? 'suggestion'
-    : undefined
   const shouldDim = !isSelected
 
   let displayText = item.displayText
@@ -156,32 +147,21 @@ const SuggestionItemRow = memo(function SuggestionItemRow({
     : ''
 
   return (
+    <Box width="100%" opaque={true} backgroundColor={rowBackgroundColor}>
       <Text wrap="truncate">
-      <Text
+        <Text color={displayTextColor} dimColor={shouldDim} bold={isSelected}>
-        color={textColor}
-        backgroundColor={backgroundColor}
-        dimColor={shouldDim}
-        bold={isSelected}
-      >
           {paddedDisplayText}
         </Text>
         {tagText ? (
-        <Text
+          <Text color={textColor} dimColor={!isSelected}>
-          color={isSelected ? 'inverseText' : undefined}
-          backgroundColor={backgroundColor}
-          dimColor={!isSelected}
-        >
             {tagText}
           </Text>
         ) : null}
-      <Text
+        <Text color={textColor} dimColor={!isSelected}>
-        color={isSelected ? 'inverseText' : undefined}
-        backgroundColor={backgroundColor}
-        dimColor={!isSelected}
-      >
           {truncatedDescription}
         </Text>
       </Text>
+    </Box>
   )
 })
 
@@ -226,7 +206,7 @@ export function PromptInputFooterSuggestions({
     >
       {visibleItems.map(item => (
         <SuggestionItemRow
-          key={item.id}
+          key={`${item.id}:${item.id === suggestions[selectedSuggestion]?.id ? 'selected' : 'idle'}`}
           item={item}
           maxColumnWidth={maxColumnWidth}
           isSelected={item.id === suggestions[selectedSuggestion]?.id}