fix line numbers in symbol search

BloopAI · Jan 9, 2024 · dd9fda1 · dd9fda1
1 parent ef67b94
commit dd9fda1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/client/src/components/CodeBlock/Code/CodeContainer.tsx b/client/src/components/CodeBlock/Code/CodeContainer.tsx
@@ -85,6 +85,7 @@ const CodeContainer = ({
           }
           showLineNumbers={showLines}
           symbols={getSymbols(lineStart + lineNumber)}
+          isSymbolSearch={!!symbols?.length}
           lineHidden={
             onlySymbolLines && !getSymbols(lineStart + lineNumber).length
           }

diff --git a/client/src/components/CodeBlock/Code/CodeLine.tsx b/client/src/components/CodeBlock/Code/CodeLine.tsx
@@ -41,6 +41,7 @@ type Props = {
   leftHighlight?: boolean;
   removePaddings?: boolean;
   hoveredBackground?: boolean;
+  isSymbolSearch?: boolean;
 };
 
 const CodeLine = ({
@@ -66,6 +67,7 @@ const CodeLine = ({
   removePaddings,
   hoveredBackground,
   lineNumbersDiff,
+  isSymbolSearch,
 }: Props) => {
   const codeRef = useRef<HTMLTableCellElement>(null);
 
@@ -183,12 +185,14 @@ const CodeLine = ({
         onMouseSelectEnd?.(lineNumber, index);
       }}
     >
-      {symbols?.length ? (
+      {isSymbolSearch ? (
         <div
-          className={`peer text-center text-purple ${lineHidden ? 'p-0' : ''}`}
+          className={`peer text-center text-purple ${
+            lineHidden ? 'p-0' : ''
+          } min-w-[20px]`}
         >
           <span className="flex flex-row gap-1">
-            {symbols.length > 1 ? (
+            {symbols?.length && symbols.length > 1 ? (
               <Tooltip
                 text={
                   <div>
@@ -207,11 +211,11 @@ const CodeLine = ({
               >
                 <SymbolIcon type="multiple" />
               </Tooltip>
-            ) : (
+            ) : symbols?.length ? (
               <Tooltip text={symbols[0]} placement="top">
                 <SymbolIcon type={symbols[0]} />
               </Tooltip>
-            )}
+            ) : null}
           </span>
         </div>
       ) : null}

diff --git a/client/src/components/CodeBlock/Search/index.tsx b/client/src/components/CodeBlock/Search/index.tsx
@@ -131,13 +131,13 @@ const CodeBlockSearch = ({
                     <pre className={`bg-bg-sub my-0 px-2`}>
                       <table>
                         <tbody>
-                          <tr className="token-line">
+                          <tr className="token-line border-l-[3px] border-transparent">
                             <td
                               className={`${
                                 snippet.symbols?.length ? 'w-5' : 'w-0 px-1'
                               }  text-center`}
                             />
-                            <td className="text-label-muted min-w-6 text-right text-l select-none">
+                            <td className="text-label-muted min-w-[27px] text-right text-l select-none">
                               ..
                             </td>
                           </tr>