From 8fa9a908135db64a1e32ad8ac18b784480c346da Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 14 Nov 2025 02:29:39 -0800
Subject: [PATCH] add dynamic card selection style based on gap

---
 src/renderer/components/item-card/item-card.module.css |  2 +-
 .../item-list/item-grid-list/item-grid-list.module.css | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/item-card/item-card.module.css b/src/renderer/components/item-card/item-card.module.css
index 9a5728c93..a956771b8 100644
--- a/src/renderer/components/item-card/item-card.module.css
+++ b/src/renderer/components/item-card/item-card.module.css
@@ -12,7 +12,7 @@
 
 .container.selected {
     outline: 2px solid var(--theme-colors-primary);
-    outline-offset: 2px;
+    outline-offset: var(--card-gap, var(--theme-spacing-md));
 }
 
 .container.dragging {
diff --git a/src/renderer/components/item-list/item-grid-list/item-grid-list.module.css b/src/renderer/components/item-list/item-grid-list/item-grid-list.module.css
index e735d4481..c901f7520 100644
--- a/src/renderer/components/item-list/item-grid-list/item-grid-list.module.css
+++ b/src/renderer/components/item-list/item-grid-list/item-grid-list.module.css
@@ -31,20 +31,30 @@
 
 .item-row.gap-xs {
     padding: var(--theme-spacing-xs);
+
+    --card-gap: 2px;
 }
 
 .item-row.gap-sm {
     padding: var(--theme-spacing-sm);
+
+    --card-gap: var(--theme-spacing-xs);
 }
 
 .item-row.gap-md {
     padding: var(--theme-spacing-md);
+
+    --card-gap: var(--theme-spacing-sm);
 }
 
 .item-row.gap-lg {
     padding: var(--theme-spacing-lg);
+
+    --card-gap: var(--theme-spacing-sm);
 }
 
 .item-row.gap-xl {
     padding: var(--theme-spacing-xl);
+
+    --card-gap: var(--theme-spacing-sm);
 }