From 956b9e6079e44651cc1d30ad42e5a68ce555c517 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 10 Feb 2025 19:52:05 -0600
Subject: [PATCH] Fix border glitch when editing tags

---
 src/admin/AdminUploadsTable.tsx | 2 +-
 src/photo/PhotoLightbox.tsx     | 2 +-
 src/photo/PhotoSmall.tsx        | 2 +-
 tailwind.css                    | 7 ++-----
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/admin/AdminUploadsTable.tsx b/src/admin/AdminUploadsTable.tsx
index da7ea555..edeb0603 100644
--- a/src/admin/AdminUploadsTable.tsx
+++ b/src/admin/AdminUploadsTable.tsx
@@ -49,7 +49,7 @@ export default function AdminUploadsTable({
                   aspectRatio={3.0 / 2.0}
                   className={clsx(
                     'rounded-[3px] overflow-hidden',
-                    'border-subtle',
+                    'border-main',
                   )}
                 />
               </div>
diff --git a/src/photo/PhotoLightbox.tsx b/src/photo/PhotoLightbox.tsx
index 478ab1d8..7566f7f8 100644
--- a/src/photo/PhotoLightbox.tsx
+++ b/src/photo/PhotoLightbox.tsx
@@ -25,7 +25,7 @@ export default function PhotoLightbox({
 
   return (
     <div className={clsx(
-      'border dark:border-gray-800 p-1.5 lg:p-2 rounded-md',
+      'border-main p-1.5 lg:p-2 rounded-md',
       'bg-gray-50 dark:bg-gray-950',
     )}>
       <PhotoGrid
diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx
index 9e7143d4..2c5291c8 100644
--- a/src/photo/PhotoSmall.tsx
+++ b/src/photo/PhotoSmall.tsx
@@ -43,7 +43,7 @@ export default function PhotoSmall({
         selected && 'brightness-50',
         'min-w-[50px]',
         'rounded-[3px] overflow-hidden',
-        'border-subtle',
+        'border-main',
       )}
       prefetch={prefetch}
     >
diff --git a/tailwind.css b/tailwind.css
index efdcecde..d02e2a8b 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -121,11 +121,8 @@
 }
 /* Border */
 @utility border-main {
-  @apply border-gray-200 dark:border-gray-700
-}
-@utility border-subtle {
   @apply
-    border border-gray-200 dark:border-gray-800
+    border border-gray-200 dark:border-gray-700
 }
 /* Background */
 @utility bg-main {
@@ -304,7 +301,7 @@
 @layer components {
   .component-surface {
     @apply
-      bg-content border border-main
+      bg-content border-main
       rounded-lg
   }
 }