From cf03f3e3d12af0386eb181787a2fcbb71344cf3d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 13 Feb 2026 07:58:03 +0000
Subject: [PATCH] feat: switch details dialogs to top-down layout

- Updated `LookDetailsDialog` to use a top-down layout (image top, details bottom).
- Updated `EquipmentDetailsDialog` to use a top-down layout (image top, form bottom).
- Ensured images are contained and details are scrollable.
---
 src/ui/components/EquipmentDetailsDialog.tsx | 10 +++++-----
 src/ui/components/LookDetailsDialog.tsx      | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/ui/components/EquipmentDetailsDialog.tsx b/src/ui/components/EquipmentDetailsDialog.tsx
index 69dc466..863e9d5 100644
--- a/src/ui/components/EquipmentDetailsDialog.tsx
+++ b/src/ui/components/EquipmentDetailsDialog.tsx
@@ -79,9 +79,9 @@ export const EquipmentDetailsDialog: React.FC<EquipmentDetailsDialogProps> = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex-1 overflow-hidden flex flex-col md:flex-row">
-          {/* Left: Full Image */}
-          <div className="flex-1 bg-stone-900 flex items-center justify-center p-4 overflow-hidden relative">
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {/* Top: Full Image */}
+          <div className="h-[60%] bg-stone-900 flex items-center justify-center p-4 overflow-hidden relative shrink-0">
             <div
               className="absolute inset-0 opacity-20 pointer-events-none"
               style={{
@@ -96,8 +96,8 @@ export const EquipmentDetailsDialog: React.FC<EquipmentDetailsDialogProps> = ({
             />
           </div>
 
-          {/* Right: Edit Form */}
-          <div className="w-full md:w-80 bg-white border-l border-stone-200 flex flex-col overflow-y-auto shrink-0 p-6 gap-6">
+          {/* Bottom: Edit Form */}
+          <div className="flex-1 bg-white border-t border-stone-200 flex flex-col overflow-y-auto shrink-0 p-6 gap-6">
             <div className="space-y-4">
               <div className="space-y-2">
                 <Label htmlFor="name">Name</Label>
diff --git a/src/ui/components/LookDetailsDialog.tsx b/src/ui/components/LookDetailsDialog.tsx
index 909f9dc..7b7a2ff 100644
--- a/src/ui/components/LookDetailsDialog.tsx
+++ b/src/ui/components/LookDetailsDialog.tsx
@@ -38,9 +38,9 @@ export const LookDetailsDialog: React.FC<LookDetailsDialogProps> = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex-1 overflow-hidden flex flex-col md:flex-row">
-          {/* Left: Full Image */}
-          <div className="flex-1 bg-stone-900 flex items-center justify-center p-4 overflow-hidden relative">
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {/* Top: Full Image */}
+          <div className="h-[60%] bg-stone-900 flex items-center justify-center p-4 overflow-hidden relative shrink-0">
             <div
               className="absolute inset-0 opacity-20 pointer-events-none"
               style={{
@@ -55,8 +55,8 @@ export const LookDetailsDialog: React.FC<LookDetailsDialogProps> = ({
             />
           </div>
 
-          {/* Right: Details */}
-          <div className="w-full md:w-80 bg-white border-l border-stone-200 flex flex-col overflow-hidden shrink-0">
+          {/* Bottom: Details */}
+          <div className="flex-1 bg-white border-t border-stone-200 flex flex-col overflow-hidden shrink-0">
             <ScrollArea className="flex-1">
               <div className="p-6 flex flex-col gap-6">
                 {/* Equipments Used */}