[enhancement]: add codec column for tracks

src/renderer/components/grid-carousel/index.tsx

@@ -115,6 +115,7 @@ export const SwiperGridCarousel = ({
     isLoading,
     uniqueId,
 }: SwiperGridCarouselProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
     const swiperRef = useRef<SwiperCore | any>(null);
     const playButtonBehavior = usePlayButtonBehavior();
     const handlePlayQueueAdd = usePlayQueueAdd();
@@ -247,7 +248,9 @@ export const SwiperGridCarousel = ({
 
     useLayoutEffect(() => {
         const handleResize = () => {
-            const { activeIndex, params, slides, width } =
+            // Use the container div ref and not swiper width, as this value is more accurate
+            const width = containerRef.current?.clientWidth;
+            const { activeIndex, params, slides } =
                 (swiperRef.current as SwiperCore | undefined) ?? {};
 
             if (width) {
@@ -279,6 +282,7 @@ export const SwiperGridCarousel = ({
             className="grid-carousel"
             spacing="md"
         >
+            <div ref={containerRef}>
                 {title ? (
                     <Title
                         {...title}
@@ -314,6 +318,7 @@ export const SwiperGridCarousel = ({
                         );
                     })}
                 </Swiper>
+            </div>
         </CarouselContainer>
     );
 };