okooooooo/forgery
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: switch details dialogs to top-down layout

Browse Source 
- 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.
This commit is contained in:
google-labs-jules[bot] committed 2026-02-13 07:58:03 +00:00
1 parent f9407b0f27
commit cf03f3e3d1
2 files changed
+10 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/components/EquipmentDetailsDialog.tsx
+5 -5
View File
@@ -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>
src/ui/components/LookDetailsDialog.tsx
+5 -5
View File
@@ -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 */}