fix(grid-layout): auto-fit column widths with sizeColumnsToFit and flex proportions to eliminate text clipping

src/frontend/src/components/QuantDataGrid.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
 import GridHeaderToolbar from './grid/GridHeaderToolbar.vue';
-import type { ColDef, GridApi, GridReadyEvent, CellValueChangedEvent, RowSelectionOptions } from 'ag-grid-community';
+import type { ColDef, GridApi, GridReadyEvent, FirstDataRenderedEvent, CellValueChangedEvent, RowSelectionOptions } from 'ag-grid-community';
 
 const props = defineProps<{
   columnDefs: ColDef[];
@@ -29,6 +29,13 @@ const normalizedRowSelection = computed<RowSelectionOptions>(() => {
 
 const onGridReady = (params: GridReadyEvent) => {
   gridApi.value = params.api;
+  setTimeout(() => {
+    params.api.sizeColumnsToFit();
+  }, 100);
+};
+
+const onFirstDataRendered = (params: FirstDataRenderedEvent) => {
+  params.api.sizeColumnsToFit();
 };
 
 const onSelectionChanged = () => {
@@ -59,6 +66,7 @@ const resetGridState = () => {
   gridApi.value.setFilterModel(null);
   gridApi.value.resetColumnState();
   quickFilterText.value = '';
+  gridApi.value.sizeColumnsToFit();
 };
 
 const autoSizeColumns = () => {
@@ -89,7 +97,7 @@ defineExpose({ exportToExcel: exportToCsv, resetGridState, autoSizeColumns, grid
       @exportCsv="exportToCsv"
     />
 
-    <!-- AG Grid Container (v36 legacy theme & object rowSelection) -->
+    <!-- AG Grid Container (Auto-Fit Columns & Compact High-Density View) -->
     <div class="flex-1 ag-theme-alpine w-full">
       <ag-grid-vue
         class="h-full w-full"
@@ -97,15 +105,18 @@ defineExpose({ exportToExcel: exportToCsv, resetGridState, autoSizeColumns, grid
         :columnDefs="columnDefs"
         :rowData="rowData"
         :quickFilterText="quickFilterText"
+        :rowHeight="36"
+        :headerHeight="38"
         :defaultColDef="{
           resizable: true,
           sortable: true,
           filter: true,
           flex: 1,
-          minWidth: 100
+          minWidth: 90
         }"
         :rowSelection="normalizedRowSelection"
         @grid-ready="onGridReady"
+        @first-data-rendered="onFirstDataRendered"
         @selection-changed="onSelectionChanged"
         @cell-value-changed="onCellValueChanged"
         @cell-double-clicked="onCellDoubleClicked"
@@ -116,8 +127,25 @@ defineExpose({ exportToExcel: exportToCsv, resetGridState, autoSizeColumns, grid
 
 <style scoped>
 .ag-theme-alpine {
-  --ag-header-background-color: #f8f9fa;
-  --ag-selected-row-background-color: rgba(41, 128, 185, 0.1);
+  --ag-header-background-color: #F8FAFC;
+  --ag-header-foreground-color: #1E293B;
+  --ag-selected-row-background-color: rgba(37, 99, 235, 0.12);
+  --ag-row-hover-color: rgba(226, 232, 240, 0.5);
   --ag-font-size: 12px;
+  --ag-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --ag-border-color: #E2E8F0;
+}
+
+:deep(.ag-cell) {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+:deep(.ag-header-cell-label) {
+  font-weight: 700;
+  color: #334155;
 }
 </style>

src/frontend/src/views/SystemSettingsView.vue

@@ -31,12 +31,13 @@ const modalItem = ref({
 });
 
 const columnDefs = ref<ColDef[]>([
-  { field: 'id', headerName: 'ID', width: 50, sortable: true },
-  { field: 'domain', headerName: '도메인', width: 75, cellRenderer: (p: any) => `<span class="domain-tag ${p.value.toLowerCase()}">${p.value}</span>` },
+  { field: 'id', headerName: 'ID', minWidth: 50, flex: 0.5, sortable: true },
+  { field: 'domain', headerName: '도메인', minWidth: 80, flex: 0.8, cellRenderer: (p: any) => `<span class="domain-tag ${p.value.toLowerCase()}">${p.value}</span>` },
   { 
     field: 'setting_key', 
     headerName: '종목/원장 키 (Symbol/Key)', 
-    width: 170, 
+    minWidth: 220, 
+    flex: 2, 
     sortable: true, 
     filter: true,
     cellRenderer: (p: any) => {
@@ -46,12 +47,13 @@ const columnDefs = ref<ColDef[]>([
       return `<strong>${p.value}</strong>`;
     }
   },
-  { field: 'category', headerName: '카테고리', width: 95 },
-  { field: 'setting_value', headerName: '설정/평가금액 (KRW)', width: 130 },
+  { field: 'category', headerName: '카테고리', minWidth: 100, flex: 1 },
+  { field: 'setting_value', headerName: '설정/평가금액 (KRW)', minWidth: 140, flex: 1.3 },
   { 
     field: 'return_pct', 
     headerName: '수익률 %', 
-    width: 90,
+    minWidth: 90, 
+    flex: 0.9,
     cellRenderer: (p: any) => {
       if (p.value !== undefined && p.value !== null && p.value !== 0) {
         const isPos = p.value > 0;
@@ -63,14 +65,15 @@ const columnDefs = ref<ColDef[]>([
   { 
     field: 'status', 
     headerName: '상태 칩', 
-    width: 95,
+    minWidth: 95, 
+    flex: 0.9,
     cellRenderer: (params: any) => {
       const type = params.value === 'ACTIVE' ? 'PASS' : params.value === 'WARNING' ? 'WARNING' : 'BLOCKED';
       return `<span class="status-chip ${type.toLowerCase()}">${params.value}</span>`;
     }
   },
-  { field: 'maker_checker', headerName: '승인상태', width: 90 },
-  { field: 'lock_version', headerName: 'Ver', width: 50 }
+  { field: 'maker_checker', headerName: '승인상태', minWidth: 90, flex: 0.9 },
+  { field: 'lock_version', headerName: 'Ver', minWidth: 55, flex: 0.5 }
 ]);
 
 const handleRowSelect = (rows: any[]) => {