From 9c154a9eb9c4a753dae1177fe15ee84d788d6771 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Tue, 27 Jan 2026 15:25:38 -0500
Subject: [PATCH] change: table font size

---
 CHANGELOG.mdx                        |  4 ++++
 lib/components/Table/Table.Styles.ts |  6 +++---
 lib/components/Table/TableHeader.tsx | 12 ++++++------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
index 36cadd95f..372834ad1 100644
--- a/CHANGELOG.mdx
+++ b/CHANGELOG.mdx
@@ -17,6 +17,10 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+### Change
+
+- Font size and spacing for tables
+
 ## [0.26.3]
 
 ### Removed
diff --git a/lib/components/Table/Table.Styles.ts b/lib/components/Table/Table.Styles.ts
index 307e7722b..4983743cf 100644
--- a/lib/components/Table/Table.Styles.ts
+++ b/lib/components/Table/Table.Styles.ts
@@ -1,7 +1,7 @@
 export const styles = {
-  tableGlobal: `p-3 md:p-4 text-left align-text-top`,
-  tableHeaderRow: `font-semibold text-sm md:text-base`,
-  tableBodyRow: `text-sm md:text-base`,
+  tableGlobal: `p-2 md:py-3.5 md:px-2.5 text-left align-text-top`,
+  tableHeaderRow: `font-semibold text-sm`,
+  tableBodyRow: `text-sm`,
   borders: `border-b border-cu-black-100 last:border-none`,
   striped: `odd:bg-white even:bg-cu-black-25`,
 }
diff --git a/lib/components/Table/TableHeader.tsx b/lib/components/Table/TableHeader.tsx
index 5d6d5fab5..b9afdaf25 100644
--- a/lib/components/Table/TableHeader.tsx
+++ b/lib/components/Table/TableHeader.tsx
@@ -62,24 +62,24 @@ const TableHeader = ({ columns, noWordBreak, sortData }: TableHeaderProps) => {
             <div>{column.header}</div>
             {column.key === active && ascending ? (
               <button
-                className="block w-4 h-full ml-2"
+                className="block w-4 h-full ml-1"
                 aria-label={column?.sort?.sortable ? 'Sort ' + column.key + ' by ascending order' : undefined}
               >
-                <Icon name="chevron-down" size={16} color="#808080" className="inline-block" aria-hidden="true" />
+                <Icon name="chevron-down" size={12} color="#000000" className="inline-block" aria-hidden="true" />
               </button>
             ) : column.key === active && !ascending ? (
               <button
-                className="block w-4 h-full ml-2"
+                className="block w-4 h-full ml-1"
                 aria-label={column?.sort?.sortable ? 'Sort ' + column.key + ' by descending order' : undefined}
               >
-                <Icon name="chevron-up" size={16} color="#808080" className="inline-block" aria-hidden="true" />
+                <Icon name="chevron-up" size={12} color="#000000" className="inline-block" aria-hidden="true" />
               </button>
             ) : (
               <button
-                className="block w-4 h-full ml-2"
+                className="block w-4 h-full ml-1"
                 aria-label={column?.sort?.sortable ? 'Sort by ' + column.key : undefined}
               >
-                <Icon name="chevron-up-down" size={16} color="#808080" className="inline-block" aria-hidden="true" />
+                <Icon name="chevron-up-down" size={12} color="#000000" className="inline-block" aria-hidden="true" />
               </button>
             )}
           </div>