Update app.py

app.py

@@ -580,20 +580,6 @@ css = '''
 #random_btn{font-size: 300%}
 #component-11{align-self: stretch;}
 
-
-/* 갤러리 메인 컨테이너 */
-#lora_gallery {
-    margin: 20px 0;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 12px;
-    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);
-    display: block !important;
-}
-
 /* 갤러리 메인 컨테이너 */
 #lora_gallery {
     margin: 20px 0;
@@ -601,10 +587,12 @@ css = '''
     border: 1px solid #ddd;
     border-radius: 12px;
     background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
-    width: 100% !important;
+    width: 100vw !important;
+    max-width: 100% !important;
     height: 800px !important;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     display: block !important;
+    overflow: hidden;
 }
 
 /* 갤러리 그리드 컨테이너 */
@@ -619,6 +607,7 @@ css = '''
     max-width: 100% !important;
 }
 
+/* 갤러리 아이템 */
 .gallery-item {
     position: relative !important;
     width: 100% !important;
@@ -630,6 +619,7 @@ css = '''
     overflow: hidden;
 }
 
+/* 갤러리 이미지 */
 .gallery-item img {
     width: 100% !important;
     height: 100% !important;
@@ -637,41 +627,36 @@ css = '''
     border-radius: 12px !important;
 }
 
-/* 갤러리 그리드 래퍼 수정 */
-.wrap.svelte-w6dy5e {
-    display: grid !important;
-    grid-template-columns: repeat(6, 1fr) !important;
-    gap: 15px !important;
-    width: 100% !important;
-}
-
-/* 갤러리 컨테이너 강제 설정 */
-.container, .content {
+/* Gradio 컨테이너 설정 */
+.gradio-container {
     width: 100% !important;
     max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
-/* 이미지 컨테이너 설정 */
-.image-container {
+/* 갤러리 그리드 래퍼 */
+.wrap, .svelte-w6dy5e {
+    display: grid !important;
+    grid-template-columns: repeat(6, 1fr) !important;
+    gap: 15px !important;
     width: 100% !important;
-    padding-bottom: 100% !important;
-    position: relative !important;
+    max-width: 100% !important;
 }
 
-/* 이미지 설정 */
-.image-container img {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
+/* 모든 컨테이너 공통 설정 */
+.container, .content, .block, .contain {
     width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 /* 행 설정 */
 .row {
     width: 100% !important;
     margin: 0 !important;
+    padding: 0 !important;
 }
 
 /* 입체감 있는 버튼 */
@@ -721,6 +706,19 @@ input:focus, textarea:focus {
     background: #555;
 }
 
+/* 갤러리 flex 컨테이너 */
+.flex {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: flex !important;
+}
+
+/* svelte 특정 클래스 */
+.svelte-1p9xokt {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
 #footer {visibility: hidden;}
 '''
 
@@ -736,26 +734,22 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
         갤러리에서 원하는 모델을 선택(최대 3개까지) < 프롬프트에 한글 또는 영문으로 원하는 내용을 입력 < Generate 버튼 실행  
         """
     )
-
     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=None,
+            columns=6,
             elem_id="gallery",
             height=800,
             object_fit="cover",
             show_label=True,
             allow_preview=False,
             show_share_button=False,
+            scale=None,  # scale 제거
             container=True,
-            scale=1,
-            min_width=1200,
-            visible=True,
-            show_download_button=False,
             preview=False
-        )    
+        ).style(full_width=True)  # 전체 너비 사용
+