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:
parent
9d7ec613db
commit
764e0ae568
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue