diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index c56f3f3b3..0161eded6 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1848,6 +1848,7 @@ div.promoted-attributes-container {
     padding: 6px 0;
     gap: 8px;
     align-items: stretch;
+    container-type: inline-size;
 }
 
 div.promoted-attributes-container,
@@ -1870,6 +1871,13 @@ div.promoted-attribute-cell {
     overflow-y: visible;
 }
 
+@container (max-width: 400px) {
+    /* Narrow promoted attributes section */
+    div.promoted-attribute-cell {
+        flex-grow: 1;
+    }
+}
+
 /* A promoted attribute card (boolean attribute) */
 div.promoted-attribute-cell:has(input[type="checkbox"]):not(:has(.multiplicity > span)) {
     /* Checbox attribute, without multiplicity */