fix: improve model item favorite icon

frontend/src/pages/ModelDetailPage/FavoriteButton.tsx

@@ -47,7 +47,7 @@ export default function FavoriteButton({ print, onUpdated, onUnauthorized }: Pro
             <CircularProgress size={18} />
           </IconButton>
         ) : (
-          <StarToggle active={print.is_favorite} onClick={toggle} ariaLabel={label} />
+          <StarToggle active={print.is_favorite} onClick={toggle} ariaLabel={label} size={26} />
         )}
       </span>
     </Tooltip>

frontend/src/pages/ModelDetailPage/ModelActionsMenu.tsx

@@ -38,6 +38,10 @@ type Props = {
   /** Lets callers restyle the trigger button -- e.g. the Models grid's hover overlay, which
    *  needs to read over an arbitrary thumbnail instead of the detail page header's plain icon. */
   triggerSx?: SxProps<Theme>;
+  /** Overrides the trigger icon's glyph size in px -- default (undefined) keeps the standard
+   *  fontSize="small" (20px) used everywhere else. Only the Models grid hover overlay bumps
+   *  this, to stay legible now that it no longer sits on a dark circular backdrop. */
+  iconFontSize?: number;
 };
 
 /** The "..." menu for a model: "Open in {Slicer}" (launches the user's preferred slicer via its
@@ -46,7 +50,7 @@ type Props = {
  *  (confirm, then delete), and -- only for an imported print -- a divider then "Open in
  *  {Provider}" linking back to the original model page. Shared by the model detail page's header
  *  and the Models/Collection grids' per-card hover overlay. */
-export default function ModelActionsMenu({ print, onUnauthorized, onDeleted, triggerSx }: Props) {
+export default function ModelActionsMenu({ print, onUnauthorized, onDeleted, triggerSx, iconFontSize }: Props) {
   const { t } = useTranslation(["models", "common"]);
   const confirmDialog = useConfirm();
   const slicerPreference = useSlicerPreference();
@@ -146,7 +150,13 @@ export default function ModelActionsMenu({ print, onUnauthorized, onDeleted, tri
         disabled={deleting}
         sx={triggerSx}
       >
-        {deleting ? <CircularProgress size={18} /> : <MoreVertIcon fontSize="small" />}
+        {deleting ? (
+          <CircularProgress size={18} />
+        ) : iconFontSize ? (
+          <MoreVertIcon sx={{ fontSize: iconFontSize }} />
+        ) : (
+          <MoreVertIcon fontSize="small" />
+        )}
       </IconButton>
       <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={closeMenu}>
         <MenuItem component="a" href={openInSlicerHref} onClick={closeMenu} disabled={!openInSlicerHref}>

frontend/src/pages/ModelsPage/ModelCard.tsx

@@ -30,7 +30,10 @@ type Props = {
   onUnauthorized?: () => void;
 };
 
-const hoverActionBg = { bgcolor: "rgba(0, 0, 0, 0.55)", borderRadius: "50%" };
+// No solid backdrop behind the hover-overlay icons (a card's thumbnail can be any color) -- a
+// drop-shadow keeps them legible against light and dark images alike without boxing them in.
+const hoverIconShadow = { filter: "drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85))" };
+const HOVER_ICON_SIZE = 26;
 
 export default function ModelCard({ item, theme, previewMode, onDeleted, onFavoriteChange, onUnauthorized }: Props) {
   const { t } = useTranslation(["models", "common"]);
@@ -131,24 +134,30 @@ export default function ModelCard({ item, theme, previewMode, onDeleted, onFavor
         }}
       >
         <Tooltip title={favoriteLabel}>
-          <Box sx={hoverActionBg}>
+          <Box>
             {favoriteBusy ? (
-              <IconButton size="small" disabled>
+              <IconButton size="small" disabled sx={hoverIconShadow}>
                 <CircularProgress size={16} sx={{ color: "#fff" }} />
               </IconButton>
             ) : (
-              <StarToggle active={item.is_favorite} onClick={toggleFavorite} ariaLabel={favoriteLabel} inactiveColor="#fff" />
+              <StarToggle
+                active={item.is_favorite}
+                onClick={toggleFavorite}
+                ariaLabel={favoriteLabel}
+                inactiveColor="#fff"
+                size={HOVER_ICON_SIZE}
+                sx={hoverIconShadow}
+              />
             )}
           </Box>
         </Tooltip>
-        <Box sx={hoverActionBg}>
-          <ModelActionsMenu
-            print={item}
-            onUnauthorized={onUnauthorized}
-            onDeleted={() => onDeleted?.(item.id)}
-            triggerSx={{ color: "#fff" }}
-          />
-        </Box>
+        <ModelActionsMenu
+          print={item}
+          onUnauthorized={onUnauthorized}
+          onDeleted={() => onDeleted?.(item.id)}
+          triggerSx={{ color: "#fff", ...hoverIconShadow }}
+          iconFontSize={HOVER_ICON_SIZE}
+        />
       </Stack>
       <Box sx={{ p: 1.5 }}>
         <Typography variant="body2" fontWeight={600} noWrap title={item.title || item.name}>