WT-1327: What's next (Roadmap page) QA Fixes

docker-compose.yml

@@ -157,7 +157,7 @@ services:
       PLAYWRIGHT_BASE_URL: "${PLAYWRIGHT_BASE_URL:-http://localhost:8000}"
     command: sh -c "npm install && npx playwright test --config playwright.visual-regression.config.js --ui --ui-host=0.0.0.0 --ui-port=8085"
 
-  playwright-update-screenshots:
+  playwright-update-snapshots:
     image: mcr.microsoft.com/playwright:v1.60.0-noble
     network_mode: host
     working_dir: /app/tests/playwright

media/css/cms/components/flare26-icon.css

@@ -1181,6 +1181,10 @@
     --icon-src: url('/media/img/firefox/flare/2026/icons/mobile-24/clear-close-cancel/cross-circle-fill-24.svg');
 }
 
+.fl-icon-device-desktop {
+    --icon-src: url('/media/img/firefox/flare/2026/icons/mobile-24/devices/device-desktop-24.svg');
+}
+
 .fl-icon-device-desktop-fill {
     --icon-src: url('/media/img/firefox/flare/2026/icons/mobile-24/devices/device-desktop-fill-24.svg');
 }

media/css/cms/components/flare26-roadmap-list-section.css

@@ -1,14 +1,17 @@
+.fl-roadmap-list-section {
+    padding: var(--token-spacing-2xl);
+}
+
+.fl-roadmap-list-section + .fl-roadmap-list-section {
+    padding-block-start: 0;
+}
+
 .fl-roadmap-list-section-header {
     border-block-end: 1px solid var(--theme-roadmap-list-border-color);
     display: flex;
     flex-direction: column;
 }
 
-.fl-roadmap-list-section-header .fl-heading {
-    flex: 1 0 auto;
-    font-size: var(--fl-theme-font-size-heading-sm);
-}
-
 .fl-roadmap-list {
     background-color: var(--theme-roadmap-list-background);
     border: 1px solid var(--theme-roadmap-list-border-color);
@@ -151,6 +154,11 @@
     padding: 0;
 }
 
+.fl-roadmap-filter-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
 .fl-roadmap-filter-button .fl-tag .fl-icon-close {
     display: none;
 }
@@ -183,6 +191,14 @@
 }
 
 @media (--viewport-md-up) {
+    .fl-roadmap-list-section {
+        padding: var(--token-layout-md) var(--token-spacing-xl);
+    }
+
+    .fl-roadmap-list-section .fl-section-container {
+        gap: var(--token-spacing-2xl);
+    }
+
     .fl-roadmap-list-section-header {
         align-items: end;
         flex-direction: row;
@@ -191,7 +207,7 @@
     }
 
     .fl-roadmap-item {
-        align-items: center;
+        align-items: start;
         gap: var(--token-spacing-lg);
         grid-template-columns: var(--token-spacing-xl) auto 300px;
     }
@@ -221,3 +237,75 @@
         justify-content: space-between;
     }
 }
+
+/* Accordion toggle - mobile only */
+
+.fl-roadmap-section-toggle {
+    align-items: flex-start;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    text-align: start;
+}
+
+.fl-roadmap-section-toggle .fl-heading {
+    align-items: flex-start;
+    display: flex;
+    flex: 1 0 auto;
+    font-size: var(--fl-theme-font-size-heading-sm);
+    inline-size: 100%;
+    justify-content: space-between;
+    min-inline-size: 0;
+}
+
+.fl-roadmap-section-toggle .fl-icon {
+    font-size: 24px;
+}
+
+.fl-roadmap-section-toggle .fl-icon-add {
+    display: none;
+}
+
+.fl-roadmap-section-toggle .fl-icon-subtract {
+    display: inline-block;
+}
+
+.fl-roadmap-list-section.is-collapsed .fl-icon-add {
+    display: inline-block;
+}
+
+.fl-roadmap-list-section.is-collapsed .fl-icon-subtract {
+    display: none;
+}
+
+.fl-roadmap-list-section.is-collapsed .fl-roadmap-list {
+    display: none;
+}
+
+.fl-roadmap-list-section .fl-roadmap-list-section-header {
+    display: flex;
+}
+
+@media (--viewport-md-up) {
+    .fl-roadmap-section-toggle {
+        cursor: text;
+        display: block;
+        -webkit-user-select: text;
+        user-select: text;
+    }
+
+    .fl-roadmap-list-section.is-collapsed .fl-icon-add,
+    .fl-roadmap-list-section .fl-icon-subtract {
+        display: none;
+    }
+
+    .fl-roadmap-list-section.is-collapsed .fl-roadmap-list,
+    .fl-roadmap-list-section.hidden .fl-roadmap-list {
+        display: block;
+    }
+}