diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css index 5442cfacb..b9c367067 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css @@ -191,23 +191,54 @@ } .header-content { + display: flex; + align-items: center; overflow: hidden; text-overflow: ellipsis; + font-size: var(--theme-font-size-sm); white-space: nowrap; } .header-content.center { + justify-content: center; text-align: center; } .header-content.left { + justify-content: flex-start; text-align: left; } .header-content.right { + justify-content: flex-end; text-align: right; } +.header-icon-wrapper { + display: inline-flex; + flex-shrink: 0; + align-items: center; + font-size: var(--theme-font-size-sm); + line-height: 1; +} + +.header-icon-wrapper :global(svg) { + width: var(--theme-font-size-sm); + height: var(--theme-font-size-sm); +} + +.header-content.center .header-icon-wrapper { + justify-content: center; +} + +.header-content.left .header-icon-wrapper { + justify-content: flex-start; +} + +.header-content.right .header-icon-wrapper { + justify-content: flex-end; +} + .container :global(.hover-only), .container :global(.hover-only-flex) { display: none; diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx index f8e8f3629..20ed4aa2b 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx @@ -32,6 +32,7 @@ import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list'; import { ItemControls, ItemListItem } from '/@/renderer/components/item-list/types'; import { useDragDrop } from '/@/renderer/hooks/use-drag-drop'; +import { Flex } from '/@/shared/components/flex/flex'; import { Icon } from '/@/shared/components/icon/icon'; import { Skeleton } from '/@/shared/components/skeleton/skeleton'; import { Text } from '/@/shared/components/text/text'; @@ -653,7 +654,7 @@ export const TableColumnHeaderContainer = ( }, ) => { return ( -