u

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' }}
         >
           <Box
             aria-hidden={!showPagination || undefined}
@@ -493,26 +505,37 @@ class FillSpace extends Component {
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
-              flexWrap: 'wrap',
+              flexWrap: 'nowrap',
               gap: 1,
               width: '100%',
+              height: 44,
               visibility: showPagination ? 'visible' : 'hidden',
               pointerEvents: showPagination ? 'auto' : 'none',
             }}
           >
-            <Typography variant="body2" color="text.secondary">
+            <Typography
-              {showPagination ? offset + 1 : 1}–
+              variant="body2"
-              {showPagination ? Math.min(offset + pageSize, total) : pageSize + 1} von{' '}
+              color="text.secondary"
-              {showPagination ? total : pageSize + 1}
+              noWrap
+              sx={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
+            >
+              {total === 0 ? '0' : `${offset + 1}–${Math.min(offset + pageSize, total)}`} von{' '}
+              {total}
             </Typography>
             <Pagination
-              count={showPagination ? pageCount : 1}
+              count={pageCount}
-              page={showPagination ? safePage : 1}
+              page={safePage}
               onChange={(_e, page) => 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,