From e34282338d35d46fc49544ffefe04abea4c82fd6 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 9 Feb 2026 10:44:07 -0800
Subject: [PATCH] adjust header styles

---
 .../item-detail-list/item-detail.module.css   |  2 +-
 .../item-detail-list/item-detail.tsx          | 25 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.module.css b/src/renderer/components/item-list/item-detail-list/item-detail.module.css
index c849f44c3..e70b9e4c6 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail.module.css
+++ b/src/renderer/components/item-list/item-detail-list/item-detail.module.css
@@ -28,7 +28,7 @@
     gap: var(--theme-spacing-md);
     padding: 0 var(--theme-spacing-md);
     font-size: var(--theme-font-size-sm);
-    color: var(--theme-colors-foreground-muted);
+    user-select: none;
     background-color: var(--theme-colors-background);
     border-bottom: 1px solid var(--theme-colors-border);
 }
diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.tsx b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
index 753659c71..18e7ebdb0 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail.tsx
+++ b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
@@ -610,6 +610,18 @@ interface DetailListHeaderProps {
     trackTableSize: 'compact' | 'default' | 'large';
 }
 
+const colTypeToAlignMap = {
+    center: 'center',
+    end: 'right',
+    start: 'left',
+};
+
+const colTypeToJustifyContentMap = {
+    center: 'center',
+    end: 'flex-end',
+    start: 'flex-start',
+};
+
 const DetailListHeader = memo(
     ({
         columnWidthPercents,
@@ -633,16 +645,17 @@ const DetailListHeader = memo(
                             const percent = columnWidthPercents[colIndex] ?? 0;
                             const { fixedWidth, isFixedColumn } = getTrackColumnFixed(col.id);
                             const isLastColumn = colIndex === trackColumns.length - 1;
+
                             const style: React.CSSProperties = {
                                 flex: isFixedColumn ? `0 0 ${fixedWidth}px` : `${percent} 1 0`,
+                                justifyContent: colTypeToJustifyContentMap[col.align],
                                 minWidth: isFixedColumn ? fixedWidth : 0,
-                                textAlign:
-                                    col.align === 'start'
-                                        ? 'left'
-                                        : col.align === 'end'
-                                          ? 'right'
-                                          : 'center',
+                                textAlign: colTypeToAlignMap[col.align] as
+                                    | 'center'
+                                    | 'left'
+                                    | 'right',
                             };
+
                             return (
                                 <div
                                     className={clsx(styles.trackHeaderCell, {