diff --git a/src/FillSpace.jsx b/src/FillSpace.jsx index afadf94..724e661 100644 --- a/src/FillSpace.jsx +++ b/src/FillSpace.jsx @@ -264,14 +264,21 @@ class FillSpace extends Component { fillCount = Math.floor((fillHeight + measureGap) / (unitHeight + measureGap)); } - // Report total fitting count once per change (legacy mode). + // Report total fitting count once per change (legacy mode + paginated + // debug). Paginated callers use this to display the live measurement + // in a side tile without polling internal state. if ( - measureElement != null && typeof onMeasurement === 'function' && + (measureElement != null || paginated) && totalCount !== this.lastTotalCount ) { this.lastTotalCount = totalCount; - onMeasurement(totalCount); + onMeasurement(totalCount, { + height: finalHeight, + unitHeight, + pageSize: paginated && totalCount > 0 ? Math.max(minSize, totalCount) : this.state.pageSize, + measured: paginated ? totalCount > 0 : this.state.measured, + }); } // Paginated: fit count drives page size (min minPageSize). @@ -485,7 +492,12 @@ class FillSpace extends Component { ref={(el) => { this.paginationRef = el; }} - sx={{ mb: 1 }} + // Fixed single-line bar: the header height must not depend on the + // page count. Otherwise the first fit (e.g. "1-17") pushes the + // spacer down, the available height shrinks, and a second pass + // flips to "1-15". One pass: constant 44px, real values always + // rendered (only visibility is gated), no placeholder numbers. + sx={{ mb: 1, height: 44, overflow: 'hidden' }} > - - {showPagination ? offset + 1 : 1}– - {showPagination ? Math.min(offset + pageSize, total) : pageSize + 1} von{' '} - {showPagination ? total : pageSize + 1} + + {total === 0 ? '0' : `${offset + 1}–${Math.min(offset + pageSize, total)}`} von{' '} + {total} this._goToPage(page)} color="primary" size="large" onMouseDown={(e) => e.preventDefault()} sx={{ + flexShrink: 0, + maxWidth: '100%', + overflowX: 'auto', + scrollbarWidth: 'none', + '&::-webkit-scrollbar': { display: 'none' }, + '& .MuiPagination-ul': { flexWrap: 'nowrap' }, '& .MuiPaginationItem-root': { minWidth: 44, height: 44,