From 20d8e5c7196cc143502e501de91a3be1f4f031a0 Mon Sep 17 00:00:00 2001
From: Dan Leech <dan.leech@defra.gov.uk>
Date: Wed, 15 Jul 2026 14:22:57 +0100
Subject: [PATCH] Keyboard panel container breakpoint added

---
 .../KeyboardHelp/KeyboardHelp.module.scss     | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/App/components/KeyboardHelp/KeyboardHelp.module.scss b/src/App/components/KeyboardHelp/KeyboardHelp.module.scss
index 0dd636e5..e1f7e5f0 100755
--- a/src/App/components/KeyboardHelp/KeyboardHelp.module.scss
+++ b/src/App/components/KeyboardHelp/KeyboardHelp.module.scss
@@ -37,16 +37,45 @@
 }
 
 // 3. Modifiers
-.im-o-app--mobile .im-c-keyboard-help__title {
-    width: 100%;
-    display: block;
+
+.im-c-tabs__panel .im-c-keyboard-help__item:first-child {
+    border-top: 0;
 }
 
-.im-o-app--mobile .im-c-keyboard-help__description {
-    display: block;
-    margin-top: 5px;
+// Fallback: without container-query support the two-column pairing drops to a
+// stacked layout at the app's primary (mobile) breakpoint. Scoped to browsers
+// that lack container queries so it can't compete with the enhancement below
+// (container queries add no specificity, so a lingering breakpoint rule would
+// always win and the panel would never stack on width alone).
+@supports not (container-type: inline-size) {
+    .im-o-app--mobile .im-c-keyboard-help__title {
+        width: 100%;
+        display: block;
+    }
+
+    .im-o-app--mobile .im-c-keyboard-help__description {
+        display: block;
+        margin-top: 5px;
+    }
 }
 
-.im-c-tabs__panel .im-c-keyboard-help__item:first-child {
-    border-top: 0;
+// Progressive enhancement: drive the stacking off the panel's own width rather
+// than the app breakpoint, so the two-column pairing is only dropped when the
+// panel itself is too narrow.
+@supports (container-type: inline-size) {
+    .im-c-keyboard-help {
+        container: im-keyboard-help / inline-size;
+    }
+
+    @container im-keyboard-help (max-width: 26rem) {
+        .im-c-keyboard-help__title {
+            width: 100%;
+            display: block;
+        }
+
+        .im-c-keyboard-help__description {
+            display: block;
+            margin-top: 5px;
+        }
+    }
 }
\ No newline at end of file