diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx index ada6bbfe..760e46cd 100644 --- a/src/renderer/src/pages/game-details/gallery-slider.tsx +++ b/src/renderer/src/pages/game-details/gallery-slider.tsx @@ -110,7 +110,9 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) { } className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i + (gameDetails.movies ? gameDetails.movies.length : 0) ? styles.gallerySliderMediaPreviewActive : ""}`} src={image.path_full} - style={{ translate: `${-85 * mediaIndex}%` }} + style={{ + translate: `${mediaIndex >= mediaCount - 3 ? -85 * (mediaCount - 4) : -85 * mediaIndex}%`, + }} /> ) )} diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts index f6422c9b..de939578 100644 --- a/src/renderer/src/pages/game-details/game-details.css.ts +++ b/src/renderer/src/pages/game-details/game-details.css.ts @@ -135,6 +135,7 @@ export const gallerySliderMediaPreview = style({ flexShrink: 0, flexGrow: 0, opacity: 0.3, + paddingRight: "0.5rem", transition: "translate 300ms ease-in-out", ":hover": { opacity: 1,