From 08ad2abdd1b41466cd21a2e3bd6241bf60c429c9 Mon Sep 17 00:00:00 2001
From: kmh <kmh@wace.me>
Date: Wed, 18 Mar 2026 16:25:13 +0900
Subject: [PATCH] refactor: improve SplitPanelLayoutComponent for better
 responsiveness and layout handling

- Removed unnecessary div wrappers to streamline the layout structure.
- Adjusted table minimum width calculations to ensure better responsiveness across different screen sizes.
- Enhanced column width handling to provide a more consistent and flexible user experience.

These changes aim to refine the overall layout and usability of the SplitPanelLayoutComponent, ensuring it adapts more effectively to varying content and screen dimensions.
---
 .../SplitPanelLayoutComponent.tsx             | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index aa293ce6..254255af 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -3896,13 +3896,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     const canDragLeftGroupedColumns = !isDesignMode && columnsToShow.length > 1;
                     if (groupedLeftData.length > 0) {
                       return (
-                        <div className="overflow-auto">
+                        <>
                           {groupedLeftData.map((group, groupIdx) => (
                             <div key={groupIdx} className="mb-4">
                               <div className="bg-muted px-3 py-2 text-sm font-semibold">
                                 {group.groupKey} ({group.count}개)
                               </div>
-                              <table className="divide-border min-w-full divide-y">
+                              <table className="divide-border min-w-full divide-y" style={{ minWidth: `${Math.max(columnsToShow.length * 120, 400)}px` }}>
                                 <thead className="bg-muted">
                                   <tr>
                                     {columnsToShow.map((col, idx) => {
@@ -4016,7 +4016,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               </table>
                             </div>
                           ))}
-                        </div>
+                        </>
                       );
                     }
 
@@ -4027,8 +4027,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         componentConfig.leftPanel?.showDelete !== false);
                     const canDragLeftColumns = !isDesignMode && columnsToShow.length > 1;
                     return (
-                      <div className="overflow-auto">
-                        <table className="divide-border min-w-full divide-y">
+                        <table className="divide-border min-w-full divide-y" style={{ minWidth: `${Math.max(columnsToShow.length * 120, 400)}px` }}>
                           <thead className="bg-muted sticky top-0 z-10">
                             <tr>
                               {columnsToShow.map((col, idx) => {
@@ -4135,7 +4134,6 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             })}
                           </tbody>
                         </table>
-                      </div>
                     );
                   })()
                 )}
@@ -5189,19 +5187,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       columnsToShow = [...keyCols, ...applyRuntimeOrder(dataCols, "main")];
                     }
 
-                    // 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
-                    const rightTotalColWidth = columnsToShow.reduce((sum, col) => {
-                      const w = col.width && col.width <= 100 ? col.width : 0;
-                      return sum + w;
-                    }, 0);
-
                     const rightConfigColumnStart = columnsToShow.filter((c: any) => c._isKeyColumn).length;
                     const canDragRightColumns = displayColumns.length > 0;
 
                     return (
                       <div className="flex h-full w-full flex-col">
                         <div className="min-h-0 flex-1 overflow-auto">
-                          <table className="min-w-full">
+                          <table className="min-w-full" style={{ minWidth: `${Math.max(columnsToShow.length * 120, 400)}px` }}>
                             <thead className="sticky top-0 z-10">
                               <tr className="border-border/60 border-b-2">
                                 {columnsToShow.map((col, idx) => {
@@ -5221,7 +5213,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         isDragging && "opacity-50",
                                       )}
                                       style={{
-                                        width: col.width && col.width <= 100 ? `${col.width}%` : "auto",
+                                        minWidth: col.width ? `${col.width}px` : "80px",
                                         textAlign: col.align || "left",
                                       }}
                                       draggable={isDraggable}
@@ -5387,14 +5379,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     return filteredData.length > 0 ? (
                       <div className="flex h-full w-full flex-col">
                         <div className="min-h-0 flex-1 overflow-auto">
-                          <table className="min-w-full text-sm">
+                          <table className="min-w-full text-sm" style={{ minWidth: `${Math.max(columnsToDisplay.length * 120, 400)}px` }}>
                             <thead className="bg-background sticky top-0 z-10">
                               <tr className="border-border/60 border-b-2">
                                 {columnsToDisplay.map((col) => (
                                   <th
                                     key={col.name}
                                     className="text-muted-foreground px-3 py-[7px] text-left text-[9px] font-bold tracking-[0.04em] whitespace-nowrap uppercase"
-                                    style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }}
+                                    style={{ minWidth: col.width ? `${col.width}px` : "80px" }}
                                   >
                                     {col.label}
                                   </th>