Update app.py

app.py

@@ -580,6 +580,7 @@ css = '''
 #random_btn{font-size: 300%}
 #component-11{align-self: stretch;}
 
+
 /* 갤러리 메인 컨테이너 */
 #lora_gallery {
     margin: 20px 0;
@@ -589,8 +590,8 @@ css = '''
     background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
     width: 100% !important;
     height: 800px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    display: block !important;
 }
 
 /* 갤러리 그리드 컨테이너 */
@@ -602,6 +603,7 @@ css = '''
     width: 100% !important;
     height: 100% !important;
     overflow-y: auto !important;
+    max-width: 100% !important;
 }
 
 /* 갤러리 아이템 */
@@ -614,6 +616,7 @@ css = '''
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-radius: 12px;
     overflow: hidden;
+    flex: 1 1 calc(16.666% - 15px) !important;
 }
 
 /* 갤러리 이미지 */
@@ -624,26 +627,45 @@ css = '''
     border-radius: 12px !important;
 }
 
-/* 갤러리 아이템 호버 효과 */
-.gallery-item:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    z-index: 1;
-}
-
 /* 갤러리 그리드 래퍼 */
-.grid-wrap {
+.grid-wrap, .grid-container {
     width: 100% !important;
-    height: 100% !important;
-    overflow: visible !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    display: block !important;
 }
 
-/* 갤러리 컨테이너 기본 설정 */
+/* Gradio 컨테이너 수정 */
 .gradio-container {
     width: 100% !important;
     max-width: none !important;
 }
 
+.gradio-container .contain {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+}
+
+/* 행 컨테이너 수정 */
+.row > * {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+/* 갤러리 컨테이너 강제 설정 */
+.gallery-container {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+}
+
+/* 갤러리 아이템 컨테이너 */
+.gallery-item-container {
+    width: 100% !important;
+    display: contents !important;
+}
+
 /* 행 설정 */
 .row {
     width: 100% !important;
@@ -712,14 +734,11 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
         갤러리에서 원하는 모델을 선택(최대 3개까지) < 프롬프트에 한글 또는 영문으로 원하는 내용을 입력 < Generate 버튼 실행  
         """
     )
-
-# Gallery 컴포넌트 수정
     with gr.Row(elem_id="lora_gallery", equal_height=True):
         gallery = gr.Gallery(
             value=[(item["image"], item["title"]) for item in loras],
             label="LoRA Explorer Gallery",
             columns=6,
-            rows="auto",
             elem_id="gallery",
             height="800px",
             object_fit="cover",
@@ -727,12 +746,11 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
             allow_preview=False,
             show_share_button=False,
             scale=1,
-            min_width=1200,
+            min_width="100%",  # 수정
             container=True,
             preview=False
-        )    
+        )
 
-    
         
     with gr.Tab(label="Generate"):
         # Prompt and Generate Button