💄 Moving buttons above slide #2610

equinor · Jan 23, 2025 · d7f33ca · d7f33ca
1 parent 3a7d0b0
commit d7f33ca
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -342,8 +342,8 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         ${
           variant === 'image' && displayMode === 'single'
             ? 'grid grid-flow-row'
-            : 'px-6 lg:px-layout-sm flex flex-col-reverse max-w-viewport'
-        }
+            : 'px-6 lg:px-layout-sm flex flex-col sm:flex-col-reverse max-w-viewport'
+            }
         
         `,
         className,
@@ -356,7 +356,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         className={`
           ${
           variant === 'image' && displayMode === 'single'
-            ? 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] mx-auto col-start-1 col-end-1 row-start-2 row-end-2'
+            ? 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] mx-auto col-start-1 col-end-1 row-start-1 row-end-1 sm:row-start-2 sm:row-end-2'
             : ''
         } pt-2 sm:pt-6 pb-2 ${items.length === 3 ? 'lg:hidden' : ''} flex ${
           internalAutoRotation ? 'justify-between' : 'justify-end'

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
@@ -60,7 +60,7 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
             className={`${
               active ? 'block' : 'hidden'
             } ${
-              captionPositionUnderImage ? '-bottom-[198px] sm:-bottom-[158px] mb-4 min-w-full max-w-full sm:min-w-[40%] sm:max-w-[60%] lg:left-16' : 'bottom-0 lg:left-8'
+              captionPositionUnderImage ? '-bottom-[110px] sm:-bottom-[158px] mb-auto min-w-full max-w-full sm:min-w-[40%] sm:max-w-[60%] lg:left-16' : 'bottom-0 lg:left-8'
             } absolute left-4 right-4 lg:right-8 mb-12 lg:mb-8
              `}
           >
@@ -71,15 +71,15 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
                   : 'bg-spruce-wood-70/75 text-slate-80  px-8 pt-6 w-fit flex flex-col max-w-text',
               )}
             >
-              {caption && <span className={`text-lg ${attribution ? 'pb-2' : 'pb-14'}`}>{caption}</span>}
-              {attribution && <span className={`text-sm ${caption ? 'pb-8' : 'pb-16'}`}>{attribution}</span>}
+              {caption && <span className={`${captionPositionUnderImage ? 'text-sm line-clamp-1 sm:line-clamp-1' : 'text-lg'} ${attribution ? 'pb-2' : 'pb-14'}`}>{caption}</span>}
+              {attribution && <span className={`${captionPositionUnderImage ? 'line-clamp-3' : 'text-lg'} text-sm line-clamp-3 ${caption ? 'pb-8' : 'pb-16'}`}>{attribution}</span>}
             </div>
           </figcaption>
         </figure>
       ) : (
         <div>
-        <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-        <GridLinkArrow action={action} variant="circle" />
+          <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
+          <GridLinkArrow action={action} variant="circle" />
         </div>
       )}
     </li>