Update app.css

app.css

@@ -373,4 +373,100 @@ footer, .footer, div[class*="footer"], #footer {
 
 .fade-in {
   animation: fadeIn 0.5s ease-out;
+}
+
+/* 기존 코드는 그대로 유지하고 아래 코드를 추가 */
+
+/* MOUSE 탭 높이 관련 스타일 */
+.main-tabs {
+    min-height: 100vh !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.main-tabs > div[role="tabpanel"] {
+    flex: 1 !important;
+    min-height: calc(100vh - 60px) !important;
+}
+
+.mouse-tab {
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* 레이아웃 컨테이너 높이 조정 */
+.ant-row {
+    min-height: calc(100vh - 100px) !important;
+}
+
+/* 좌측 패널 높이 조정 */
+.ant-col-md-8 {
+    height: 100% !important;
+}
+
+.ant-flex {
+    height: 100% !important;
+}
+
+/* 우측 패널 높이 조정 */
+.right_panel {
+    position: relative;
+    height: calc(100vh - 100px) !important;
+    min-height: 600px !important;
+    padding-top: 50px;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* HTML 컨텐츠 영역 높이 조정 */
+.html_content {
+    flex: 1 !important;
+    min-height: calc(100vh - 200px) !important;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    background: var(--surface);
+}
+
+/* 탭 컨텐츠 영역 높이 조정 */
+.ant-tabs-content {
+    height: 100% !important;
+}
+
+.ant-tabs-tabpane {
+    height: 100% !important;
+}
+
+/* 스크롤 영역 조정 */
+.right_content {
+    height: calc(100vh - 150px) !important;
+    overflow-y: auto;
+}
+
+/* 모바일 대응 */
+@media (max-width: 768px) {
+    .right_panel {
+        height: auto !important;
+        min-height: calc(100vh - 150px) !important;
+    }
+    
+    .html_content {
+        min-height: 500px !important;
+    }
+}
+
+/* 추가적인 레이아웃 안정성을 위한 스타일 */
+.ms-application {
+    height: 100% !important;
+    min-height: 100vh !important;
+}
+
+.ant-config-provider {
+    height: 100% !important;
+}
+
+/* 스크롤바가 레이아웃을 깨지지 않도록 설정 */
+.right_panel, .html_content {
+    scrollbar-gutter: stable;
 }