From 5453f113309011241ed6e45ebf93ac19e5ce24d9 Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <jakob.wennberg@arcim.io>
Date: Thu, 13 Aug 2026 11:19:35 +0200
Subject: [PATCH] fix(design): keep sortable table headers uppercase (#1558)

The sortable headers on /bookkeeping and /invoices wrap their label in a
button, and preflight's text-transform: none on buttons swallowed the
uppercase from TH_CLASS, so sorted lists showed sentence-case heads next
to every other table's uppercase idiom. Re-apply uppercase on the sort
control itself.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 app/(dashboard)/invoices/page.tsx           | 4 +++-
 components/bookkeeping/JournalEntryList.tsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/(dashboard)/invoices/page.tsx b/app/(dashboard)/invoices/page.tsx
index 376b1a84..8baf9caf 100644
--- a/app/(dashboard)/invoices/page.tsx
+++ b/app/(dashboard)/invoices/page.tsx
@@ -168,10 +168,12 @@ function SortableHeader({
       className={cn(TH_CLASS, className)}
       aria-sort={direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none'}
     >
+      {/* Preflight sets text-transform: none on buttons, which would drop the
+          TH_CLASS uppercase idiom inside the sort control. */}
       <button
         type="button"
         className={cn(
-          '-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          '-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           align === 'right' && 'ml-auto justify-end',
         )}
         aria-label={sortLabel}
diff --git a/components/bookkeeping/JournalEntryList.tsx b/components/bookkeeping/JournalEntryList.tsx
index b4df34ef..75190922 100644
--- a/components/bookkeeping/JournalEntryList.tsx
+++ b/components/bookkeeping/JournalEntryList.tsx
@@ -150,10 +150,12 @@ function SortableHeader({
       className={cn(TH_CLASS, className)}
       aria-sort={active ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'}
     >
+      {/* Preflight sets text-transform: none on buttons, which would drop the
+          TH_CLASS uppercase idiom inside the sort control. */}
       <button
         type="button"
         className={cn(
-          '-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          '-mx-2 inline-flex min-h-10 items-center gap-1 rounded-sm px-2 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           align === 'right' && 'ml-auto justify-end',
         )}
         aria-label={sortLabel}