Fix image grid sizing

src/components/ImageLarge.tsx

@@ -1,5 +1,5 @@
 import { IMAGE_LARGE_WIDTH } from '@/site';
-import ImageBlurFallback from './ImageBlurFallback';
+import ImageWithFallback from './ImageWithFallback';
 
 export default function ImageLarge({
   className,
@@ -21,7 +21,7 @@ export default function ImageLarge({
   priority?: boolean
 }) {
   return (
-    <ImageBlurFallback {...{
+    <ImageWithFallback {...{
       className,
       imgClassName,
       src,

src/components/ImageSmall.tsx

@@ -1,8 +1,9 @@
 import { IMAGE_SMALL_WIDTH } from '@/site';
-import ImageBlurFallback from './ImageBlurFallback';
+import ImageWithFallback from './ImageWithFallback';
 
 export default function ImageSmall({
   className,
+  imgClassName,
   src,
   alt,
   aspectRatio,
@@ -11,6 +12,7 @@ export default function ImageSmall({
   priority,
 }: {
   className?: string
+  imgClassName?: string
   src: string
   alt: string
   aspectRatio: number
@@ -19,8 +21,9 @@ export default function ImageSmall({
   priority?: boolean
 }) {
   return (
-    <ImageBlurFallback {...{
+    <ImageWithFallback {...{
       className,
+      imgClassName,
       src,
       alt,
       blurDataURL: blurData,

src/components/ImageTiny.tsx

@@ -1,8 +1,9 @@
 import { IMAGE_TINY_WIDTH } from '@/site';
-import ImageBlurFallback from './ImageBlurFallback';
+import ImageWithFallback from './ImageWithFallback';
 
 export default function ImageTiny({
   className,
+  imgClassName,
   src,
   alt,
   aspectRatio,
@@ -10,6 +11,7 @@ export default function ImageTiny({
   blurCompatibilityMode,
 }: {
   className?: string
+  imgClassName?: string
   src: string
   alt: string
   aspectRatio: number
@@ -17,8 +19,9 @@ export default function ImageTiny({
   blurCompatibilityMode?: boolean
 }) {
   return (
-    <ImageBlurFallback {...{
+    <ImageWithFallback {...{
       className,
+      imgClassName,
       src,
       alt,
       blurDataURL: blurData,

src/components/ImageWithFallback.tsx

@@ -7,7 +7,7 @@ import { clsx}  from 'clsx/lite';
 import Image, { ImageProps } from 'next/image';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-export default function ImageBlurFallback(props: ImageProps & {
+export default function ImageWithFallback(props: ImageProps & {
   blurCompatibilityLevel?: 'none' | 'low' | 'high'
   imgClassName?: string
 }) {

src/components/ShareButton.tsx

@@ -24,7 +24,7 @@ export default function ShareButton({
         '-mx-0.5 translate-x-0.5',
         'sm:mx-0 sm:translate-x-0',
       )}
-      icon={<TbPhotoShare size={17} />}
+      icon={<TbPhotoShare size={16} />}
       spinnerColor="dim"
       prefetch={prefetch}
       shouldScroll={shouldScroll}

src/photo/PhotoGrid.tsx

@@ -57,7 +57,7 @@ export default function PhotoGrid({
         <div
           key={photo.id}
           className={GRID_ASPECT_RATIO !== 0
-            ? 'aspect-square overflow-hidden'
+            ? 'flex relative overflow-hidden'
             : undefined}
           style={{
             ...GRID_ASPECT_RATIO !== 0 && {
@@ -65,17 +65,20 @@ export default function PhotoGrid({
             },
           }}
         >
-          <PhotoSmall {...{
-            photo,
-            tag,
-            camera,
-            simulation,
-            selected: photo.id === selectedPhoto?.id,
-            priority: photoPriority,
-            onVisible: index === photos.length - 1
-              ? onLastPhotoVisible
-              : undefined,
-          }} />
+          <PhotoSmall
+            className="flex w-full h-full"
+            {...{
+              photo,
+              tag,
+              camera,
+              simulation,
+              selected: photo.id === selectedPhoto?.id,
+              priority: photoPriority,
+              onVisible: index === photos.length - 1
+                ? onLastPhotoVisible
+                : undefined,
+            }}
+          />
         </div>).concat(additionalTile ?? [])}
       itemKeys={photos.map(photo => photo.id)
         .concat(additionalTile ? ['more'] : [])}

src/photo/PhotoSmall.tsx

@@ -19,6 +19,7 @@ export default function PhotoSmall({
   selected,
   priority,
   prefetch = SHOULD_PREFETCH_ALL_LINKS,
+  className,
   onVisible,
 }: {
   photo: Photo
@@ -28,6 +29,7 @@ export default function PhotoSmall({
   selected?: boolean
   priority?: boolean
   prefetch?: boolean
+  className?: string
   onVisible?: () => void
 }) {
   const ref = useRef<HTMLAnchorElement>(null);
@@ -39,9 +41,9 @@ export default function PhotoSmall({
       ref={ref}
       href={pathForPhoto(photo, tag, camera, simulation)}
       className={clsx(
-        'flex w-full h-full',
         'active:brightness-75',
         selected && 'brightness-50',
+        className,
       )}
       prefetch={prefetch}
     >
@@ -50,7 +52,8 @@ export default function PhotoSmall({
         aspectRatio={photo.aspectRatio}
         blurData={photo.blurData}
         blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
-        className="w-full"
+        className="flex object-cover w-full h-full"
+        imgClassName="object-cover w-full h-full"
         alt={altTextForPhoto(photo)}
         priority={priority}
       />

src/photo/form/PhotoForm.tsx

@@ -18,7 +18,7 @@ import { clsx } from 'clsx/lite';
 import { PATH_ADMIN_PHOTOS, PATH_ADMIN_UPLOADS } from '@/site/paths';
 import { toastSuccess, toastWarning } from '@/toast';
 import { getDimensionsFromSize } from '@/utility/size';
-import ImageBlurFallback from '@/components/ImageBlurFallback';
+import ImageWithFallback from '@/components/ImageWithFallback';
 import { TagsWithMeta, sortTagsObjectWithoutFavs } from '@/tag';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
 import { AiContent } from '../ai/useAiImageQueries';
@@ -234,7 +234,7 @@ export default function PhotoForm({
     <div className="space-y-8 max-w-[38rem] relative">
       <div className="flex gap-2">
         <div className="relative">
-          <ImageBlurFallback
+          <ImageWithFallback
             alt="Upload"
             src={url}
             className={clsx(