Update app.py

app.py

@@ -495,111 +495,6 @@ def execute_unified_search(base_std, base_ver, base_cat, comp_std, comp_ver, com
 # ==========================================
 # 4. UI Layout & Event Binding
 # ==========================================
-js_resizable = """
-function() {
-    console.log("🛠️ [최종 수정] 열 조절 이벤트 방어막 가동!");
-
-    function findAllTables(root) {
-        let tables = [];
-        const elements = root.querySelectorAll('*');
-        elements.forEach(el => {
-            if (el.tagName && el.tagName.toLowerCase() === 'table') {
-                tables.push(el);
-            }
-            if (el.shadowRoot) {
-                tables = tables.concat(findAllTables(el.shadowRoot));
-            }
-        });
-        return tables;
-    }
-
-    const attachResizers = () => {
-        let tables = findAllTables(document);
-        if (tables.length === 0) return;
-
-        tables.forEach(table => {
-            if (table.dataset.resizable === 'true') return;
-            
-            // 표 전체의 제약을 풉니다
-            table.style.tableLayout = 'fixed';
-            table.style.width = 'max-content';
-            table.style.minWidth = '100%';
-            
-            const headers = table.querySelectorAll('thead th, tr:first-child th, tr:first-child td');
-            
-            headers.forEach(th => {
-                if (th.querySelector('.resizer')) return;
-
-                const resizer = document.createElement('div');
-                resizer.className = 'resizer';
-                resizer.style.width = '12px';
-                resizer.style.height = '100%';
-                resizer.style.position = 'absolute';
-                resizer.style.right = '0px';
-                resizer.style.top = '0px';
-                resizer.style.cursor = 'col-resize';
-                resizer.style.zIndex = '999999';
-                resizer.style.backgroundColor = 'rgba(255, 0, 0, 0.6)'; 
-                
-                th.style.position = 'relative';
-                th.style.overflow = 'visible';
-                th.appendChild(resizer);
-
-                let startX, startWidth;
-
-                function onMouseDown(e) {
-                    // [핵심 해결책] 브라우저의 텍스트 드래그나 다른 이벤트를 강제로 막습니다.
-                    e.preventDefault(); 
-                    e.stopPropagation();
-
-                    startX = e.clientX || e.pageX;
-                    startWidth = th.getBoundingClientRect().width;
-                    
-                    document.addEventListener('mousemove', onMouseMove);
-                    document.addEventListener('mouseup', onMouseUp);
-                    
-                    resizer.style.backgroundColor = '#1a73e8'; 
-                    document.body.style.cursor = 'col-resize'; // 마우스가 화면 어디있든 리사이즈 커서 유지
-                }
-
-                function onMouseMove(e) {
-                    // [핵심 해결책] 이벤트를 계속 붙잡아 둡니다.
-                    e.preventDefault();
-
-                    const currentX = e.clientX || e.pageX;
-                    const width = Math.max(30, startWidth + (currentX - startX));
-                    
-                    th.style.width = width + 'px';
-                    th.style.minWidth = width + 'px';
-                    th.style.maxWidth = width + 'px';
-                }
-
-                function onMouseUp() {
-                    document.removeEventListener('mousemove', onMouseMove);
-                    document.removeEventListener('mouseup', onMouseUp);
-                    
-                    resizer.style.backgroundColor = 'rgba(255, 0, 0, 0.6)'; 
-                    document.body.style.cursor = ''; // 커서 원상복구
-                }
-
-                resizer.addEventListener('mousedown', onMouseDown);
-            });
-            
-            table.dataset.resizable = 'true';
-        });
-    };
-
-    let attempts = 0;
-    const interval = setInterval(() => {
-        attachResizers();
-        attempts++;
-        if (attempts > 50) clearInterval(interval);
-    }, 200);
-
-    return []; 
-}
-"""
-
 with gr.Blocks() as demo:
     gr.Markdown("# 📜 Regulation Viewer")
 
@@ -633,11 +528,12 @@ with gr.Blocks() as demo:
     base_category.change(fn=update_comp_category_dropdown, inputs=comp_change_triggers, outputs=[comp_category])
     comp_version.change(fn=update_comp_category_dropdown, inputs=comp_change_triggers, outputs=[comp_category])
 
+    # JS를 완전히 제거하고 순수하게 파이썬 로직만 바인딩
     search_btn.click(
         fn=execute_unified_search,
         inputs=[base_standard, base_version, base_category, comp_standard, comp_version, comp_category],
         outputs=[output_df]
-    ).then(fn=None, js=js_resizable)
+    )
 
     base_reset_btn.click(fn=reset_base_selections, inputs=None, outputs=[base_standard, base_version, base_category])
     comp_reset_btn.click(fn=reset_comp_selections, inputs=None, outputs=[comp_standard, comp_version, comp_category])
@@ -648,10 +544,44 @@ with gr.Blocks() as demo:
 # ==========================================
 css = """
 table { 
+    table-layout: auto !important; 
+    width: max-content !important; 
+    min-width: 100% !important;
+}
+
+th, td {
+    min-width: 150px; 
+}
+
+table:has(th:nth-last-child(2):first-child),
+table:has(th:nth-last-child(4):first-child),
+table:has(th:nth-last-child(5):first-child),
+table:has(th:nth-last-child(6):first-child) {
+    table-layout: fixed !important;
     width: 100% !important;
-    border-collapse: collapse;
 }
 
+table th:nth-last-child(2):first-child, table td:nth-last-child(2):first-child { width: 15% !important; min-width: 0 !important; } 
+table th:nth-last-child(1), table td:nth-last-child(1) { width: 85% !important; min-width: 0 !important; }
+
+table th:nth-child(1):nth-last-child(4), table td:nth-child(1):nth-last-child(4) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(2):nth-last-child(3), table td:nth-child(2):nth-last-child(3) { width: 40% !important; min-width: 0 !important; } 
+table th:nth-child(3):nth-last-child(2), table td:nth-child(3):nth-last-child(2) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(4):nth-last-child(1), table td:nth-child(4):nth-last-child(1) { width: 40% !important; min-width: 0 !important; }
+
+table th:nth-child(1):nth-last-child(5), table td:nth-child(1):nth-last-child(5) { width: 15% !important; min-width: 0 !important; } 
+table th:nth-child(2):nth-last-child(4), table td:nth-child(2):nth-last-child(4) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(3):nth-last-child(3), table td:nth-child(3):nth-last-child(3) { width: 30% !important; min-width: 0 !important; } 
+table th:nth-child(4):nth-last-child(2), table td:nth-child(4):nth-last-child(2) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(5):nth-last-child(1), table td:nth-child(5):nth-last-child(1) { width: 35% !important; min-width: 0 !important; }
+
+table th:nth-child(1):nth-last-child(6), table td:nth-child(1):nth-last-child(6) { width: 8% !important; min-width: 0 !important; } 
+table th:nth-child(2):nth-last-child(5), table td:nth-child(2):nth-last-child(5) { width: 15% !important; min-width: 0 !important; } 
+table th:nth-child(3):nth-last-child(4), table td:nth-child(3):nth-last-child(4) { width: 27% !important; min-width: 0 !important; } 
+table th:nth-child(4):nth-last-child(3), table td:nth-child(4):nth-last-child(3) { width: 8% !important; min-width: 0 !important; } 
+table th:nth-child(5):nth-last-child(2), table td:nth-child(5):nth-last-child(2) { width: 15% !important; min-width: 0 !important; } 
+table th:nth-child(6):nth-last-child(1), table td:nth-child(6):nth-last-child(1) { width: 27% !important; min-width: 0 !important; }
+
 thead th { 
     font-size: 18px !important;
     position: sticky;
@@ -659,10 +589,20 @@ thead th {
     background: white; 
     z-index: 10;
 } 
-td, th { 
+.dataframe { 
+    max-height: none !important; 
+    overflow-y: visible !important; 
+    overflow-x: auto !important; 
+    display: block;
+} 
+.dataframe > div { 
+    max-height: none !important; 
+    overflow: visible !important; 
+} 
+td { 
     font-size: 18px !important;
-    word-break: break-word !important; 
-    white-space: normal !important; 
+    white-space: pre-wrap !important;
+    word-break: keep-all !important; 
     line-height: 1.6; 
     padding: 10px; 
     vertical-align: top !important;
@@ -672,62 +612,6 @@ td img {
     display: block;
     max-width: none !important;
 }
-
-.gradio-container .dataframe, 
-.gradio-container .dataframe div,
-.gradio-container thead,
-.gradio-container tr,
-.gradio-container th {
-    overflow: visible !important;
-}
-.dataframe { 
-    max-height: none !important; 
-    overflow-y: visible !important; 
-    overflow-x: auto !important; 
-    display: block;
-} 
-
-.resizer {
-    background-color: rgba(255, 0, 0, 0.5); 
-    width: 8px !important;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    cursor: col-resize;
-    z-index: 9999 !important;
-}
-.resizer:hover, .resizer.resizing {
-    background-color: #1a73e8 !important; 
-}
-
-table:has(th:nth-last-child(2):first-child),
-table:has(th:nth-last-child(4):first-child),
-table:has(th:nth-last-child(5):first-child),
-table:has(th:nth-last-child(6):first-child) {
-    table-layout: fixed;
-}
-
-table th:nth-last-child(2):first-child, table td:nth-last-child(2):first-child { width: 15%; } 
-table th:nth-last-child(1), table td:nth-last-child(1) { width: 85%; }
-
-table th:nth-child(1):nth-last-child(4), table td:nth-child(1):nth-last-child(4) { width: 10%; } 
-table th:nth-child(2):nth-last-child(3), table td:nth-child(2):nth-last-child(3) { width: 40%; } 
-table th:nth-child(3):nth-last-child(2), table td:nth-child(3):nth-last-child(2) { width: 10%; } 
-table th:nth-child(4):nth-last-child(1), table td:nth-child(4):nth-last-child(1) { width: 40%; }
-
-table th:nth-child(1):nth-last-child(5), table td:nth-child(1):nth-last-child(5) { width: 15%; } 
-table th:nth-child(2):nth-last-child(4), table td:nth-child(2):nth-last-child(4) { width: 10%; } 
-table th:nth-child(3):nth-last-child(3), table td:nth-child(3):nth-last-child(3) { width: 30%; } 
-table th:nth-child(4):nth-last-child(2), table td:nth-child(4):nth-last-child(2) { width: 10%; } 
-table th:nth-child(5):nth-last-child(1), table td:nth-child(5):nth-last-child(1) { width: 35%; }
-
-table th:nth-child(1):nth-last-child(6), table td:nth-child(1):nth-last-child(6) { width: 8%; } 
-table th:nth-child(2):nth-last-child(5), table td:nth-child(2):nth-last-child(5) { width: 15%; } 
-table th:nth-child(3):nth-last-child(4), table td:nth-child(3):nth-last-child(4) { width: 27%; } 
-table th:nth-child(4):nth-last-child(3), table td:nth-child(4):nth-last-child(3) { width: 8%; } 
-table th:nth-child(5):nth-last-child(2), table td:nth-child(5):nth-last-child(2) { width: 15%; } 
-table th:nth-child(6):nth-last-child(1), table td:nth-child(6):nth-last-child(1) { width: 27%; }
 """
 
 if __name__ == "__main__":