diff --git a/src/components/tiles/CategoryTile.jsx b/src/components/tiles/CategoryTile.jsx index d87b8b7..6f5c1dc 100644 --- a/src/components/tiles/CategoryTile.jsx +++ b/src/components/tiles/CategoryTile.jsx @@ -17,10 +17,21 @@ import { tileBaseSx } from 'dashgui/tiles'; /** * Top row (1/3): sort handle | settings toggle | move handle. + * Icons are pinned to exact thirds (left / center / right) so they stay + * evenly spread regardless of icon size or button padding. */ function TopBand({ onSettingsClick, settingsTab, terminalCount }) { const isTerminalMode = settingsTab >= 0 && settingsTab < terminalCount; const isPhotoMode = settingsTab === -2; + + const handleSx = { + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)', + color: 'common.white', + '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.15)' }, + }; + return ( @@ -48,7 +61,10 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount }) { disableRipple onClick={onSettingsClick} sx={{ - color: isTerminalMode || isPhotoMode ? 'primary.main' : 'action.active', + ...handleSx, + left: '50%', + transform: 'translate(-50%, -50%)', + color: isTerminalMode || isPhotoMode ? 'primary.main' : 'common.white', }} > {isTerminalMode ? ( @@ -63,7 +79,12 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount }) { className="droppable-handle" aria-label="In Unterkategorie ablegen" disableRipple - sx={{ cursor: 'grab', '&:active': { cursor: 'grabbing' } }} + sx={{ + ...handleSx, + right: 0, + cursor: 'grab', + '&:active': { cursor: 'grabbing' }, + }} >