diff --git a/tests/Browser/TimepickerTest.php b/tests/Browser/TimepickerTest.php
index 85edb8d9..81bedb4f 100644
--- a/tests/Browser/TimepickerTest.php
+++ b/tests/Browser/TimepickerTest.php
@@ -399,3 +399,23 @@ it('lies the dial on its side in a short landscape window', function () {
             })()
             JS);
 });
+
+it('keeps the dial and the boxes their fixed pixel size at a 20px root font size, growing only their text', function () {
+    $dial = "document.querySelector('#meeting-dialog [data-md-timepicker-dial]')";
+    $hourBox = "document.querySelector('#meeting-dialog [data-md-timepicker-box=\"hour\"]')";
+    $surface = "document.querySelector('#meeting-dialog [data-md-timepicker-surface]')";
+    $dialWidth = "Math.round({$dial}.getBoundingClientRect().width)";
+    $font = "getComputedStyle({$hourBox}).fontSize";
+
+    $page = timeProbe()->click('#meeting');
+
+    $restingWidth = (int) $page->script($dialWidth);
+    $restingFont = $page->script($font);
+
+    $page->script("document.documentElement.style.fontSize = '20px'");
+
+    $page->assertScript("({$dialWidth}) === {$restingWidth}")
+        ->assertScript("({$font}) !== '{$restingFont}'")
+        // The px-sized surface sets the dialog's size, not the (rem-sized) text now growing inside it.
+        ->assertScript("{$surface}.scrollWidth <= {$surface}.clientWidth + 1 && {$surface}.scrollHeight <= {$surface}.clientHeight + 1");
+});