Add tooltip to recipe button on desktop

src/admin/ExifCaptureButton.tsx

@@ -21,7 +21,7 @@ export default function ExifCaptureButton({
   return (
     <Tooltip
       content="Refresh form with EXIF data from original file"
-      supportMobile={false}
+      desktopOnly
     >
       <LoaderButton
         isLoading={isLoading}

src/admin/PhotoSyncButton.tsx

@@ -36,7 +36,7 @@ export default function PhotoSyncButton({
   return (
     <Tooltip
       content="Regenerate photo data"
-      supportMobile={false}
+      desktopOnly
     >
       <LoaderButton
         className={className}

src/components/primitives/TooltipPrimitive.tsx

@@ -12,14 +12,14 @@ export default function TooltipPrimitive({
   className,
   classNameTrigger: classNameTriggerProp,
   sideOffset = 10,
-  supportMobile = true,
+  desktopOnly,
   children,
 }: {
   content?: ReactNode
   className?: string
   classNameTrigger?: string
   sideOffset?: number
-  supportMobile?: boolean
+  desktopOnly?: boolean
   children: ReactNode
 }) {
   const refTrigger = useRef<HTMLButtonElement>(null);
@@ -29,7 +29,7 @@ export default function TooltipPrimitive({
 
   const supportsHover = useSupportsHover();
 
-  const includeButton = supportMobile && !supportsHover;
+  const includeButton = !desktopOnly && !supportsHover;
 
   useClickInsideOutside({
     htmlElements: [refTrigger, refContent],
@@ -39,19 +39,19 @@ export default function TooltipPrimitive({
   });
 
   const classNameTrigger = clsx(
-    'link cursor-default inline-block',
+    'cursor-default inline-block',
     classNameTriggerProp,
   );
 
   return (
     <Tooltip.Provider delayDuration={100}>
-      <Tooltip.Root open={!supportsHover ? isOpen : undefined}>
+      <Tooltip.Root open={includeButton ? isOpen : undefined}>
         <Tooltip.Trigger asChild>
           {includeButton
             ? <button
               ref={refTrigger}
               onClick={() => setIsOpen(!isOpen)}
-              className={classNameTrigger}
+              className={clsx('link', classNameTrigger)}
             >
               {children}
             </button>

src/photo/PhotoLarge.tsx

@@ -27,6 +27,7 @@ import {
   ALLOW_PUBLIC_DOWNLOADS,
   SHOW_TAKEN_AT_TIME,
   SHOW_RECIPES,
+  SHOW_FILM_SIMULATIONS,
 } from '@/app/config';
 import AdminPhotoMenuClient from '@/admin/AdminPhotoMenuClient';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
@@ -325,16 +326,28 @@ export default function PhotoLarge({
                   <li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
                 </ul>
                 {(
-                  (showSimulation && photo.filmSimulation) ||
-                  (SHOW_RECIPES && showRecipe && photo.recipeData)
+                  (
+                    SHOW_FILM_SIMULATIONS &&
+                    showSimulation &&
+                    photo.filmSimulation
+                  ) ||
+                  (SHOW_RECIPES && photo.recipeData)
                 ) &&
                   <div className="flex items-center gap-2 *:w-auto">
-                    {showSimulation && photo.filmSimulation &&
+                    {(
+                      SHOW_FILM_SIMULATIONS &&
+                      showSimulation &&
+                      photo.filmSimulation
+                    ) &&
                       <PhotoFilmSimulation
                         simulation={photo.filmSimulation}
                         prefetch={prefetchRelatedLinks}
                       />}
                     {SHOW_RECIPES && photo.recipeData &&
+                      <Tooltip
+                        content="Fujifilm Recipe"
+                        desktopOnly
+                      >
                         <button
                           ref={refRecipeButton}
                           title="Fujifilm Recipe"
@@ -342,7 +355,8 @@ export default function PhotoLarge({
                           className={clsx(
                             'text-medium',
                             'border-medium rounded-md',
-                          'px-[4px] py-[2.5px] my-[-2.5px]',
+                            'px-[4px] py-[2.5px] my-[-3px]',
+                            'translate-y-[2px]',
                             'hover:bg-dim active:bg-main',
                           )}>
                           {shouldShowRecipe
@@ -351,7 +365,8 @@ export default function PhotoLarge({
                               className="translate-x-[0.5px]"
                               size={15}
                             />}
-                      </button>} 
+                        </button>
+                      </Tooltip>} 
                   </div>}
               </>}
             <div className={clsx(