feat(artikel): fill results list viewport with FillSpace

Wrap the article search results list in FillSpace (from dashgui) so it
becomes a scrollable middle section that fills to the bottom of the
viewport. The pagination box is referenced via paginationRef as the
anchor above the spacer; measureElement is temporarily a debug unit to
visualize the repeating fill.

src/pages/artikel/index.jsx

@@ -1,4 +1,5 @@
-import { Component } from 'react';
+import { Component, createRef } from 'react';
+import FillSpace from 'dashgui/FillSpace';
 import Box from '@mui/material/Box';
 import InputAdornment from '@mui/material/InputAdornment';
 import List from '@mui/material/List';
@@ -85,6 +86,7 @@ class ArtikelSearchPage extends Component {
   state = initialSearchState(this.props.searchParams);
   listSlotRef = { current: null };
   rowMeasureRef = { current: null };
+  paginationRef = createRef();
 
   setListSlotRef = (node) => {
     if (this.listSlotRef.current === node) return;
@@ -368,7 +370,7 @@ class ArtikelSearchPage extends Component {
               )}
 
               {/* Always mount real pagination height (invisible until needed) so pageSize is correct. */}
-              <Box sx={{ mb: 2 }}>
+              <Box ref={this.paginationRef} sx={{ mb: 2 }}>
                 <ResultsPagination
                   invisible={!showPagination}
                   offset={showPagination ? offset : 0}
@@ -380,6 +382,24 @@ class ArtikelSearchPage extends Component {
                 />
               </Box>
 
+              <FillSpace
+                aboveRef={this.paginationRef}
+                debug
+                sx={{ overflow: 'auto' }}
+                // Temporary dummy unit so the repeating fill is visible.
+                measureElement={
+                  <Box
+                    sx={{
+                      bgcolor: '#dbeafe',
+                      p: 2,
+                      borderRadius: 1,
+                      textAlign: 'center',
+                    }}
+                  >
+                    <Typography variant="body2">Einheit</Typography>
+                  </Box>
+                }
+              >
                 <Box ref={this.setListSlotRef}>
                   {rows.length > 0 && (
                     <List component={Paper} variant="outlined" disablePadding>
@@ -428,6 +448,7 @@ class ArtikelSearchPage extends Component {
                     </List>
                   )}
                 </Box>
+              </FillSpace>
             </Box>
           </Box>
         )}