Update app.py

app.py

@@ -671,9 +671,7 @@ def create_interface():
             padding: 20px;
             margin: 10px 0;
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            display: flex;
-            align-items: center;
-            gap: 20px;
+            overflow: visible;  /* 스크롤바 제거 */
         }
         .search-box { 
             border: 2px solid #e1e1e1;
@@ -690,29 +688,26 @@ def create_interface():
         }
         /* 정렬 버튼 컨테이너 수정 */
         .sort-radio { 
-            display: flex !important;
-            justify-content: center !important;
+            display: inline-flex !important;
             gap: 15px !important;
-            width: 400px !important;  /* 너비 고정 */
-            min-width: 400px !important;  /* 최소 너비 설정 */
             background: transparent !important;
             padding: 0 !important;
-            height: 80px !important;  /* 높이 고정 */
+            overflow: visible !important;  /* 스크롤바 제거 */
+            width: auto !important;
+            min-width: 390px !important;  /* 3개 버튼 + 간격 */
         }
         
         /* 라디오 버튼 그룹 컨테이너 */
         .sort-radio > div {
             display: flex !important;
             gap: 15px !important;
-            width: 100% !important;
-            flex-wrap: nowrap !important;  /* 줄바꿈 방지 */
+            overflow: visible !important;  /* 스크롤바 제거 */
         }
         
         /* 각 라디오 버튼 항목 */
         .sort-radio > div > div {
             width: 120px !important;
             height: 80px !important;
-            flex-shrink: 0 !important;  /* 크기 축소 방지 */
         }
         
         /* 라디오 버튼을 버튼처럼 스타일링 */
@@ -727,10 +722,13 @@ def create_interface():
             border-radius: 10px !important;
             cursor: pointer !important;
             transition: all 0.3s ease !important;
-            font-size: 1.2em !important;
+            font-size: 1.1em !important;
             text-align: center !important;
             padding: 10px !important;
             box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
+            white-space: normal !important;  /* 텍스트 줄바꿈 허용 */
+            word-break: break-word !important;  /* 긴 단어 줄바꿈 */
+            line-height: 1.2 !important;  /* 줄간격 조정 */
         }
         
         /* 첫 번째 버튼 (rank) */
@@ -777,7 +775,6 @@ def create_interface():
             margin-left: auto;
             font-size: 1.2em !important;
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            flex-shrink: 0 !important;  /* 크기 축소 방지 */
         }
         
         .refresh-btn:hover {
@@ -807,12 +804,13 @@ def create_interface():
                         )
                     with gr.Column(scale=2):
                         spaces_sort = gr.Radio(
-                            choices=["rank", "rising_rate", "popularity"],
-                            value="rank",
+                            choices=["Rank", "Rising Rate", "Popularity"],  # 텍스트 수정
+                            value="Rank",
                             label="📊 Sort by",
                             interactive=True,
                             elem_classes="sort-radio"
                         )
+
                     with gr.Column(scale=1):
                         spaces_refresh_btn = gr.Button(
                             "🔄 Refresh",