Merge remote-tracking branch 'origin/feat/widget-modernization' into feat/stack-immich-fit-mobile

apps/docs/docs/widgets/immich-album-carousel/index.mdx

@@ -33,7 +33,7 @@ import screen from "./img/screen.png";
 
 <WidgetInteractionGuide />
 
-Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view groups previous, pause or resume, and next together and adds a thumbnail strip for quick navigation.
+Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view displays the complete photo without cropping, groups previous, pause or resume, and next together, and includes every loaded photo in its thumbnail strip.
 
 ### Adding the widget
 

packages/widgets/src/immich/album-carousel/component.module.css

@@ -14,6 +14,11 @@
   background-color: var(--mantine-color-gray-8);
 }
 
+.carouselImage[data-fit="contain"] {
+  object-fit: contain;
+  background-color: var(--mantine-color-black);
+}
+
 .photoInfo {
   position: absolute;
   bottom: 0;

packages/widgets/src/immich/album-carousel/component.tsx

@@ -153,7 +153,12 @@ function Carousel({
   return (
     <Stack w="100%" h="100%" gap={0}>
       <Box w="100%" style={{ flex: 1, minHeight: 0 }} className={classes.carouselContainer}>
-        <Image src={currentAsset.publicLink} alt={t("albumPhoto")} className={classes.carouselImage} />
+        <Image
+          src={currentAsset.publicLink}
+          alt={t("albumPhoto")}
+          className={classes.carouselImage}
+          data-fit={advanced ? "contain" : "cover"}
+        />
 
         {assets.length > 1 && (
           <Group
@@ -219,7 +224,7 @@ function Carousel({
       {advanced && (
         <ScrollArea type="never" scrollbarSize={0} px="xs" py={6}>
           <Group gap={6} wrap="nowrap">
-            {assets.slice(0, 24).map((asset, index) => (
+            {assets.map((asset, index) => (
               <UnstyledButton
                 key={asset.id}
                 onClick={() => setCurrentIndex(index)}