fix: 텍스트 줄바꿈 문제 방지 - 모든 셀에 whitespace-nowrap 적용
- 테이블 헤더와 데이터 셀 모두에 whitespace-nowrap 적용 - 모바일에서도 텍스트가 2줄로 깨지지 않음 - overflow-hidden + text-ellipsis로 긴 텍스트 처리 - TableListComponent와 InteractiveDataTable 모두 적용 이제 화면을 줄여도 텍스트가 항상 1줄로 유지됨
This commit is contained in:
parent
40efb391ea
commit
714511c3cf
|
|
@ -2080,7 +2080,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
|||
return (
|
||||
<TableCell
|
||||
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' }}
|
||||
>
|
||||
{formatCellValue(row[column.columnName], column, row)}
|
||||
|
|
|
|||
|
|
@ -1063,7 +1063,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
key={column.columnName}
|
||||
ref={(el) => (columnRefs.current[column.columnName] = el)}
|
||||
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.sortable && "cursor-pointer hover:bg-muted/70 transition-colors"
|
||||
)}
|
||||
|
|
@ -1210,7 +1210,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
<td
|
||||
key={column.columnName}
|
||||
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"
|
||||
)}
|
||||
style={{
|
||||
|
|
|
|||
Loading…
Reference in New Issue