kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix: 텍스트 줄바꿈 문제 방지 - 모든 셀에 whitespace-nowrap 적용 

- 테이블 헤더와 데이터 셀 모두에 whitespace-nowrap 적용
- 모바일에서도 텍스트가 2줄로 깨지지 않음
- overflow-hidden + text-ellipsis로 긴 텍스트 처리
- TableListComponent와 InteractiveDataTable 모두 적용

이제 화면을 줄여도 텍스트가 항상 1줄로 유지됨
This commit is contained in:
kjs 2025-11-03 13:34:02 +09:00
parent 40efb391ea
commit 714511c3cf
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/screen/InteractiveDataTable.tsx
View File

@ -2080,7 +2080,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
return ( return (
<TableCell <TableCell
key={column.id} key={column.id}
className="px-4 text-sm font-medium text-gray-900" className="px-4 text-sm font-medium text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis"
style={{ textAlign: isNumeric ? 'right' : 'left' }} style={{ textAlign: isNumeric ? 'right' : 'left' }}
> >
{formatCellValue(row[column.columnName], column, row)} {formatCellValue(row[column.columnName], column, row)}

4
frontend/lib/registry/components/table-list/TableListComponent.tsx
View File

@ -1063,7 +1063,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
key={column.columnName} key={column.columnName}
ref={(el) => (columnRefs.current[column.columnName] = el)} ref={(el) => (columnRefs.current[column.columnName] = el)}
className={cn( className={cn(
"relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis select-none sm:h-12 sm:text-sm sm:whitespace-nowrap", "relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis whitespace-nowrap select-none sm:h-12 sm:text-sm",
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3", column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
column.sortable && "cursor-pointer hover:bg-muted/70 transition-colors" column.sortable && "cursor-pointer hover:bg-muted/70 transition-colors"
)} )}
@ -1210,7 +1210,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
<td <td
key={column.columnName} key={column.columnName}
className={cn( className={cn(
"h-14 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:text-sm sm:whitespace-nowrap", "h-14 text-xs text-foreground overflow-hidden text-ellipsis whitespace-nowrap sm:h-16 sm:text-sm",
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3" column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
)} )}
style={{ style={{