diff --git a/frontend/src/features/gallery/components/HoverableImage.tsx b/frontend/src/features/gallery/components/HoverableImage.tsx
index 5748b51aab..c9765ab6fc 100644
--- a/frontend/src/features/gallery/components/HoverableImage.tsx
+++ b/frontend/src/features/gallery/components/HoverableImage.tsx
@@ -52,6 +52,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
galleryImageMinimumWidth,
mayDeleteImage,
isLightBoxOpen,
+ shouldUseSingleGalleryColumn,
} = useAppSelector(hoverableImageSelector);
const { image, isSelected } = props;
const { url, thumbnail, uuid, metadata } = image;
@@ -171,7 +172,9 @@ const HoverableImage = memo((props: HoverableImageProps) => {
>
+
+ ) =>
+ dispatch(
+ setShouldUseSingleGalleryColumn(e.target.checked)
+ )
+ }
+ />
+
diff --git a/frontend/src/features/gallery/store/gallerySlice.ts b/frontend/src/features/gallery/store/gallerySlice.ts
index 901a58e124..932c45210e 100644
--- a/frontend/src/features/gallery/store/gallerySlice.ts
+++ b/frontend/src/features/gallery/store/gallerySlice.ts
@@ -42,6 +42,7 @@ export interface GalleryState {
};
currentCategory: GalleryCategory;
galleryWidth: number;
+ shouldUseSingleGalleryColumn: boolean;
}
const initialState: GalleryState = {
@@ -69,6 +70,7 @@ const initialState: GalleryState = {
},
},
galleryWidth: 300,
+ shouldUseSingleGalleryColumn: false,
};
export const gallerySlice = createSlice({
@@ -263,6 +265,12 @@ export const gallerySlice = createSlice({
setGalleryWidth: (state, action: PayloadAction) => {
state.galleryWidth = action.payload;
},
+ setShouldUseSingleGalleryColumn: (
+ state,
+ action: PayloadAction
+ ) => {
+ state.shouldUseSingleGalleryColumn = action.payload;
+ },
},
});
@@ -284,6 +292,7 @@ export const {
setShouldAutoSwitchToNewImages,
setCurrentCategory,
setGalleryWidth,
+ setShouldUseSingleGalleryColumn,
} = gallerySlice.actions;
export default gallerySlice.reducer;
diff --git a/frontend/src/features/gallery/store/gallerySliceSelectors.ts b/frontend/src/features/gallery/store/gallerySliceSelectors.ts
index ccb97172d6..3485a0c027 100644
--- a/frontend/src/features/gallery/store/gallerySliceSelectors.ts
+++ b/frontend/src/features/gallery/store/gallerySliceSelectors.ts
@@ -27,6 +27,7 @@ export const imageGallerySelector = createSelector(
shouldHoldGalleryOpen,
shouldAutoSwitchToNewImages,
galleryWidth,
+ shouldUseSingleGalleryColumn,
} = gallery;
const { isLightBoxOpen } = options;
@@ -38,7 +39,9 @@ export const imageGallerySelector = createSelector(
galleryScrollPosition,
galleryImageMinimumWidth,
galleryImageObjectFit,
- galleryGridTemplateColumns: `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, auto))`,
+ galleryGridTemplateColumns: shouldUseSingleGalleryColumn
+ ? 'auto'
+ : `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, auto))`,
activeTabName,
shouldHoldGalleryOpen,
shouldAutoSwitchToNewImages,
@@ -54,6 +57,7 @@ export const imageGallerySelector = createSelector(
(activeTabName === 'unifiedCanvas' && shouldPinGallery)
? false
: true,
+ shouldUseSingleGalleryColumn,
};
},
{
@@ -80,6 +84,7 @@ export const hoverableImageSelector = createSelector(
mayDeleteImage: system.isConnected && !system.isProcessing,
galleryImageObjectFit: gallery.galleryImageObjectFit,
galleryImageMinimumWidth: gallery.galleryImageMinimumWidth,
+ shouldUseSingleGalleryColumn: gallery.shouldUseSingleGalleryColumn,
activeTabName,
isLightBoxOpen: options.isLightBoxOpen,
};