From 446194787814fecd8ad5ba90f1778242a3b9acb8 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 23 Oct 2023 13:10:14 -0500
Subject: [PATCH] Fix photo tag line breaks

---
 src/camera/PhotoCamera.tsx     | 7 +++++--
 src/components/HeaderList.tsx  | 6 ++++--
 src/photo/PhotoGridSidebar.tsx | 7 +++++--
 src/site/globals.css           | 4 ++++
 src/tag/PhotoTag.tsx           | 2 +-
 src/tag/PhotoTags.tsx          | 7 +++----
 6 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx
index 7af41ffb..aebb79e5 100644
--- a/src/camera/PhotoCamera.tsx
+++ b/src/camera/PhotoCamera.tsx
@@ -27,7 +27,10 @@ export default function PhotoCamera({
         )}
       >
         {showIcon && <>
-          <IoMdCamera size={13} className="translate-y-[-0.25px]" />
+          <IoMdCamera
+            size={13}
+            className="text-icon translate-y-[-0.25px]"
+          />
           &nbsp;
         </>}
         {!(hideApple && camera.make?.toLowerCase() === 'apple') &&
@@ -35,7 +38,7 @@ export default function PhotoCamera({
             {camera.make?.toLowerCase() === 'apple'
               ? <AiFillApple
                 title="Apple"
-                className="translate-y-[-0.5px]"
+                className="text-icon translate-y-[-0.5px]"
                 size={14}
               />
               : camera.make}
diff --git a/src/components/HeaderList.tsx b/src/components/HeaderList.tsx
index 5566e15b..f75bdff7 100644
--- a/src/components/HeaderList.tsx
+++ b/src/components/HeaderList.tsx
@@ -24,8 +24,10 @@ export default function HeaderList({
             'flex items-center mb-0.5',
             'uppercase',
           )}>
-            {icon}
-            {icon && title && <>&nbsp;</>}
+            {icon &&
+              <span className="w-[17px]">
+                {icon}
+              </span>}
             {title}
           </div>,
         ]
diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index e9bd7a26..28156bc7 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/src/photo/PhotoGridSidebar.tsx
@@ -20,7 +20,7 @@ export default function PhotoGridSidebar({
     <>
       {tags.length > 0 && <HeaderList
         title='Tags'
-        icon={<FaTag size={12} />}
+        icon={<FaTag size={12} className="text-icon" />}
         items={tags.map(({ tag, count }) =>
           <PhotoTag
             key={tag}
@@ -31,7 +31,10 @@ export default function PhotoGridSidebar({
       />}
       {cameras.length > 0 && <HeaderList
         title="Cameras"
-        icon={<IoMdCamera size={13} />}
+        icon={<IoMdCamera
+          size={13}
+          className="text-icon translate-y-[-0.25px]"
+        />}
         items={cameras.map(({ cameraKey, camera, count }) =>
           <PhotoCamera
             key={cameraKey}
diff --git a/src/site/globals.css b/src/site/globals.css
index a0db0332..5cfbf843 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -110,6 +110,10 @@
     @apply
       text-gray-500 dark:text-gray-400
   }
+  .text-icon {
+    @apply
+      text-gray-800 dark:text-gray-200
+  }
   .text-error {
     @apply
       text-red-500 dark:text-red-400
diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx
index 20a24548..b86eacd6 100644
--- a/src/tag/PhotoTag.tsx
+++ b/src/tag/PhotoTag.tsx
@@ -27,7 +27,7 @@ export default function PhotoTag({
             size={11}
             className={cc(
               'flex-shrink-0',
-              'text-gray-700 dark:text-gray-300 translate-y-[0.5px]',
+              'text-icon translate-y-[0.5px]',
             )}
           />}
         <span className="uppercase">
diff --git a/src/tag/PhotoTags.tsx b/src/tag/PhotoTags.tsx
index 02864fcc..81bc3aec 100644
--- a/src/tag/PhotoTags.tsx
+++ b/src/tag/PhotoTags.tsx
@@ -8,10 +8,9 @@ export default function PhotoTags({
   return (
     <div>
       {tags.map(tag =>
-        <PhotoTag
-          key={tag}
-          tag={tag}
-        />)}
+        <div key={tag}>
+          <PhotoTag tag={tag} />
+        </div>)}
     </div>
   );
 }