minor ui change

src/ui/Layout.tsx

@@ -24,7 +24,7 @@ export default function Layout() {
             <Github className="h-5 w-5" />
           </a>
         </header>
-        <main className="flex flex-1 flex-col gap-4 p-4">
+        <main className="flex flex-1 flex-col gap-4 px-4">
           <Outlet />
         </main>
       </SidebarInset>

src/ui/components/ExtractionFlowDesigner.tsx

@@ -1,12 +1,12 @@
 import { ArrowDown, FileSearch, Image as ImageIcon, User, Wand2 } from 'lucide-react'
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
 } from './ui/select'
 
 interface ExtractionFlowDesignerProps {
@@ -31,15 +31,15 @@ export function ExtractionFlowDesigner({
       id: 'analyze',
       key: 'step_analyze_model',
       title: 'Analyze Image',
-      description: 'Extracts visual features and descriptions from the input image.',
+      description: 'Analyze equipments from the input image.',
       icon: <FileSearch className="w-5 h-5 text-cyan-600" />,
       type: 'text',
     },
     {
       id: 'texture',
       key: 'step_texture_model',
-      title: 'Generate Texture',
-      description: 'Creates a texture sheet based on the analysis.',
+      title: 'Generate Equipment Sheet',
+      description: 'Creates a equipments image based on the analysis.',
       icon: <ImageIcon className="w-5 h-5 text-purple-600" />,
       type: 'image',
     },
@@ -56,7 +56,7 @@ export function ExtractionFlowDesigner({
       id: 'generation',
       key: 'step_generation_model',
       title: 'Character Generation',
-      description: 'Generates the final character using the equipment.',
+      description: 'Generates the final character using the equipments.',
       icon: <User className="w-5 h-5 text-blue-600" />,
       type: 'image',
     },

src/ui/components/PageHeader.tsx

@@ -26,7 +26,7 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        'w-full flex flex-col gap-4 pb-4 pt-2 transition-all duration-300',
+        'w-full flex flex-col gap-4 pb-4 pt-3 transition-all duration-300',
         sticky &&
           'sticky z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
         className,

src/ui/pages/Characters.tsx

@@ -56,7 +56,7 @@ export default function Characters() {
   })
 
   return (
-    <div className="w-full h-full p-4 pt-2 flex flex-col text-slate-900 relative">
+    <div className="w-full h-full px-4 flex flex-col text-slate-900 relative">
       <PageHeader
         title="Characters"
         subtitle="System // Character_List"

src/ui/pages/Equipments.tsx

@@ -132,7 +132,7 @@ export default function Equipments() {
   }
 
   return (
-    <div className="w-full h-full p-4 pt-2 flex flex-col font-sans text-slate-900 relative">
+    <div className="w-full h-full px-4 flex flex-col font-sans text-slate-900 relative">
       <PageHeader
         title={viewMode === 'equipments' ? 'Equipments' : 'Outfits'}
         subtitle={
@@ -295,28 +295,28 @@ export default function Equipments() {
                     <div className="w-full h-[80%] grid grid-cols-3 grid-rows-3">
                       {Array.from({ length: 9 }).map((_, i) => {
                         const item = outfit.equipments[i]
-                      const totalCount = outfit.equipments.length
+                        const totalCount = outfit.equipments.length
 
-                      if (i === 8 && totalCount > 9) {
-                        const extraCount = totalCount - 8
-                        return (
-                          <div
-                            key={i}
-                            className="relative w-full h-full border-[0.5px] border-slate-200 bg-slate-50 overflow-hidden"
-                          >
-                            {item && item.equipment.image?.path && (
-                              <img
-                                src={`/files/${item.equipment.image.path}`}
-                                alt="More"
-                                className="w-full h-full object-cover opacity-50 grayscale"
-                              />
-                            )}
-                            <div className="absolute inset-0 flex items-center justify-center bg-black/40 text-white font-bold text-lg backdrop-blur-[1px]">
-                              +{extraCount}
+                        if (i === 8 && totalCount > 9) {
+                          const extraCount = totalCount - 8
+                          return (
+                            <div
+                              key={i}
+                              className="relative w-full h-full border-[0.5px] border-slate-200 bg-slate-50 overflow-hidden"
+                            >
+                              {item && item.equipment.image?.path && (
+                                <img
+                                  src={`/files/${item.equipment.image.path}`}
+                                  alt="More"
+                                  className="w-full h-full object-cover opacity-50 grayscale"
+                                />
+                              )}
+                              <div className="absolute inset-0 flex items-center justify-center bg-black/40 text-white font-bold text-lg backdrop-blur-[1px]">
+                                +{extraCount}
+                              </div>
                             </div>
-                          </div>
-                        )
-                      }
+                          )
+                        }
 
                         return (
                           <div
@@ -324,15 +324,15 @@ export default function Equipments() {
                             className="relative w-full h-full border-[0.5px] border-slate-200 bg-slate-50 overflow-hidden"
                           >
                             {item ? (
-                            <img
-                              src={
-                                item.equipment.image?.path
-                                  ? `/files/${item.equipment.image.path}`
-                                  : ''
-                              }
-                              alt={item.equipment.name}
-                              className="w-full h-full object-cover"
-                            />
+                              <img
+                                src={
+                                  item.equipment.image?.path
+                                    ? `/files/${item.equipment.image.path}`
+                                    : ''
+                                }
+                                alt={item.equipment.name}
+                                className="w-full h-full object-cover"
+                              />
                             ) : (
                               <div className="w-full h-full bg-slate-100/50" />
                             )}

src/ui/pages/Expressions.tsx

@@ -40,7 +40,7 @@ export default function Expressions() {
   })
 
   return (
-    <div className="w-full h-full p-4 pt-2 flex flex-col text-slate-900 relative">
+    <div className="w-full h-full px-4 flex flex-col text-slate-900 relative">
       <PageHeader
         title="Expressions"
         subtitle="System // Expression_Library"

src/ui/pages/FittingRoom.tsx

@@ -83,7 +83,7 @@ export default function FittingRoom() {
   }
 
   return (
-    <div className="px-8 pb-8 pt-2 h-[calc(100vh-6rem)] flex flex-col bg-stone-50/30 relative">
+    <div className="px-8 pb-2 h-[calc(100vh-6rem)] flex flex-col bg-stone-50/30 relative">
       <PageHeader
         title="Fitting Room"
         subtitle="System // FITTING_ROOM"
@@ -134,8 +134,8 @@ export default function FittingRoom() {
         </div>
 
         {/* Right: Generations Grid */}
-        <div className="flex-1 flex flex-col bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden h-full min-h-0">
-          <div className="p-4 border-b border-stone-100 bg-stone-50/50 flex justify-between items-center shrink-0">
+        <div className="flex flex-col bg-white rounded-2xl border border-stone-200 shadow-sm h-full">
+          <div className="flex-none p-4 border-b border-stone-100 bg-stone-50/50 flex justify-between items-center shrink-0">
             <h3 className="font-bold text-stone-700 uppercase tracking-wider text-xs flex items-center gap-2">
               <span className="w-2 h-2 rounded-full bg-green-500"></span>
               Generated Looks
@@ -157,7 +157,7 @@ export default function FittingRoom() {
               </Button>
             </div>
           ) : (
-            <ScrollArea className="flex-1 h-full">
+            <ScrollArea className="grow overflow-hidden">
               <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
                 {generations.map((gen) => (
                   <div
@@ -216,7 +216,7 @@ export default function FittingRoom() {
                       alt="Generation"
                       className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4">
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4">
                       <p className="text-white text-xs font-bold">
                         {new Date(gen.createdAt).toLocaleDateString()}
                       </p>

src/ui/pages/Poses.tsx

@@ -40,7 +40,7 @@ export default function Poses() {
   })
 
   return (
-    <div className="w-full h-full p-4 pt-2 flex flex-col text-slate-900 relative">
+    <div className="w-full h-full px-4 flex flex-col text-slate-900 relative">
       <PageHeader
         title="Poses"
         subtitle="System // Pose_Library"

src/ui/pages/Settings.tsx

@@ -143,7 +143,7 @@ export default function Settings() {
   }
 
   return (
-    <div className="w-full h-full p-4 pt-2 flex flex-col font-sans text-slate-900 relative space-y-8">
+    <div className="w-full h-full px-4 flex flex-col font-sans text-slate-900 relative space-y-8">
       <PageHeader title="Settings" subtitle="System // Configuration" />
 
       <div className="max-w-4xl mx-auto w-full grid gap-8">