fix: few minor ui issues in dark theme

frontend/src/pages/CollectionsPage/CollectionCard.tsx

@@ -168,7 +168,13 @@ export default function CollectionCard({ collection, theme, previewMode, onUpdat
           {collection.system_key && (
             <LockIcon sx={{ fontSize: 14, color: "text.disabled", flexShrink: 0 }} />
           )}
-          <Typography variant="body2" fontWeight={600} noWrap title={displayName}>
+          <Typography
+            variant="body2"
+            fontWeight={600}
+            noWrap
+            title={displayName}
+            sx={{ color: (muiTheme) => muiTheme.thingport.headingText }}
+          >
             {displayName}
           </Typography>
         </Stack>

frontend/src/pages/DownloadPage/index.tsx

@@ -100,7 +100,9 @@ export default function DownloadPage() {
       <Stack direction="row" spacing={1.5} alignItems="flex-start">
         <CableIcon color="primary" sx={{ mt: 0.5 }} />
         <Box>
-          <Typography variant="h6" fontWeight={600}>{t("download.pageTitle")}</Typography>
+          <Typography variant="h6" fontWeight={600} sx={{ color: (muiTheme) => muiTheme.thingport.headingText }}>
+            {t("download.pageTitle")}
+          </Typography>
           <Typography variant="body2" color="text.secondary">{t("download.intro")}</Typography>
         </Box>
       </Stack>

frontend/src/pages/ModelDetailPage/ModelSidePanel.tsx

@@ -91,6 +91,7 @@ export default function ModelSidePanel({ print, onSelectCategory, onUnauthorized
             sx={{
               width: "fit-content",
               cursor: print.author ? "pointer" : "default",
+              color: (muiTheme) => muiTheme.thingport.headingText,
               ...(print.author ? { "&:hover": { color: "primary.main" } } : undefined),
             }}
             onClick={() => print.author && navigate(`/authors/${print.author.id}`)}
@@ -117,7 +118,7 @@ export default function ModelSidePanel({ print, onSelectCategory, onUnauthorized
                 py: 0.25,
                 mx: -0.5,
                 gap: 0.75,
-                color: "text.primary",
+                color: (muiTheme) => muiTheme.thingport.headingText,
                 "&:hover": { color: "primary.main" },
               }}
             >

frontend/src/pages/ModelDetailPage/index.tsx

@@ -124,15 +124,42 @@ export default function ModelDetailPage({ theme, onSelectCategory, onUnauthorize
           alignItems: "start",
         }}
       >
-        <Box>
-          <Box sx={{ position: "relative", width: "100%", aspectRatio: "16 / 10", borderRadius: "12px", overflow: "hidden", bgcolor: "action.hover" }}>
+        {/* minWidth: 0 -- without it, a grid item defaults to min-width: auto, so a preview image
+            with huge intrinsic pixel dimensions could still force this column wider than its "2fr"
+            share (and skew the whole two-column layout) even though the image itself is capped
+            below. */}
+        <Box sx={{ minWidth: 0 }}>
+          <Box sx={{ position: "relative", width: "100%", aspectRatio: "16 / 10", borderRadius: "12px", overflow: "hidden", bgcolor: "background.paper" }}>
             {hasImages ? (
-              <Box
-                component="img"
-                src={printsApi.fileUrl(activeImage.url)}
-                alt={print.title || print.name}
-                sx={{ width: "100%", height: "100%", objectFit: "contain" }}
-              />
+              <>
+                {/* A blurred, edge-to-edge crop of the same image behind the sharp contained one --
+                    the common "photo viewer" backdrop that fills the letterboxed bars around any
+                    image whose aspect ratio doesn't match this box's 16:10, instead of showing flat
+                    background color. scale(1.15) pushes the blur's own soft edge outside the box
+                    so no unblurred fringe peeks in. */}
+                <Box
+                  component="img"
+                  src={printsApi.fileUrl(activeImage.url)}
+                  alt=""
+                  aria-hidden="true"
+                  sx={{
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    maxWidth: "100%",
+                    objectFit: "cover",
+                    filter: "blur(30px)",
+                    transform: "scale(1.15)",
+                  }}
+                />
+                <Box
+                  component="img"
+                  src={printsApi.fileUrl(activeImage.url)}
+                  alt={print.title || print.name}
+                  sx={{ position: "absolute", inset: 0, width: "100%", height: "100%", maxWidth: "100%", objectFit: "contain" }}
+                />
+              </>
             ) : (
               firstPlate && renderPreviewContent(print, "modal", theme, t, "automatic", firstPlate)
             )}
@@ -212,7 +239,7 @@ export default function ModelDetailPage({ theme, onSelectCategory, onUnauthorize
                     component="img"
                     src={printsApi.fileUrl(image.url)}
                     alt=""
-                    sx={{ width: "100%", height: "100%", objectFit: "cover" }}
+                    sx={{ width: "100%", height: "100%", maxWidth: "100%", objectFit: "cover" }}
                   />
                 </ButtonBase>
               ))}
@@ -267,7 +294,18 @@ export default function ModelDetailPage({ theme, onSelectCategory, onUnauthorize
                     size="small"
                     variant="outlined"
                     onClick={() => navigate(`/models/tags/${encodeURIComponent(tag)}`)}
-                    sx={{ bgcolor: "background.paper", borderColor: "divider", color: "text.primary" }}
+                    sx={{
+                      bgcolor: "background.paper",
+                      borderColor: "divider",
+                      color: "text.primary",
+                      // Chip's "clickable" hover/focus/active tint is applied via a same-specificity
+                      // (two-class) selector of its own, so a plain "&:hover" override here loses
+                      // the cascade -- !important is the deliberate escape hatch for that, not an
+                      // accident.
+                      "&:hover, &:focus-visible, &:active": {
+                        backgroundColor: (muiTheme) => `${muiTheme.palette.background.paper} !important`,
+                      },
+                    }}
                   />
                 ))}
               </Stack>

frontend/src/pages/ProfilePage/LanguagePicker.tsx

@@ -13,9 +13,14 @@ export default function LanguagePicker() {
   const { t, i18n } = useTranslation("app");
   return (
     <Box>
-      <Typography variant="subtitle1" fontWeight={600}>{t("profile.language.heading")}</Typography>
+      <Typography variant="subtitle1" fontWeight={600} sx={{ color: (muiTheme) => muiTheme.thingport.headingText }}>
+        {t("profile.language.heading")}
+      </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>{t("profile.language.subtitle")}</Typography>
-      <Paper variant="outlined" sx={{ p: 2.5 }}>
+      <Paper
+        variant="outlined"
+        sx={{ p: 2.5, borderColor: (muiTheme) => (muiTheme.palette.mode === "dark" ? "transparent" : "divider") }}
+      >
         <Stack spacing={1}>
           {SUPPORTED_LANGUAGES.map(lang => {
             const selected = (i18n.resolvedLanguage || i18n.language || "").startsWith(lang.code);

frontend/src/pages/ProfilePage/MakerworldCookieSection.tsx

@@ -91,12 +91,17 @@ export default function MakerworldCookieSection({ cookie, onUpdateMakerWorld, on
 
   return (
     <Box>
-      <Typography variant="subtitle1" fontWeight={600}>{t("profile.makerworld.heading")}</Typography>
+      <Typography variant="subtitle1" fontWeight={600} sx={{ color: (muiTheme) => muiTheme.thingport.headingText }}>
+        {t("profile.makerworld.heading")}
+      </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
         {t("profile.makerworld.description")}
       </Typography>
 
-      <Paper variant="outlined" sx={{ p: 2.5 }}>
+      <Paper
+        variant="outlined"
+        sx={{ p: 2.5, borderColor: (muiTheme) => (muiTheme.palette.mode === "dark" ? "transparent" : "divider") }}
+      >
         {editing ? (
           <Stack spacing={1.5}>
             <TextField

frontend/src/pages/ProfilePage/SlicerPicker.tsx

@@ -68,11 +68,16 @@ export default function SlicerPicker({ onUnauthorized }: Props) {
 
   return (
     <Box>
-      <Typography variant="subtitle1" fontWeight={600}>{t("profile.slicer.heading")}</Typography>
+      <Typography variant="subtitle1" fontWeight={600} sx={{ color: (muiTheme) => muiTheme.thingport.headingText }}>
+        {t("profile.slicer.heading")}
+      </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
         {t("profile.slicer.description")}
       </Typography>
-      <Paper variant="outlined" sx={{ p: 2.5 }}>
+      <Paper
+        variant="outlined"
+        sx={{ p: 2.5, borderColor: (muiTheme) => (muiTheme.palette.mode === "dark" ? "transparent" : "divider") }}
+      >
         <Stack direction="row" spacing={1.5} alignItems="center" flexWrap="wrap" useFlexGap>
           <FormControl size="small" disabled={loading || saving} sx={{ minWidth: 220 }}>
             <InputLabel id="profile-slicer-select-label">{t("profile.slicer.label")}</InputLabel>

frontend/src/pages/ProfilePage/index.tsx

@@ -36,7 +36,9 @@ export default function ProfilePage({ user, makerworldCookie, onUpdateMakerWorld
           {user?.display_name?.[0]?.toUpperCase()}
         </Avatar>
         <Box>
-          <Typography variant="subtitle1" fontWeight={600}>{user?.display_name}</Typography>
+          <Typography variant="subtitle1" fontWeight={600} sx={{ color: (muiTheme) => muiTheme.thingport.headingText }}>
+            {user?.display_name}
+          </Typography>
           <Typography variant="body2" color="text.secondary">{user?.email}</Typography>
         </Box>
       </Stack>