Refactor(gallery)/move pagination button below pictures

CHANGELOG.md

@@ -11,9 +11,9 @@
 ### 🎨 - Designendringer
 
 ## Neste versjon
+🎨 - **Desingendring**. Sentrerte og flyttet "Last in mer" knappen under bildene i galleri.  
 
 ## Versjon 2024.15.10
-
 - ✨ **Betalinger**. Man kan nå se hvem på deltagerlisten som har betalt for arrangementet.
 - 🎨 **Profil navigering**. Ikoner på mobil på profil er nå fikset.
 - 🎨 **Maks bredde på tekst**. Beskrivelse under tittel er nå tilpasset.

src/pages/GalleryDetails/components/GalleryRenderer.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
 import { Gallery } from 'types';
+import { Picture } from 'types';
 
 import { useGalleryPictures } from 'hooks/Gallery';
 
@@ -26,13 +27,14 @@
 const GalleryRenderer = ({ id }: GalleryRendererProps) => {
   const { data, hasNextPage, fetchNextPage, isFetching } = useGalleryPictures(id);
   const pictures = useMemo(() => (data ? data.pages.map((page) => page.results).flat() : []), [data]);
-
   return (
-    <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-4'>
-      {pictures.map((image) => (
-        <PictureDialog galleryId={id} key={image.id} picture={image} />
-      ))}
-      {hasNextPage && <PaginateButton className='w-full mt-4' isLoading={isFetching} nextPage={fetchNextPage} />}
+    <div className='flex flex-col justify-center items-center'>
+      <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-4'>
+        {pictures.map((image) => (
+          <PictureDialog galleryId={id} key={image.id} picture={image} />
+        ))}
+      </div>
+      {hasNextPage && <PaginateButton className='mt-4' isLoading={isFetching} nextPage={fetchNextPage} />}
     </div>
   );
 };