diff --git a/src/components/grid.tsx b/src/components/grid.tsx index 6e14196..40476a3 100644 --- a/src/components/grid.tsx +++ b/src/components/grid.tsx @@ -43,6 +43,13 @@ export class Grid extends React.PureComponent { // [width][idx] -> badness private rowsMemo: Map> = new Map(); + componentDidUpdate(prevProps: Props) { + // The memoized rows depend on the image list; clear when the set changes + if (prevProps.images !== this.props.images) { + this.rowsMemo.clear(); + } + } + rows(idx: number): BadList { const targetHeight = this._rowHeight(); diff --git a/src/components/root.tsx b/src/components/root.tsx index 792e353..2526ba0 100644 --- a/src/components/root.tsx +++ b/src/components/root.tsx @@ -23,18 +23,27 @@ export class Root extends React.PureComponent { // innerWidth gets messed up when rotating phones from landscape -> portrait, // and chrome seems to not report innerWidth correctly when scrollbars are present private _viewWidth = (): number => { - return Math.min( + const widths = [ window.innerWidth, - window.outerWidth || Infinity, - document.body.clientWidth - ); + window.outerWidth, + document.documentElement?.clientWidth, + document.body?.clientWidth, + ].filter((w): w is number => typeof w === "number" && w > 0 && isFinite(w)); + + // Use the largest reasonable value to avoid shrinking the grid when a single + // measurement source temporarily reports something tiny. + return widths.length > 0 ? Math.max(...widths) : 0; }; private _viewHeight = (): number => { - return Math.min( - window.outerHeight || Infinity, - document.body.clientHeight || Infinity - ); + const heights = [ + window.innerHeight, + window.outerHeight, + document.documentElement?.clientHeight, + document.body?.clientHeight, + ].filter((h): h is number => typeof h === "number" && h > 0 && isFinite(h)); + + return heights.length > 0 ? Math.max(...heights) : 0; }; state: State = {