From 3769d88ebb01b9440e126f9734fc97349222dd52 Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Wed, 19 Aug 2026 13:32:15 +1000
Subject: [PATCH] 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 |  1 +
 packages/widgets/src/media-server/component.tsx        | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/widgets/src/media-server/component.module.css b/packages/widgets/src/media-server/component.module.css
index b5ca6ce77..ec08b16c0 100644
--- a/packages/widgets/src/media-server/component.module.css
+++ b/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 {
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index 86c1e8a0e..71c19c0bc 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/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>
       )}