Refine photo overlay button

src/components/primitives/EntityLink.tsx

@@ -79,12 +79,16 @@ export default function EntityLink({
       className={clsx(
         'inline-flex items-center gap-2',
         'max-w-full overflow-hidden select-none',
+        '[&:has(.action:hover)_a>*>*>*]:underline',
         className,
       )}
     >
       <LinkWithStatus
         href={href}
-        className="peer inline-flex items-center gap-2 max-w-full truncate"
+        className={clsx(
+          'peer',
+          'inline-flex items-center gap-2 max-w-full truncate',
+        )}
         isLoading={isLoading}
         setIsLoading={setIsLoading}
       >
@@ -99,9 +103,8 @@ export default function EntityLink({
           className: clsx(
             classForContrast(),
             href && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
-            classNameIcon,
           ),
-          classNameIcon: 'text-dim',
+          classNameIcon: clsx('text-dim', classNameIcon),
           debug,
         }}>
           {badged
@@ -116,12 +119,17 @@ export default function EntityLink({
             </Badge>
             : <span className={clsx(
               truncate && 'inline-flex max-w-full *:truncate',
+              'decoration-dotted underline-offset-[4px] underline-main',
+              'decoration-gray-300 dark:decoration-gray-600',
             )}>
               {renderLabel}
             </span>}
         </LabeledIcon>
       </LinkWithStatus>
-      {accessory}
+      {accessory &&
+        <span className="action">
+          {accessory}
+        </span>}
       {!isLoading && hoverEntity !== undefined &&
         <span className="hidden peer-hover:inline text-dim">
           {hoverEntity}

src/components/primitives/LabeledIcon.tsx

@@ -28,10 +28,10 @@ export default function LabeledIcon({
   debug?: boolean,
 }) {
   return (
-    <span className={ clsx(
+    <span className={clsx(
       'inline-flex gap-x-1.5 md:gap-x-2 min-w-0',
-      className,
       debug && 'border border-green-500 m-[-1px]',
+      className,
     )}>
       {icon && type !== 'text-only' &&
         <Icon {...{

src/recipe/PhotoRecipeOverlayButton.tsx

@@ -29,7 +29,8 @@ export default function PhotoRecipeOverlayButton({
           'text-medium',
           'rounded-md shadow-none',
           'border-[1.5px] border-medium',
-          'p-0 size-5 inline-flex items-center justify-center',
+          'p-0 inline-flex items-center justify-center',
+          'size-[17px] md:size-5',
           'hover:bg-extra-dim active:bg-dim',
           className,
         )}>

tailwind.css

@@ -134,7 +134,7 @@
   @apply
     text-red-500 dark:text-red-400
 }
-/* Border */
+/* Rules */
 @utility border-main {
   @apply
     border border-gray-200 dark:border-gray-700