Update app.py

app.py

@@ -601,15 +601,12 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                     session_history = gr.HTML(elem_classes="session-history")
                     close_btn = antd.Button("닫기", type="default", elem_classes="close-btn")
 
-            # 높이 일관성을 위한 변수 정의
-            panel_height = "900px"
-            content_height = "870px"  # 헤더(30px)를 제외한 높이
-
             with antd.Row(gutter=[32, 12], align="top", elem_classes="equal-height-container") as layout:
 
                 # 좌측 미리보기
                 with antd.Col(span=24, md=16, elem_classes="equal-height-col"):
-                    with ms.Div(elem_classes="right_panel panel", style=f"height: {panel_height};"):
+                    # style 속성 대신 CSS 클래스만 사용
+                    with ms.Div(elem_classes="right_panel panel fixed-height"):
                         gr.HTML(r"""
 <div class="render_header">
     <span class="header_btn"></span>
@@ -619,13 +616,13 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
 """)
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
-                                empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content", style=f"height: {content_height};")
+                                empty = antd.Empty(description="게임을 만들려면 설명을 입력하세요", elem_classes="right_content fixed-content-height")
                             with antd.Tabs.Item(key="loading"):
                                 loading = antd.Spin(
-                                    True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content", style=f"height: {content_height};"
+                                    True, tip="게임 코드 생성 중...", size="large", elem_classes="right_content fixed-content-height"
                                 )
                             with antd.Tabs.Item(key="render"):
-                                sandbox = gr.HTML(elem_classes="html_content", style=f"height: {content_height};")
+                                sandbox = gr.HTML(elem_classes="html_content fixed-content-height")
 
                 # 우측 입력/버튼/배포
                 with antd.Col(span=24, md=8, elem_classes="equal-height-col"):
@@ -642,15 +639,15 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
                             deploy_btn = antd.Button("배포", type="default", size="large", elem_classes="deploy-btn")
                             clear_btn = antd.Button("클리어", type="default", size="large", elem_classes="clear-btn")
 
-                    # 우측 입력 패널에 고정된 높이 지정
-                    with antd.Flex(vertical=True, gap="middle", wrap=True, elem_classes="input-panel", style=f"height: {content_height}; max-height: {content_height}; overflow: hidden;"):
-                        # 입력창의 높이를 조정하여 배포 결과 영역을 고려
+                    # style 속성 대신 CSS 클래스 사용
+                    with antd.Flex(vertical=True, gap="middle", wrap=True, elem_classes="input-panel fixed-content-height"):
+                        # 입력창의 높이를 CSS로 조정
                         input_text = antd.InputTextarea(
                             size="large",
                             allow_clear=True,
                             placeholder=random.choice(DEMO_LIST)['description'],
                             max_length=100000,
-                            style="height: 730px; max-height: 730px;"  # 높이 조정
+                            elem_classes="fixed-input-height"
                         )
                         gr.HTML('<div class="help-text">💡 원하는 게임의 설명을 입력하세요. 예: "테트리스 게임 제작해줘."</div>')