Dimmed the column header labels and added a bottom border under the sticky header, so it reads as its own band instead of the same weight as the row data

packages/widgets/src/media-server/component.module.css

@@ -31,6 +31,7 @@
 
 .tableViewport :global(th) {
   background-color: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .sortButton {

packages/widgets/src/media-server/component.tsx

@@ -131,13 +131,17 @@ function StreamTableHeader({
     <Table.Th aria-sort={active ? (sort.descending ? "descending" : "ascending") : "none"}>
       {sortable ? (
         <UnstyledButton className={classes.sortButton} onClick={() => onSort(column)}>
-          <Text component="span" size="xs" fw={600} truncate>
+          <Text component="span" size="xs" fw={600} c="dimmed" style={{ letterSpacing: "0.02em" }} truncate>
             {label}
           </Text>
-          <SortIcon size="var(--mantine-font-size-xs)" aria-hidden />
+          <SortIcon
+            size="var(--mantine-font-size-xs)"
+            aria-hidden
+            color={active ? undefined : "var(--mantine-color-dimmed)"}
+          />
         </UnstyledButton>
       ) : (
-        <Text size="xs" fw={600} truncate>
+        <Text size="xs" fw={600} c="dimmed" style={{ letterSpacing: "0.02em" }} truncate>
           {label}
         </Text>
       )}