diff --git a/core/part/package.json b/core/part/package.json
index 4430906a..321f6675 100644
--- a/core/part/package.json
+++ b/core/part/package.json
@@ -29,7 +29,10 @@
     },
     "./package.json": "./package.json"
   },
-  "files": ["./src", "./dist"],
+  "files": [
+    "./src",
+    "./dist"
+  ],
   "sideEffects": false,
   "scripts": {
     "build:pkg": "tsup src",
@@ -53,6 +56,7 @@
     "@villagekit/ui": "workspace:*",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.7",
+    "react-use-measure": "^2.1.1",
     "zod": "^3.23.8"
   },
   "peerDependencies": {
diff --git a/core/part/src/base/grid/svg/context.tsx b/core/part/src/base/grid/svg/context.tsx
index d4d47459..4f125f1f 100644
--- a/core/part/src/base/grid/svg/context.tsx
+++ b/core/part/src/base/grid/svg/context.tsx
@@ -1,16 +1,32 @@
+import { Box } from '@villagekit/ui'
 import { createContext, useContext } from 'react'
+import useMeasure from 'react-use-measure'
 
 interface GridSvgContextProps {
   displayUnit: 'gu' | 'mm'
 }
 
-interface GridSvgContextType extends GridSvgContextProps {}
+interface GridSvgContextType extends GridSvgContextProps {
+  viewWidth: number
+}
 
 const GridSvgContext = createContext<GridSvgContextType | null>(null)
 
 export function GridSvgContextProvider(props: React.PropsWithChildren<GridSvgContextProps>) {
-  const { children, ...value } = props
-  return <GridSvgContext.Provider value={value}>{children}</GridSvgContext.Provider>
+  const { children, ...contextProps } = props
+
+  const [ref, bounds] = useMeasure()
+  const viewWidth = bounds.width
+
+  const value = { ...contextProps, viewWidth }
+
+  return (
+    <GridSvgContext.Provider value={value}>
+      <Box sx={{ width: '100%' }} ref={ref}>
+        {children}
+      </Box>
+    </GridSvgContext.Provider>
+  )
 }
 
 export function useGridSvgContext(): GridSvgContextType {
diff --git a/core/part/src/base/grid/svg/label.tsx b/core/part/src/base/grid/svg/label.tsx
index 8113a424..094ab269 100644
--- a/core/part/src/base/grid/svg/label.tsx
+++ b/core/part/src/base/grid/svg/label.tsx
@@ -54,6 +54,7 @@ interface TextLabelXProps extends Omit<LabelXProps, 'value'> {
 export function TextLabelX(props: TextLabelXProps) {
   const { text, textAnchor = 'middle', color, x } = props
 
+  const { viewWidth } = useSvgContext()
   const { fontSizes } = useTheme()
 
   return (
@@ -61,7 +62,9 @@ export function TextLabelX(props: TextLabelXProps) {
       x={x}
       y={LABEL_Y_OFFSET_Y}
       fill={color}
-      fontSize={fontSizes['3xl']}
+      // NOTE (mw): https://florian.ec/blog/responsive-svg-constant-font-size/
+      // [font size] / ([view width] / [svg viewbox width])
+      fontSize={`calc(${fontSizes['lg']}/ (${viewWidth} / (40 * 62)))`}
       textAnchor={textAnchor}
     >
       {text}
diff --git a/parts/gridbeam/src/svg/summary-grid-beam-svg.tsx b/parts/gridbeam/src/svg/summary-grid-beam-svg.tsx
index 53befc94..31ddfcff 100644
--- a/parts/gridbeam/src/svg/summary-grid-beam-svg.tsx
+++ b/parts/gridbeam/src/svg/summary-grid-beam-svg.tsx
@@ -18,18 +18,16 @@ export function SummaryGridBeamSvg(props: SummaryGridBeamSvgProps) {
 
   return (
     <SvgContextProvider displayUnit={displayUnit}>
-      <Box sx={{ width: '100%' }}>
-        <svg
-          role="img"
-          aria-label={label}
-          width="100%"
-          viewBox={`-4 0 ${62 * GRID_SPACING} ${2 * GRID_SPACING}`}
-          xmlns={'http://www.w3.org/2000/svg'}
-        >
-          <title>{label}</title>
-          <BeamSvg sizeInGrids={lengthInGrids} showSizeMarker showShadow />
-        </svg>
-      </Box>
+      <svg
+        role="img"
+        aria-label={label}
+        width="100%"
+        viewBox={`-4 0 ${62 * GRID_SPACING} ${2 * GRID_SPACING}`}
+        xmlns={'http://www.w3.org/2000/svg'}
+      >
+        <title>{label}</title>
+        <BeamSvg sizeInGrids={lengthInGrids} showSizeMarker showShadow />
+      </svg>
     </SvgContextProvider>
   )
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81d77a99..669a31d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -416,6 +416,9 @@ importers:
       react:
         specifier: 18.3.1
         version: 18.3.1
+      react-use-measure:
+        specifier: ^2.1.1
+        version: 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       three:
         specifier: ^0.165.0
         version: 0.165.0
@@ -4659,10 +4662,12 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   global-modules@1.0.0:
     resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
@@ -4837,6 +4842,7 @@ packages:
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@@ -6123,6 +6129,7 @@ packages:
 
   rimraf@2.6.3:
     resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rimraf@3.0.2: