diff --git a/frontend/src/App/State/AppState.ts b/frontend/src/App/State/AppState.ts index 45536b0a5..27a78d7aa 100644 --- a/frontend/src/App/State/AppState.ts +++ b/frontend/src/App/State/AppState.ts @@ -44,7 +44,16 @@ export interface CustomFilter { filers: PropertyFilter[]; } +export interface AppSectionState { + dimensions: { + isSmallScreen: boolean; + width: number; + height: number; + }; +} + interface AppState { + app: AppSectionState; calendar: CalendarAppState; commands: CommandAppState; history: HistoryAppState; diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx index 87df52090..56b60b438 100644 --- a/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx +++ b/frontend/src/Movie/Index/Posters/MovieIndexPosters.tsx @@ -256,13 +256,18 @@ export default function MovieIndexPosters(props: MovieIndexPostersProps) { if (current) { const width = current.clientWidth; const padding = bodyPadding - 5; + const finalWidth = width - padding * 2; + + if (Math.abs(size.width - finalWidth) < 20 || size.width === finalWidth) { + return; + } setSize({ - width: width - padding * 2, + width: finalWidth, height: window.innerHeight, }); } - }, [isSmallScreen, scrollerRef, bounds]); + }, [isSmallScreen, size, scrollerRef, bounds]); useEffect(() => { const currentScrollerRef = scrollerRef.current as HTMLElement; diff --git a/frontend/src/Store/Selectors/createDimensionsSelector.js b/frontend/src/Store/Selectors/createDimensionsSelector.ts similarity index 69% rename from frontend/src/Store/Selectors/createDimensionsSelector.js rename to frontend/src/Store/Selectors/createDimensionsSelector.ts index ce26b2e2c..b9602cb02 100644 --- a/frontend/src/Store/Selectors/createDimensionsSelector.js +++ b/frontend/src/Store/Selectors/createDimensionsSelector.ts @@ -1,8 +1,9 @@ import { createSelector } from 'reselect'; +import AppState from 'App/State/AppState'; function createDimensionsSelector() { return createSelector( - (state) => state.app.dimensions, + (state: AppState) => state.app.dimensions, (dimensions) => { return dimensions; }