Change overall look for dark mode and Timelapse View

src/app/(normal)/commissions/page.tsx

@@ -38,17 +38,18 @@ export default async function CommissionsPage() {
             <DialogTrigger asChild>
               <Button variant="secondary">View example</Button>
             </DialogTrigger>
-            <DialogContent className="w-[min(95vw,1200px)] max-w-300 p-4 sm:p-6">
-              <DialogHeader>
-                <DialogTitle></DialogTitle>
+            <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
+              <DialogHeader className="sr-only">
+                <DialogTitle>Commission example</DialogTitle>
               </DialogHeader>
-              <div className="relative w-full h-[80vh] max-h-[80vh] overflow-hidden rounded-xl border-2 border-border/60 bg-muted shadow-2xl">
+              <div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
                 <Image
                   src={guidelines.exampleImageUrl}
                   alt="Commission example"
-                  fill
-                  sizes="(max-width: 640px) 95vw, 1200px"
-                  className="object-contain"
+                  width={1600}
+                  height={1200}
+                  sizes="85vw"
+                  className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
                 />
               </div>
             </DialogContent>