Fix photo tag line breaks

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}

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>,
         ]

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}

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

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">

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>
   );
 }