Halved the table cells' horizontal padding

web/src/components/OpportunityTable.tsx

@@ -32,8 +32,8 @@ interface Props {
 }
 
 const th =
-  'sticky top-0 z-10 whitespace-nowrap border-b border-line bg-surface p-3 text-left text-sm font-semibold text-muted';
-const td = 'border-b border-line-soft p-3 align-middle';
+  'sticky top-0 z-10 whitespace-nowrap border-b border-line bg-surface px-1.5 py-3 text-left text-sm font-semibold text-muted';
+const td = 'border-b border-line-soft px-1.5 py-3 align-middle';
 const badge = 'inline-block rounded px-2 py-0.5 text-sm font-semibold whitespace-nowrap';
 const sortIcon = { size: 14, strokeWidth: 2, 'aria-hidden': true } as const;
 const iconButton =
@@ -229,7 +229,7 @@ function OpportunityRow(props: RowProps): JSX.Element {
     >
       {/* The marks colour the leading edge of each row, one segment per
           mark, so a scan down the left side shows where every opportunity stands. */}
-      <td class={`${td} relative max-w-[520px] pl-[18px]`}>
+      <td class={`${td} relative max-w-[520px] pl-[9px]`}>
         <span class="absolute inset-y-0 left-0 flex w-1 flex-col" aria-hidden="true">
           <For each={marks()}>{(m) => <span class={`flex-1 ${MARK_BG[m]}`} />}</For>
         </span>