feat: add FillSpace viewport-height spacer with repeating measureElement

Adds a reusable FillSpace component to dashgui that fills the remaining
viewport height between an aboveRef and optional belowRef, with a
scrollable middle section. Supports an optional measureElement that is
repeated top-to-bottom to fill the leftover space below children (rows
are rendered first, units fill height - contentHeight).

Includes mock page, docs wiring, and screenshot references.

src/dev/screenshots/ScreenshotHarness.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, createRef } from 'react';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
@@ -15,6 +15,7 @@ import ElevatedPill, {
   ToggleElevatedPill,
 } from '../../ElevatedPill';
 import SingleLineTextEdit from '../../SingleLineTextEdit';
+import FillSpace from '../../FillSpace';
 
 const MOCK_ROWS = [
   {
@@ -292,6 +293,128 @@ class ScreenshotHarness extends Component {
             color="#e2e8f0"
           />
         </Section>
+
+        <Section id="fillspace" label="FillSpace">
+          <FillSpaceExample />
+        </Section>
+
+        <Section id="fillspace-measure" label="FillSpace – repeat measure element">
+          <FillSpaceMeasureExample />
+        </Section>
+      </Box>
+    );
+  }
+}
+
+/**
+ * Deterministic FillSpace example for the screenshot harness. Bound with a
+ * `maxHeight` so the reference is stable regardless of the viewport height.
+ */
+class FillSpaceExample extends Component {
+  constructor(props) {
+    super(props);
+    this.headerRef = createRef();
+    this.footerRef = createRef();
+  }
+
+  render() {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box
+          ref={this.headerRef}
+          sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
+        >
+          <Typography variant="caption">Header (gemessen)</Typography>
+        </Box>
+
+        <FillSpace
+          aboveRef={this.headerRef}
+          belowRef={this.footerRef}
+          minHeight={80}
+          maxHeight={220}
+        >
+          <Box
+            sx={{
+              bgcolor: '#dbeafe',
+              p: 2,
+              borderRadius: 1,
+              height: '100%',
+            }}
+          >
+            <Typography variant="body2">
+              FillSpace füllt den Platz zwischen Header und Footer.
+            </Typography>
+          </Box>
+        </FillSpace>
+
+        <Box
+          ref={this.footerRef}
+          sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
+        >
+          <Typography variant="caption">Footer (gemessen)</Typography>
+        </Box>
+      </Box>
+    );
+  }
+}
+
+/**
+ * FillSpace with a repeating measurement element plus real children on top,
+ * for the screenshot harness. Bound with maxHeight so the reference is stable.
+ */
+class FillSpaceMeasureExample extends Component {
+  constructor(props) {
+    super(props);
+    this.headerRef = createRef();
+    this.footerRef = createRef();
+  }
+
+  render() {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box
+          ref={this.headerRef}
+          sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
+        >
+          <Typography variant="caption">Header</Typography>
+        </Box>
+
+        <FillSpace
+          aboveRef={this.headerRef}
+          belowRef={this.footerRef}
+          measureElement={
+            <Box
+              sx={{
+                bgcolor: '#c7d2fe',
+                p: 1,
+                borderRadius: 1,
+                textAlign: 'center',
+              }}
+            >
+              <Typography variant="caption">Einheit</Typography>
+            </Box>
+          }
+          measureGap={8}
+          minHeight={60}
+          maxHeight={260}
+        >
+          <Box
+            sx={{
+              bgcolor: '#fef3c7',
+              p: 1,
+              borderRadius: 1,
+            }}
+          >
+            <Typography variant="body2">Echte Inhalte</Typography>
+          </Box>
+        </FillSpace>
+
+        <Box
+          ref={this.footerRef}
+          sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
+        >
+          <Typography variant="caption">Footer</Typography>
+        </Box>
       </Box>
     );
   }