📱 feat(ui-prompts): mobile-optimized prompt detail layout

Move title and description above video/gallery on mobile web. Show
video as first carousel item on mobile only, preserving the side-by-side
video + gallery layout on desktop. Also add screen_references/ to
gitignore.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bidah

.gitignore

@@ -64,3 +64,6 @@ remotion/
 
 # Git worktrees
 .worktrees/
+
+# Screen references
+screen_references/

apps/web/app/(app)/ui-prompts/[slug]/page.tsx

@@ -12,7 +12,7 @@ export default async function UiPromptDetailPage({ params }: Props) {
   return (
     <main className="min-h-dvh bg-background">
       <NavHeader session={session} />
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-2 lg:py-12">
         <PromptDetail slug={slug} isAuthenticated={!!session} />
       </div>
     </main>

apps/web/components/ui-prompts/prompt-detail.tsx

@@ -68,14 +68,26 @@ export function PromptDetail({ slug, isAuthenticated }: PromptDetailProps) {
 
   return (
     <div>
-
+      {/* Mobile: Title + Description on top */}
+      <div className="lg:hidden mb-6 space-y-3">
+        <div className="flex items-start gap-1">
+          <h1 className="text-2xl font-bold text-foreground">{prompt.title}</h1>
+          {prompt.featured && (
+            <Badge className="bg-foreground text-background border-foreground/80 hover:bg-foreground flex-shrink-0">
+              Featured
+            </Badge>
+          )}
+        </div>
+        <p className="text-muted-foreground">{prompt.description}</p>
+      </div>
 
       {/* Side-by-side Layout */}
       <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
         {/* Left: Video + Gallery */}
         <div className="lg:w-[60%] flex flex-col sm:flex-row items-start gap-3">
+          {/* Desktop: video shown side-by-side with gallery */}
           {prompt.videoPreviewUrl && (
-            <div className="flex-1 min-w-0 flex justify-center">
+            <div className="hidden sm:flex flex-1 min-w-0 justify-center">
               <video
                 src={prompt.videoPreviewUrl}
                 autoPlay
@@ -92,14 +104,15 @@ export function PromptDetail({ slug, isAuthenticated }: PromptDetailProps) {
             <ScreenshotGallery
               screenshots={screenshots}
               title={prompt.title}
+              videoUrl={prompt.videoPreviewUrl}
             />
           </div>
         </div>
 
         {/* Right: Details */}
         <div className="lg:w-[40%] space-y-3">
-          {/* Title + Featured Badge */}
-          <div className="flex items-start gap-1">
+          {/* Title + Featured Badge (desktop only) */}
+          <div className="hidden lg:flex items-start gap-1">
             <h1 className="text-2xl font-bold text-foreground">{prompt.title}</h1>
             {prompt.featured && (
               <Badge className="bg-foreground text-background border-foreground/80 hover:bg-foreground flex-shrink-0">
@@ -108,8 +121,8 @@ export function PromptDetail({ slug, isAuthenticated }: PromptDetailProps) {
             )}
           </div>
 
-          {/* Description */}
-          <p className="text-muted-foreground">{prompt.description}</p>
+          {/* Description (desktop only) */}
+          <p className="hidden lg:block text-muted-foreground">{prompt.description}</p>
 
           {/* Tags */}
           {prompt.tags && prompt.tags.length > 0 && (

apps/web/components/ui-prompts/screenshot-gallery.tsx

@@ -4,61 +4,107 @@ import { useState } from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { PhoneFrame } from "@/components/ui-prompts/phone-frame"
 import { Button } from "@/components/ui/button"
+import { useIsMobile } from "@/hooks/use-mobile"
 
 interface ScreenshotGalleryProps {
   screenshots: string[]
   title: string
+  /** On mobile, the video is shown as the first carousel item */
+  videoUrl?: string | null
 }
 
 export function ScreenshotGallery({
   screenshots,
   title,
+  videoUrl,
 }: ScreenshotGalleryProps) {
   const [activeIndex, setActiveIndex] = useState(0)
+  const isMobile = useIsMobile()
+
+  // Only include video in carousel on mobile
+  const includeVideo = isMobile && !!videoUrl
+  const totalItems = includeVideo ? screenshots.length + 1 : screenshots.length
+  const isVideoSlot = includeVideo && activeIndex === 0
+  const screenshotIndex = includeVideo ? activeIndex - 1 : activeIndex
 
   return (
     <div className="flex flex-col items-center gap-4">
-      {/* Main Phone Frame */}
-      <PhoneFrame
-        src={screenshots[activeIndex]}
-        alt={`${title} - Screenshot ${activeIndex + 1}`}
-        className="max-w-[280px] w-full"
-      />
+      {/* Main display */}
+      {isVideoSlot ? (
+        <div className="max-w-[280px] w-full flex justify-center">
+          <video
+            src={videoUrl!}
+            autoPlay
+            loop
+            muted
+            playsInline
+            controls
+            className="max-w-[280px] w-full rounded-[2rem] border-[3px] border-neutral-700 bg-black object-cover"
+            style={{ aspectRatio: "9 / 19.5" }}
+          />
+        </div>
+      ) : (
+        <PhoneFrame
+          src={screenshots[includeVideo ? screenshotIndex : activeIndex]}
+          alt={`${title} - Screenshot ${(includeVideo ? screenshotIndex : activeIndex) + 1}`}
+          className="max-w-[280px] w-full"
+        />
+      )}
 
       {/* Thumbnail Strip */}
-      {screenshots.length > 1 && (
+      {totalItems > 1 && (
         <div className="flex items-center gap-2">
           <Button
             variant="ghost"
             size="icon"
             className="h-8 w-8 text-muted-foreground hover:text-foreground"
             onClick={() =>
               setActiveIndex((prev) =>
-                prev === 0 ? screenshots.length - 1 : prev - 1
+                prev === 0 ? totalItems - 1 : prev - 1
               )
             }
           >
             <ChevronLeft className="h-4 w-4" />
           </Button>
 
           <div className="flex items-center gap-2 overflow-x-auto">
-            {screenshots.map((src, index) => (
+            {/* Mobile-only video thumbnail */}
+            {includeVideo && (
               <button
-                key={index}
-                onClick={() => setActiveIndex(index)}
+                onClick={() => setActiveIndex(0)}
                 className={`flex-shrink-0 w-12 h-24 rounded-lg overflow-hidden border-2 transition-colors ${
-                  index === activeIndex
+                  activeIndex === 0
                     ? "border-foreground"
                     : "border-border hover:border-primary/50"
                 }`}
               >
-                <img
-                  src={src}
-                  alt={`${title} - Thumbnail ${index + 1}`}
+                <video
+                  src={videoUrl!}
+                  muted
                   className="w-full h-full object-cover"
                 />
               </button>
-            ))}
+            )}
+            {screenshots.map((src, index) => {
+              const itemIndex = includeVideo ? index + 1 : index
+              return (
+                <button
+                  key={index}
+                  onClick={() => setActiveIndex(itemIndex)}
+                  className={`flex-shrink-0 w-12 h-24 rounded-lg overflow-hidden border-2 transition-colors ${
+                    itemIndex === activeIndex
+                      ? "border-foreground"
+                      : "border-border hover:border-primary/50"
+                  }`}
+                >
+                  <img
+                    src={src}
+                    alt={`${title} - Thumbnail ${index + 1}`}
+                    className="w-full h-full object-cover"
+                  />
+                </button>
+              )
+            })}
           </div>
 
           <Button
@@ -67,7 +113,7 @@ export function ScreenshotGallery({
             className="h-8 w-8 text-muted-foreground hover:text-foreground"
             onClick={() =>
               setActiveIndex((prev) =>
-                prev === screenshots.length - 1 ? 0 : prev + 1
+                prev === totalItems - 1 ? 0 : prev + 1
               )
             }
           >