style: adjust panel and text sizes in Table Management and Column Detail components

- Increased the width of the left panel in the Table Management page from 240px to 280px for better visibility.
- Updated text sizes in the Table Management page for table names and descriptions to enhance readability.
- Expanded the width of the right panel in the Table Management page from 320px to 380px to accommodate additional content.
- Adjusted text sizes in the Column Detail Panel for improved clarity and consistency.

These changes aim to enhance the user interface and improve the overall user experience in the table management section.
This commit is contained in:
kjs 2026-03-17 16:20:07 +09:00
parent 9d7ec613db
commit 764e0ae568
2 changed files with 6 additions and 6 deletions

View File

@ -1382,7 +1382,7 @@ export default function TableManagementPage() {
{/* 3패널 메인 */}
<div className="flex flex-1 overflow-hidden">
{/* 좌측: 테이블 목록 (240px) */}
<div className="bg-card flex w-[240px] min-w-[240px] flex-shrink-0 flex-col border-r">
<div className="bg-card flex w-[280px] min-w-[280px] flex-shrink-0 flex-col border-r">
{/* 검색 */}
<div className="flex-shrink-0 p-3 pb-0">
<div className="relative">
@ -1482,13 +1482,13 @@ export default function TableManagementPage() {
<div className="min-w-0 flex-1">
<div className="flex items-baseline gap-1">
<span className={cn(
"truncate text-[12px] leading-tight",
"truncate text-[16px] leading-tight",
isActive ? "font-bold" : "font-medium",
)}>
{table.displayName || table.tableName}
</span>
</div>
<div className="text-muted-foreground truncate font-mono text-[10px] leading-tight tracking-tight">
<div className="text-muted-foreground truncate font-mono text-[12px] leading-tight tracking-tight">
{table.tableName}
</div>
</div>
@ -1605,7 +1605,7 @@ export default function TableManagementPage() {
{/* 우측: 상세 패널 (selectedColumn 있을 때만) */}
{selectedColumn && (
<div className="w-[320px] min-w-[320px] flex-shrink-0 overflow-hidden">
<div className="w-[380px] min-w-[380px] flex-shrink-0 overflow-hidden">
<ColumnDetailPanel
column={columns.find((c) => c.columnName === selectedColumn) ?? null}
tables={tables}

View File

@ -126,12 +126,12 @@ export function ColumnDetailPanel({
{conf.iconChar}
</span>
<span className={cn(
"text-[11px] font-semibold leading-tight",
"text-[16px] font-semibold leading-tight",
isSelected ? "text-primary" : "text-foreground",
)}>
{conf.label}
</span>
<span className="text-[9px] leading-tight text-muted-foreground">
<span className="text-[12px] leading-tight text-muted-foreground">
{conf.desc}
</span>
</button>