From ba3c4f3d036bc67c3b09180961226735dd8db266 Mon Sep 17 00:00:00 2001
From: CJ <tedabed@gmail.com>
Date: Sun, 21 Jan 2024 12:59:40 -0600
Subject: [PATCH] remaining pages support

---
 .../src/components/Galleries/GalleryCard.tsx  | 31 ++++++++++++++++-
 .../src/components/Galleries/GalleryList.tsx  |  9 +++--
 ui/v2.5/src/components/Images/ImageCard.tsx   | 32 +++++++++++++++++-
 ui/v2.5/src/components/Images/ImageList.tsx   |  8 ++++-
 ui/v2.5/src/components/Movies/MovieCard.tsx   | 19 ++++++++++-
 ui/v2.5/src/components/Movies/MovieList.tsx   |  9 +++--
 .../components/Performers/PerformerCard.tsx   |  9 ++---
 ui/v2.5/src/components/Scenes/styles.scss     |  2 +-
 ui/v2.5/src/components/Shared/GridCard.tsx    |  8 +++--
 ui/v2.5/src/components/Studios/StudioCard.tsx | 20 ++++++++++-
 ui/v2.5/src/components/Studios/StudioList.tsx |  9 +++--
 ui/v2.5/src/components/Tags/TagCard.tsx       | 33 ++++++++++++++++++-
 ui/v2.5/src/components/Tags/TagList.tsx       |  9 +++--
 13 files changed, 175 insertions(+), 23 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
index 8dd49534195..cd55c2279df 100644
--- a/ui/v2.5/src/components/Galleries/GalleryCard.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
@@ -1,5 +1,5 @@
 import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import { GridCard } from "../Shared/GridCard";
@@ -17,6 +17,7 @@ import { galleryTitle } from "src/core/galleries";
 
 interface IProps {
   gallery: GQL.SlimGalleryDataFragment;
+  containerWidth?: number;
   selecting?: boolean;
   selected?: boolean | undefined;
   zoomIndex?: number;
@@ -26,6 +27,33 @@ interface IProps {
 export const GalleryCard: React.FC<IProps> = (props) => {
   const { configuration } = React.useContext(ConfigurationContext);
   const showStudioAsText = configuration?.interface.showStudioAsText ?? false;
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!props.containerWidth || props.zoomIndex === undefined) return;
+
+    let containerPadding = 30;
+    let containerWidth = props.containerWidth - containerPadding;
+    let zoomValue = props.zoomIndex;
+    let maxCardWidth: number;
+    let paddingOffset = 10;
+    switch (zoomValue) {
+      case 0:
+        maxCardWidth = 240;
+        break;
+      case 1:
+        maxCardWidth = 340;
+        break;
+      case 2:
+        maxCardWidth = 480;
+        break;
+      case 3:
+        maxCardWidth = 640;
+    }
+    let maxElementsOnRow = Math.ceil(containerWidth / maxCardWidth!);
+    let fittedCardWidth = containerWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [props, props.containerWidth, props.zoomIndex]);
 
   function maybeRenderScenePopoverButton() {
     if (props.gallery.scenes.length === 0) return;
@@ -153,6 +181,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
     <GridCard
       className={`gallery-card zoom-${props.zoomIndex}`}
       url={`/galleries/${props.gallery.id}`}
+      width={cardWidth}
       title={galleryTitle(props.gallery)}
       linkClassName="gallery-card-header"
       image={
diff --git a/ui/v2.5/src/components/Galleries/GalleryList.tsx b/ui/v2.5/src/components/Galleries/GalleryList.tsx
index e6f2d3fe0ee..1e44a0a5b6e 100644
--- a/ui/v2.5/src/components/Galleries/GalleryList.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
 import { useHistory } from "react-router-dom";
@@ -18,6 +18,7 @@ import { EditGalleriesDialog } from "./EditGalleriesDialog";
 import { DeleteGalleriesDialog } from "./DeleteGalleriesDialog";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { GalleryListTable } from "./GalleryListTable";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 const GalleryItemList = makeItemList({
   filterMode: GQL.FilterMode.Galleries,
@@ -106,6 +107,9 @@ export const GalleryList: React.FC<IGalleryList> = ({
     setIsExportDialogOpen(true);
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderContent(
     result: GQL.FindGalleriesQueryResult,
     filter: ListFilterModel,
@@ -133,10 +137,11 @@ export const GalleryList: React.FC<IGalleryList> = ({
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center">
+          <div className="row justify-content-center" ref={componentRef}>
             {result.data.findGalleries.galleries.map((gallery) => (
               <GalleryCard
                 key={gallery.id}
+                containerWidth={width}
                 gallery={gallery}
                 zoomIndex={filter.zoomIndex}
                 selecting={selectedIds.size > 0}
diff --git a/ui/v2.5/src/components/Images/ImageCard.tsx b/ui/v2.5/src/components/Images/ImageCard.tsx
index 47f7eac7a79..22ffa09ec1d 100644
--- a/ui/v2.5/src/components/Images/ImageCard.tsx
+++ b/ui/v2.5/src/components/Images/ImageCard.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useMemo } from "react";
+import React, { MouseEvent, useEffect, useMemo, useState } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
@@ -20,6 +20,7 @@ import { TruncatedText } from "../Shared/TruncatedText";
 
 interface IImageCardProps {
   image: GQL.SlimImageDataFragment;
+  containerWidth?: number;
   selecting?: boolean;
   selected?: boolean | undefined;
   zoomIndex: number;
@@ -30,6 +31,34 @@ interface IImageCardProps {
 export const ImageCard: React.FC<IImageCardProps> = (
   props: IImageCardProps
 ) => {
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!props.containerWidth || props.zoomIndex === undefined) return;
+
+    let containerPadding = 30;
+    let containerWidth = props.containerWidth - containerPadding;
+    let zoomValue = props.zoomIndex;
+    let maxCardWidth: number;
+    let paddingOffset = 10;
+    switch (zoomValue) {
+      case 0:
+        maxCardWidth = 240;
+        break;
+      case 1:
+        maxCardWidth = 340;
+        break;
+      case 2:
+        maxCardWidth = 480;
+        break;
+      case 3:
+        maxCardWidth = 640;
+    }
+    let maxElementsOnRow = Math.ceil(containerWidth / maxCardWidth!);
+    let fittedCardWidth = containerWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [props, props.containerWidth, props.zoomIndex]);
+
   const file = useMemo(
     () =>
       props.image.visual_files.length > 0
@@ -153,6 +182,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
     <GridCard
       className={`image-card zoom-${props.zoomIndex}`}
       url={`/images/${props.image.id}`}
+      width={cardWidth}
       title={objectTitle(props.image)}
       linkClassName="image-card-link"
       image={
diff --git a/ui/v2.5/src/components/Images/ImageList.tsx b/ui/v2.5/src/components/Images/ImageList.tsx
index 2b3b359a6ea..de9879e3f6a 100644
--- a/ui/v2.5/src/components/Images/ImageList.tsx
+++ b/ui/v2.5/src/components/Images/ImageList.tsx
@@ -4,6 +4,7 @@ import React, {
   useMemo,
   MouseEvent,
   useContext,
+  useRef,
 } from "react";
 import { FormattedNumber, useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
@@ -32,6 +33,7 @@ import { objectTitle } from "src/core/files";
 import TextUtils from "src/utils/text";
 import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "src/core/config";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 interface IImageWallProps {
   images: GQL.SlimImageDataFragment[];
@@ -196,6 +198,9 @@ const ImageListImages: React.FC<IImageListImages> = ({
     ev.preventDefault();
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderImageCard(
     index: number,
     image: GQL.SlimImageDataFragment,
@@ -204,6 +209,7 @@ const ImageListImages: React.FC<IImageListImages> = ({
     return (
       <ImageCard
         key={image.id}
+        containerWidth={width}
         image={image}
         zoomIndex={zoomIndex}
         selecting={selectedIds.size > 0}
@@ -220,7 +226,7 @@ const ImageListImages: React.FC<IImageListImages> = ({
 
   if (filter.displayMode === DisplayMode.Grid) {
     return (
-      <div className="row justify-content-center">
+      <div className="row justify-content-center" ref={componentRef}>
         {images.map((image, index) =>
           renderImageCard(index, image, filter.zoomIndex)
         )}
diff --git a/ui/v2.5/src/components/Movies/MovieCard.tsx b/ui/v2.5/src/components/Movies/MovieCard.tsx
index e86856f2ec8..bbcc016999b 100644
--- a/ui/v2.5/src/components/Movies/MovieCard.tsx
+++ b/ui/v2.5/src/components/Movies/MovieCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
 import { GridCard } from "../Shared/GridCard";
@@ -12,6 +12,7 @@ import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";
 
 interface IProps {
   movie: GQL.MovieDataFragment;
+  containerWidth?: number;
   sceneIndex?: number;
   selecting?: boolean;
   selected?: boolean;
@@ -19,6 +20,21 @@ interface IProps {
 }
 
 export const MovieCard: React.FC<IProps> = (props: IProps) => {
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!props.containerWidth) return;
+
+    let containerPadding = 30;
+    let maxUsableWidth = props.containerWidth - containerPadding;
+    let maxCardWidth = 250;
+    let paddingOffset = 10;
+
+    let maxElementsOnRow = Math.ceil(maxUsableWidth / maxCardWidth!);
+    let fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [props, props.containerWidth]);
+
   function maybeRenderSceneNumber() {
     if (!props.sceneIndex) return;
 
@@ -71,6 +87,7 @@ export const MovieCard: React.FC<IProps> = (props: IProps) => {
     <GridCard
       className="movie-card"
       url={`/movies/${props.movie.id}`}
+      width={cardWidth}
       title={props.movie.name}
       linkClassName="movie-card-header"
       image={
diff --git a/ui/v2.5/src/components/Movies/MovieList.tsx b/ui/v2.5/src/components/Movies/MovieList.tsx
index c5b6c8dedf6..b0a9506d450 100644
--- a/ui/v2.5/src/components/Movies/MovieList.tsx
+++ b/ui/v2.5/src/components/Movies/MovieList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
 import Mousetrap from "mousetrap";
@@ -20,6 +20,7 @@ import { ExportDialog } from "../Shared/ExportDialog";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
 import { MovieCard } from "./MovieCard";
 import { EditMoviesDialog } from "./EditMoviesDialog";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 const MovieItemList = makeItemList({
   filterMode: GQL.FilterMode.Movies,
@@ -103,6 +104,9 @@ export const MovieList: React.FC<IMovieList> = ({ filterHook, alterQuery }) => {
     setIsExportDialogOpen(true);
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderContent(
     result: GQL.FindMoviesQueryResult,
     filter: ListFilterModel,
@@ -130,10 +134,11 @@ export const MovieList: React.FC<IMovieList> = ({ filterHook, alterQuery }) => {
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center">
+          <div className="row justify-content-center" ref={componentRef}>
             {result.data.findMovies.movies.map((p) => (
               <MovieCard
                 key={p.id}
+                containerWidth={width}
                 movie={p}
                 selecting={selectedIds.size > 0}
                 selected={selectedIds.has(p.id)}
diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx
index 3bcc6304fd1..3c29309fbbe 100644
--- a/ui/v2.5/src/components/Performers/PerformerCard.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx
@@ -34,8 +34,6 @@ export interface IPerformerCardExtraCriteria {
 interface IPerformerCardProps {
   performer: GQL.PerformerDataFragment;
   containerWidth?: number;
-  previewHeight?: number;
-  setPreviewHeight?: React.Dispatch<React.SetStateAction<number | undefined>>;
   ageFromDate?: string;
   selecting?: boolean;
   selected?: boolean;
@@ -68,14 +66,13 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     { id: ageL10nId },
     { age, years_old: ageL10String }
   );
-  
+
   const [updatePerformer] = usePerformerUpdate();
   const [cardWidth, setCardWidth] = useState<number>();
   const [imageHeight, setImageHeight] = useState<number>();
 
   useEffect(() => {
-    if (!containerWidth)
-      return;
+    if (!containerWidth) return;
 
     let containerPadding = 30;
     let maxUsableWidth = containerWidth - containerPadding;
@@ -83,7 +80,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     let paddingOffset = 10;
 
     let maxElementsOnRow = Math.ceil(maxUsableWidth / maxCardWidth!);
-    let fittedCardWidth = (maxUsableWidth / maxElementsOnRow) - paddingOffset;
+    let fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
     let fittedimageHeight = (fittedCardWidth / 2) * 3;
     setCardWidth(fittedCardWidth);
     setImageHeight(fittedimageHeight);
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index 147472f578e..67e335a5808 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -99,7 +99,7 @@ textarea.scene-description {
     max-height: 150px;
     object-fit: contain;
     vertical-align: middle;
-    width: 320px;
+    width: 100%;
 
     @media (max-width: 576px) {
       width: 100%;
diff --git a/ui/v2.5/src/components/Shared/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard.tsx
index 99849d76b04..12a6107068a 100644
--- a/ui/v2.5/src/components/Shared/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard.tsx
@@ -27,8 +27,12 @@ interface ICardProps {
 export const useContainerDimensions = (
   myRef: React.RefObject<HTMLDivElement>
 ) => {
-  // 15 pixel offset accounts for scrollbar
-  const [dimensions, setDimensions] = useState({ width: window.innerWidth-15, height: 0 });
+  const overflow = window?.visualViewport?.height! < window.innerHeight;
+  const defaultWidth = overflow ? window.innerWidth - 15 : window.innerWidth;
+  const [dimensions, setDimensions] = useState({
+    width: defaultWidth,
+    height: 0,
+  });
 
   useEffect(() => {
     const getDimensions = () => ({
diff --git a/ui/v2.5/src/components/Studios/StudioCard.tsx b/ui/v2.5/src/components/Studios/StudioCard.tsx
index 1acae33ea4b..0a217ea42c7 100644
--- a/ui/v2.5/src/components/Studios/StudioCard.tsx
+++ b/ui/v2.5/src/components/Studios/StudioCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import NavUtils from "src/utils/navigation";
@@ -10,6 +10,7 @@ import { RatingBanner } from "../Shared/RatingBanner";
 
 interface IProps {
   studio: GQL.StudioDataFragment;
+  containerWidth?: number;
   hideParent?: boolean;
   selecting?: boolean;
   selected?: boolean;
@@ -59,11 +60,27 @@ function maybeRenderChildren(studio: GQL.StudioDataFragment) {
 
 export const StudioCard: React.FC<IProps> = ({
   studio,
+  containerWidth,
   hideParent,
   selecting,
   selected,
   onSelectedChanged,
 }) => {
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!containerWidth) return;
+
+    let containerPadding = 30;
+    let maxUsableWidth = containerWidth - containerPadding;
+    let maxCardWidth = 340;
+    let paddingOffset = 10;
+
+    let maxElementsOnRow = Math.ceil(maxUsableWidth / maxCardWidth!);
+    let fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [containerWidth]);
+
   function maybeRenderScenesPopoverButton() {
     if (!studio.scene_count) return;
 
@@ -156,6 +173,7 @@ export const StudioCard: React.FC<IProps> = ({
     <GridCard
       className="studio-card"
       url={`/studios/${studio.id}`}
+      width={cardWidth}
       title={studio.name}
       linkClassName="studio-card-header"
       image={
diff --git a/ui/v2.5/src/components/Studios/StudioList.tsx b/ui/v2.5/src/components/Studios/StudioList.tsx
index 19710724b86..182ec2627d2 100644
--- a/ui/v2.5/src/components/Studios/StudioList.tsx
+++ b/ui/v2.5/src/components/Studios/StudioList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
 import { useHistory } from "react-router-dom";
@@ -20,6 +20,7 @@ import { ExportDialog } from "../Shared/ExportDialog";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
 import { StudioCard } from "./StudioCard";
 import { StudioTagger } from "../Tagger/studios/StudioTagger";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 const StudioItemList = makeItemList({
   filterMode: GQL.FilterMode.Studios,
@@ -108,6 +109,9 @@ export const StudioList: React.FC<IStudioList> = ({
     setIsExportDialogOpen(true);
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderContent(
     result: GQL.FindStudiosQueryResult,
     filter: ListFilterModel,
@@ -135,10 +139,11 @@ export const StudioList: React.FC<IStudioList> = ({
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row px-xl-5 justify-content-center">
+          <div className="row justify-content-center" ref={componentRef}>
             {result.data.findStudios.studios.map((studio) => (
               <StudioCard
                 key={studio.id}
+                containerWidth={width}
                 studio={studio}
                 hideParent={fromParent}
                 selecting={selectedIds.size > 0}
diff --git a/ui/v2.5/src/components/Tags/TagCard.tsx b/ui/v2.5/src/components/Tags/TagCard.tsx
index 11c3c5223a8..353f18a151f 100644
--- a/ui/v2.5/src/components/Tags/TagCard.tsx
+++ b/ui/v2.5/src/components/Tags/TagCard.tsx
@@ -1,5 +1,5 @@
 import { ButtonGroup } from "react-bootstrap";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import NavUtils from "src/utils/navigation";
@@ -10,6 +10,7 @@ import { PopoverCountButton } from "../Shared/PopoverCountButton";
 
 interface IProps {
   tag: GQL.TagDataFragment;
+  containerWidth?: number;
   zoomIndex: number;
   selecting?: boolean;
   selected?: boolean;
@@ -18,11 +19,40 @@ interface IProps {
 
 export const TagCard: React.FC<IProps> = ({
   tag,
+  containerWidth,
   zoomIndex,
   selecting,
   selected,
   onSelectedChanged,
 }) => {
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!containerWidth || zoomIndex === undefined) return;
+
+    let containerPadding = 30;
+    let maxUsableWidth = containerWidth - containerPadding;
+    let zoomValue = zoomIndex;
+    let maxCardWidth: number;
+    let paddingOffset = 10;
+    switch (zoomValue) {
+      case 0:
+        maxCardWidth = 240;
+        break;
+      case 1:
+        maxCardWidth = 340;
+        break;
+      case 2:
+        maxCardWidth = 480;
+        break;
+      case 3:
+        maxCardWidth = 640;
+    }
+    let maxElementsOnRow = Math.ceil(maxUsableWidth / maxCardWidth!);
+    let fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [containerWidth, zoomIndex]);
+
   function maybeRenderDescription() {
     if (tag.description) {
       return (
@@ -181,6 +211,7 @@ export const TagCard: React.FC<IProps> = ({
     <GridCard
       className={`tag-card zoom-${zoomIndex}`}
       url={`/tags/${tag.id}`}
+      width={cardWidth}
       title={tag.name ?? ""}
       linkClassName="tag-card-header"
       image={
diff --git a/ui/v2.5/src/components/Tags/TagList.tsx b/ui/v2.5/src/components/Tags/TagList.tsx
index 869282418c0..d7998e756f5 100644
--- a/ui/v2.5/src/components/Tags/TagList.tsx
+++ b/ui/v2.5/src/components/Tags/TagList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import cloneDeep from "lodash-es/cloneDeep";
 import Mousetrap from "mousetrap";
 import { ListFilterModel } from "src/models/list-filter/filter";
@@ -28,6 +28,7 @@ import { TagCard } from "./TagCard";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { tagRelationHook } from "../../core/tags";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 interface ITagList {
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
@@ -161,6 +162,9 @@ export const TagList: React.FC<ITagList> = ({ filterHook, alterQuery }) => {
     }
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderContent(
     result: GQL.FindTagsQueryResult,
     filter: ListFilterModel,
@@ -188,10 +192,11 @@ export const TagList: React.FC<ITagList> = ({ filterHook, alterQuery }) => {
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row px-xl-5 justify-content-center">
+          <div className="row justify-content-center" ref={componentRef}>
             {result.data.findTags.tags.map((tag) => (
               <TagCard
                 key={tag.id}
+                containerWidth={width}
                 tag={tag}
                 zoomIndex={filter.zoomIndex}
                 selecting={selectedIds.size > 0}