[SG-43144]: Tables in code excerpts should use headers for line numbers

client/codeintellify/src/testutils/sourcegraph/generate.ts

@@ -5,7 +5,7 @@ export function generateSourcegraphCodeTable(lines: string[]): string {
     const code = lines
         .map(
             (line, index) => `<tr>
-                <td class="line" data-line="${index + 1}"></td>
+                <th class="line" data-line="${index + 1}"></th>
                 <td class="code">${line}</td>
             </tr>`
         )

client/codeintellify/src/testutils/sourcegraph/styles.css

@@ -50,7 +50,7 @@
     border-collapse: collapse;
 }
 
-.sourcegraph-testcase code.code td.line {
+.sourcegraph-testcase code.code th.line {
     text-align: right;
     padding-left: 0.5rem;
     min-width: 2rem;
@@ -61,7 +61,7 @@
     vertical-align: top;
 }
 
-.sourcegraph-testcase td.line::before {
+.sourcegraph-testcase th.line::before {
     content: attr(data-line);
 }
 

client/search-ui/src/components/CodeExcerpt.module.scss

@@ -10,6 +10,7 @@
     :global(.line) {
         min-width: 1.5rem;
         text-align: right;
+        font-weight: inherit;
         user-select: none;
 
         &::before {

client/search-ui/src/components/CodeExcerpt.tsx

@@ -87,7 +87,7 @@ const domFunctions: DOMFunctions = {
         return row.cells[1]
     },
     getCodeElementFromLineNumber: (codeView: HTMLElement, line: number): HTMLTableCellElement | null => {
-        const lineElement = codeView.querySelector(`td[data-line="${line}"]`)
+        const lineElement = codeView.querySelector(`th[data-line="${line}"]`)
         if (!lineElement) {
             return null
         }
@@ -341,7 +341,7 @@ export const CodeExcerpt: React.FunctionComponent<Props> = ({
                         <tbody>
                             {range(startLine, endLine).map(index => (
                                 <tr key={index}>
-                                    <td className="line" data-line={index + 1} />
+                                    <th className="line" data-line={index + 1} />
                                     {/* create empty space to fill viewport (as if the blob content were already fetched, otherwise we'll overfetch) */}
                                     <td className="code"> </td>
                                 </tr>

client/search-ui/src/components/CommitSearchResultMatch.module.scss

@@ -32,7 +32,7 @@
     table {
         margin-bottom: 0 !important; /* Override docsite Markdown table CSS. A currently open PR removes that CSS and lets us remove this override. */
     }
-    td:global(.line) {
+    th:global(.line) {
         display: none;
     }
     td:global(.code) > span:first-child {