From 8acfd3bf6d898be3a67dc3b60a1d5033c6078060 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 14 Jul 2026 16:16:09 -0700
Subject: [PATCH] fix row column/border styles when album group enabled

---
 .../item-table-list/columns/album-group-column.tsx     |  9 +++++----
 .../item-table-list/item-table-list-column.tsx         | 10 +++++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/item-list/item-table-list/columns/album-group-column.tsx b/src/renderer/components/item-list/item-table-list/columns/album-group-column.tsx
index aecbcdb02..3d5845c80 100644
--- a/src/renderer/components/item-list/item-table-list/columns/album-group-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/album-group-column.tsx
@@ -51,9 +51,10 @@ export const AlbumGroupColumn = (props: ItemTableListInnerColumn) => {
     }
 
     if (!isFirstInGroup) {
-        // For non-first rows, add border-bottom on the last row of the group
-        const needsBorder =
-            props.enableHorizontalBorders &&
+        // No vertical border. Bottom border only on the last row of the group so
+        // mid-group lines don't cut through overflowing artwork.
+        const needsBottomBorder =
+            !!props.enableHorizontalBorders &&
             isLastInAlbumGroup(
                 props.rowIndex,
                 props.getRowItem,
@@ -65,7 +66,7 @@ export const AlbumGroupColumn = (props: ItemTableListInnerColumn) => {
             <div
                 style={{
                     ...props.style,
-                    ...(needsBorder
+                    ...(needsBottomBorder
                         ? { borderBottom: '1px solid var(--theme-colors-border)' }
                         : {}),
                     // When the cover is enlarged it overflows down from the
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
index 3df04e6f5..6e94b3f09 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
@@ -629,7 +629,9 @@ function showHorizontalBorderFor(props: ItemTableListInnerColumn, isLastRow: boo
     if (!props.enableHorizontalBorders || !props.enableHeader || props.rowIndex <= 0) {
         return false;
     }
-    if (isAlbumGroupingActive(props.columns)) {
+    // Album group uses group top/bottom edges only (no mid-group lines that would
+    // cut through artwork). Other columns keep per-row borders.
+    if (props.type === TableColumn.ALBUM_GROUP) {
         return isLastInAlbumGroup(
             props.rowIndex,
             props.getRowItem,
@@ -747,7 +749,8 @@ export const TableColumnTextContainer = (
     };
 
     const showHorizontalBorder = showHorizontalBorderFor(props, isLastRow);
-    const showVerticalBorder = !!props.enableVerticalBorders && !isLastColumn;
+    const showVerticalBorder =
+        !!props.enableVerticalBorders && !isLastColumn && props.type !== TableColumn.ALBUM_GROUP;
 
     const cell = (
         <div
@@ -913,7 +916,8 @@ export const TableColumnContainer = (
     };
 
     const showHorizontalBorder = showHorizontalBorderFor(props, isLastRow);
-    const showVerticalBorder = !!props.enableVerticalBorders && !isLastColumn;
+    const showVerticalBorder =
+        !!props.enableVerticalBorders && !isLastColumn && props.type !== TableColumn.ALBUM_GROUP;
 
     const cell = (
         <div