Fix responsive layout on artwork single page

src/app/(normal)/artworks/single/[id]/page.tsx

@@ -8,7 +8,12 @@ import { PlayCircle } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
-export default async function SingleArtworkPage({ params }: { params: { id: string }; searchParams: Record<string, string | string[] | undefined>; }) {
+export default async function SingleArtworkPage({
+  params,
+}: {
+  params: { id: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
   const { id } = await params;
   const artwork = await prisma.artwork.findUnique({
     where: {
@@ -24,34 +29,44 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
       tags: true,
       variants: true,
       timelapse: { where: { enabled: true } },
-    }
-  })
+    },
+  });
 
-  if (!artwork) return <div>Artwork with this ID could not be found</div>
+  if (!artwork) return <div>Artwork with this ID could not be found</div>;
 
-  const { width, height } = artwork.variants.find((v) => v.type === "resized") ?? { width: 0, height: 0 }
+  const { width, height } = artwork.variants.find(
+    (v) => v.type === "resized",
+  ) ?? { width: 0, height: 0 };
 
   const colors =
-    artwork.colors?.map((c) => c.color?.hex).filter((hex): hex is string => Boolean(hex)) ?? []
+    artwork.colors
+      ?.map((c) => c.color?.hex)
+      .filter((hex): hex is string => Boolean(hex)) ?? [];
 
   const gradientColors = colors.length
     ? colors.join(", ")
-    : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
-
+    : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)";
 
   return (
-    <div className="px-8 py-4">
+    <div className="px-4 sm:px-8 py-4">
       <div className="relative w-full min-h-10 flex items-center mb-4">
-        <div className="z-10"><ContextBackButton /></div>
+        <div className="z-10 hidden sm:block">
+          <ContextBackButton />
+        </div>
         {artwork.name ? (
-          <div className="pointer-events-none absolute left-1/2 -translate-x-1/2 text-center">
-            <div className="pointer-events-auto"><h1 className="text-2xl font-bold mb-4 py-4">{artwork.name}</h1></div>
+          <div className="w-full text-center sm:pointer-events-none sm:absolute sm:left-1/2 sm:-translate-x-1/2">
+            <div className="sm:pointer-events-auto">
+              <h1 className="text-xl sm:text-2xl font-bold mb-2 sm:mb-4 py-2 sm:py-4 px-2 sm:px-0 wrap-break-word">
+                {artwork.name}
+              </h1>
+            </div>
           </div>
         ) : null}
       </div>
       <div className="flex flex-col items-center gap-4">
         <div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background relative">
-          <div className="relative w-full bg-muted items-center justify-center"
+          <div
+            className="relative w-full bg-muted items-center justify-center"
             style={{ aspectRatio: "4 / 3" }}
           >
             <Link href={`/raw/${artwork.id}`}>
@@ -94,7 +109,10 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
             tags={artwork.tags}
           />
         </div>
+        <div className="w-full flex justify-center sm:hidden">
+          <ContextBackButton className="mx-auto flex justify-center" />
+        </div>
+      </div>
     </div>
-    </div >
   );
 }

src/components/artworks/ContextBackButton.tsx

@@ -10,7 +10,7 @@ const FROM_TO_PATH: Record<string, string> = {
   "animal-index": "/artworks/animalstudies/index"
 };
 
-export function ContextBackButton() {
+export function ContextBackButton({ className }: { className?: string }) {
   const router = useRouter();
   const sp = useSearchParams();
   const from = sp.get("from") ?? "";
@@ -19,7 +19,7 @@ export function ContextBackButton() {
   if (!target) return null;
 
   return (
-    <div className="w-full max-w-xl">
+    <div className={["w-full max-w-xl", className].filter(Boolean).join(" ")}>
       <Link
         href={target}
         className={[