Fix layout of selected-text scope banner at narrow widths

src/chrome/styles/sidepanel.css

@@ -2437,14 +2437,36 @@ body {
   white-space: nowrap;
 }
 
+@media (max-width: 520px) {
+  .selection-scope-banner {
+    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .selection-scope-banner-copy {
+    grid-column: 2 / -1;
+  }
+
+  #selection-scope-restore {
+    grid-column: 2;
+    width: 100%;
+  }
+
+  #selection-scope-new-conversation {
+    grid-column: 3;
+    width: 100%;
+  }
+}
+
 @media (max-width: 340px) {
   .selection-scope-banner {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  .selection-scope-banner button {
+  #selection-scope-restore,
+  #selection-scope-new-conversation {
     grid-column: 2;
-    justify-self: start;
+    width: 100%;
   }
 }
 

src/firefox/styles/sidepanel.css

@@ -2274,14 +2274,36 @@ body {
   white-space: nowrap;
 }
 
+@media (max-width: 520px) {
+  .selection-scope-banner {
+    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .selection-scope-banner-copy {
+    grid-column: 2 / -1;
+  }
+
+  #selection-scope-restore {
+    grid-column: 2;
+    width: 100%;
+  }
+
+  #selection-scope-new-conversation {
+    grid-column: 3;
+    width: 100%;
+  }
+}
+
 @media (max-width: 340px) {
   .selection-scope-banner {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  .selection-scope-banner button {
+  #selection-scope-restore,
+  #selection-scope-new-conversation {
     grid-column: 2;
-    justify-self: start;
+    width: 100%;
   }
 }
 

test/run.js

@@ -36088,7 +36088,8 @@ test('selected-text scope is a durable visible sidepanel state with a New conver
     assert.match(banner, /data-i18n="sp\.selection_scope\.title"[\s\S]*?data-i18n="sp\.selection_scope\.description"[\s\S]*?id="selection-scope-new-conversation"[\s\S]*?data-i18n="sp\.btn\.clear"/, `${label}: selected-text notice and escape action should stay localized`);
     assert.match(css, /\.selection-scope-banner \{[\s\S]*?var\(--warning\)[\s\S]*?var\(--bg-secondary\)/, `${label}: scope notice should use warning—not destructive—color semantics`);
     assert.match(css, /\.selection-scope-banner button:disabled \{[\s\S]*?cursor: not-allowed;[\s\S]*?opacity:/, `${label}: busy scope recovery should look unavailable`);
-    assert.match(css, /@media \(max-width: 340px\) \{[\s\S]*?\.selection-scope-banner \{[\s\S]*?grid-template-columns: auto minmax\(0, 1fr\);/, `${label}: selected-text notice should reflow in narrow browser panels`);
+    assert.match(css, /@media \(max-width: 520px\) \{[\s\S]*?\.selection-scope-banner \{[\s\S]*?grid-template-columns: auto minmax\(0, 1fr\) minmax\(0, 1fr\);[\s\S]*?\.selection-scope-banner-copy \{[\s\S]*?grid-column: 2 \/ -1;[\s\S]*?#selection-scope-restore \{[\s\S]*?grid-column: 2;[\s\S]*?#selection-scope-new-conversation \{[\s\S]*?grid-column: 3;/, `${label}: common narrow sidepanels should give the notice a full row above two equal-width actions`);
+    assert.match(css, /@media \(max-width: 340px\) \{[\s\S]*?\.selection-scope-banner \{[\s\S]*?grid-template-columns: auto minmax\(0, 1fr\);[\s\S]*?#selection-scope-restore,[\s\S]*?#selection-scope-new-conversation \{[\s\S]*?grid-column: 2;[\s\S]*?width: 100%;/, `${label}: very narrow sidepanels should stack both scope actions below the notice`);
     const baseBannerRuleIndex = css.indexOf('.selection-scope-banner {');
     const narrowBannerRuleIndex = css.indexOf('.selection-scope-banner {', baseBannerRuleIndex + 1);
     assert.ok(baseBannerRuleIndex >= 0 && narrowBannerRuleIndex > baseBannerRuleIndex, `${label}: narrow selected-text layout should follow and override the base banner grid`);