From 42b51f104c531d2bd64f4e0cad8224a448a3adf8 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 9 Feb 2026 04:16:11 -0800 Subject: [PATCH] remove horizontal padding from favorite/rating/actions --- .../item-detail-list/item-detail.module.css | 5 +++++ .../item-list/item-detail-list/item-detail.tsx | 3 +++ .../item-list/item-detail-list/utils.ts | 16 +++++++++++++--- .../item-table-list-column.module.css | 10 ++++++++++ .../item-table-list/item-table-list-column.tsx | 4 ++++ 5 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.module.css b/src/renderer/components/item-list/item-detail-list/item-detail.module.css index 13777d556..a1e85f6c4 100644 --- a/src/renderer/components/item-list/item-detail-list/item-detail.module.css +++ b/src/renderer/components/item-list/item-detail-list/item-detail.module.css @@ -246,6 +246,11 @@ overflow: hidden; } +.row .track-cell-no-h-padding { + padding-right: 0; + padding-left: 0; +} + .track-row-dragging { opacity: 0.5; } diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.tsx b/src/renderer/components/item-list/item-detail-list/item-detail.tsx index a09b273d6..f4195186a 100644 --- a/src/renderer/components/item-list/item-detail-list/item-detail.tsx +++ b/src/renderer/components/item-list/item-detail-list/item-detail.tsx @@ -32,6 +32,7 @@ import { parseTableColumns } from '/@/renderer/components/item-list/helpers/pars import { getDetailListCellComponent } from '/@/renderer/components/item-list/item-detail-list/columns'; import { getTrackColumnFixed, + isNoHorizontalPaddingColumn, shouldShowHoverOnlyColumnContent, } from '/@/renderer/components/item-list/item-detail-list/utils'; import { @@ -250,6 +251,7 @@ const TrackRow = memo( const CellComponent = getDetailListCellComponent(col.id); const isTitleColumn = col.id === TableColumn.TITLE; const isImageColumn = col.id === TableColumn.IMAGE; + const isIconActionColumn = isNoHorizontalPaddingColumn(col.id); const showHoverContent = shouldShowHoverOnlyColumnContent( col.id, isRowHovered, @@ -278,6 +280,7 @@ const TrackRow = memo( className={clsx(styles.trackCell, { [styles.trackCellImage]: isImageColumn, [styles.trackCellMuted]: !isTitleColumn, + [styles.trackCellNoHPadding]: isIconActionColumn, [styles.trackCellVerticalBorderVisible]: enableVerticalBorders && !isLastColumn, [styles.trackCellWithVerticalBorder]: !isLastColumn, diff --git a/src/renderer/components/item-list/item-detail-list/utils.ts b/src/renderer/components/item-list/item-detail-list/utils.ts index ca30d7768..7796f6285 100644 --- a/src/renderer/components/item-list/item-detail-list/utils.ts +++ b/src/renderer/components/item-list/item-detail-list/utils.ts @@ -1,10 +1,10 @@ import { TableColumn } from '/@/shared/types/types'; const FIXED_TRACK_COLUMN_WIDTHS: Partial> = { - [TableColumn.ACTIONS]: 48, + [TableColumn.ACTIONS]: 32, [TableColumn.TRACK_NUMBER]: 56, - [TableColumn.USER_FAVORITE]: 48, - [TableColumn.USER_RATING]: 76, + [TableColumn.USER_FAVORITE]: 32, + [TableColumn.USER_RATING]: 64, }; const HOVER_ONLY_COLUMNS: TableColumn[] = [ @@ -13,6 +13,12 @@ const HOVER_ONLY_COLUMNS: TableColumn[] = [ TableColumn.USER_RATING, ]; +const NO_HORIZONTAL_PADDING_COLUMNS: TableColumn[] = [ + TableColumn.ACTIONS, + TableColumn.USER_FAVORITE, + TableColumn.USER_RATING, +]; + export function getTrackColumnFixed(columnId: TableColumn): { fixedWidth: number; isFixedColumn: boolean; @@ -23,6 +29,10 @@ export function getTrackColumnFixed(columnId: TableColumn): { : { fixedWidth: 0, isFixedColumn: false }; } +export function isNoHorizontalPaddingColumn(columnId: TableColumn): boolean { + return NO_HORIZONTAL_PADDING_COLUMNS.includes(columnId); +} + export function isTrackColumnHoverOnly(columnId: TableColumn): boolean { return HOVER_ONLY_COLUMNS.includes(columnId); } 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 58d0846f3..2306b8ab6 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 @@ -26,6 +26,11 @@ padding: var(--theme-spacing-xs) var(--theme-spacing-xl); } +.container.no-horizontal-padding { + padding-right: 0; + padding-left: 0; +} + .container.center { align-items: center; text-align: center; @@ -205,6 +210,11 @@ padding: 0 var(--theme-spacing-xl); } +.header-container.no-horizontal-padding { + padding-right: 0; + padding-left: 0; +} + .header-dragging { cursor: grabbing; opacity: 0.5; 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 7d1923e3e..86422b20f 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 @@ -26,6 +26,7 @@ import styles from './item-table-list-column.module.css'; import i18n from '/@/i18n/i18n'; import { useItemSelectionState } from '/@/renderer/components/item-list/helpers/item-list-state'; +import { isNoHorizontalPaddingColumn } from '/@/renderer/components/item-list/item-detail-list/utils'; import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column'; import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column'; import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column'; @@ -479,6 +480,7 @@ export const TableColumnTextContainer = ( [styles.dragging]: isDataRow && isDragging, [styles.large]: props.size === 'large', [styles.left]: props.columns[props.columnIndex].align === 'start', + [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type), [styles.paddingLg]: props.cellPadding === 'lg', [styles.paddingMd]: props.cellPadding === 'md', [styles.paddingSm]: props.cellPadding === 'sm', @@ -632,6 +634,7 @@ export const TableColumnContainer = ( [styles.dragging]: isDataRow && isDragging, [styles.large]: props.size === 'large', [styles.left]: props.columns[props.columnIndex].align === 'start', + [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type), [styles.paddingLg]: props.cellPadding === 'lg', [styles.paddingMd]: props.cellPadding === 'md', [styles.paddingSm]: props.cellPadding === 'sm', @@ -850,6 +853,7 @@ export const TableColumnHeaderContainer = ( [styles.headerDraggedOverLeft]: isDraggedOver === 'left', [styles.headerDraggedOverRight]: isDraggedOver === 'right', [styles.headerDragging]: isDragging, + [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type), [styles.paddingLg]: props.cellPadding === 'lg', [styles.paddingMd]: props.cellPadding === 'md', [styles.paddingSm]: props.cellPadding === 'sm',