u

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 (
     <Box
       sx={{
@@ -29,17 +40,19 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount }) {
         left: 0,
         right: 0,
         height: '33.33%',
-        display: 'flex',
+        bgcolor: 'rgba(0, 0, 0, 0.45)',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        px: 0.5,
       }}
     >
       <IconButton
         className="sortable-handle"
         aria-label="Verschieben"
         disableRipple
-        sx={{ cursor: 'grab', '&:active': { cursor: 'grabbing' } }}
+        sx={{
+          ...handleSx,
+          left: 0,
+          cursor: 'grab',
+          '&:active': { cursor: 'grabbing' },
+        }}
       >
         <DragHandleIcon sx={{ fontSize: 36 }} />
       </IconButton>
@@ -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' },
+        }}
       >
         <AccountTreeIcon sx={{ fontSize: 36 }} />
       </IconButton>