fix: center the gallery image

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/ui/gallery/Gallery.tsx

@@ -143,16 +143,19 @@ export const Gallery: FC<GalleryProps> = (props) => {
     <div
       className={clsx('w-full', 'relative', styles['root'])}
       ref={ref}
+      onTouchMove={handleCancelAutoplay}
       onWheel={handleCancelAutoplay}
-      onTouchStart={handleCancelAutoplay}
     >
       <div
         className={clsx(
           'w-full overflow-auto whitespace-nowrap',
           styles['container'],
         )}
-        ref={setContainerRef}
+        onTouchStart={handleCancelAutoplay}
         onScroll={handleOnScroll}
+        ref={setContainerRef}
+        onTouchMove={handleCancelAutoplay}
+        onWheel={handleCancelAutoplay}
       >
         {images.map((image) => {
           return <GalleryItem key={image.url} image={image} />
@@ -198,7 +201,7 @@ const GalleryItem: FC<{
   return (
     <div
       style={childStyle}
-      className={clsx(styles['child'], 'inline-block')}
+      className={clsx(styles['child'], 'inline-block self-center')}
       key={`${image.url}-${image.name || ''}`}
     >
       <FixedZoomedImage
@@ -210,3 +213,5 @@ const GalleryItem: FC<{
     </div>
   )
 })
+
+GalleryItem.displayName = 'GalleryItem'