From 5d983d29dc50aa77ee24184b47f0a9bc83583036 Mon Sep 17 00:00:00 2001
From: DanielRyanSmith <danielrsmith@google.com>
Date: Mon, 23 Jun 2025 08:12:17 +0000
Subject: [PATCH 1/7] Add better mobile layout for interop dashboard

---
 webapp/components/interop-dashboard.js |  8 -----
 webapp/components/interop-summary.js   | 44 ++++++++++++++++++++++----
 webapp/components/wpt-header.js        | 35 ++++++++++++++++++++
 webapp/templates/interop.html          |  5 +--
 4 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/webapp/components/interop-dashboard.js b/webapp/components/interop-dashboard.js
index 130ccb4ad04..f1756f2bbe6 100644
--- a/webapp/components/interop-dashboard.js
+++ b/webapp/components/interop-dashboard.js
@@ -291,14 +291,6 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
             margin: 0 1em;
           }
         }
-
-        /* TODO(danielrsmith): This is a workaround to avoid the text scaling that
-         * happens for p tags on mobile, but not for any other text (like the focus area table).
-         * Remove this when deeper mobile functionality has been added. */
-        p {
-          text-size-adjust: none;
-        }
-
       </style>
       <div class="previous-year-banner" hidden$=[[isCurrentYear]]>
         <p>
diff --git a/webapp/components/interop-summary.js b/webapp/components/interop-summary.js
index 04c8ee0bffa..7e0dde66b22 100644
--- a/webapp/components/interop-summary.js
+++ b/webapp/components/interop-summary.js
@@ -29,7 +29,7 @@ class InteropSummary extends PolymerElement {
       <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
 
       <style>
-        #summaryNumberRow {
+        .summary-number-row {
           display: flex;
           justify-content: center;
           gap: 30px;
@@ -92,9 +92,39 @@ class InteropSummary extends PolymerElement {
         .summary-browser-name:not([data-stable-browsers]) > .stable {
           display: none;
         }
+
+        /* Media Query for Mobile Devices */
+        @media (max-width: 768px) {
+          .summary-container {
+            min-height: 340px;
+          }
+
+          .summary-number {
+            font-size: 2em;
+            width: 2.5ch;
+            height: 2.5ch;
+            padding: 5px;
+          }
+
+          #totalSummaryRow > .summary-flex-item > .summary-number {
+            font-size: 4em;
+            width: 2.5ch;
+            height: 2.5ch;
+            padding: 4px;
+          }
+
+          .browser-score {
+            font-size: 2em;
+          }
+
+          .summary-browser-name > figure > figcaption {
+            line-height: 1.1;
+            margin: 0 -10px;
+          }
+        }
       </style>
       <div class="summary-container">
-        <div id="summaryNumberRow">
+        <div class="summary-number-row" id="totalSummaryRow">
           <!-- Interop -->
           <div id="interopSummary" class="summary-flex-item" tabindex="0">
             <div class="summary-number score-number smaller-summary-number">--</div>
@@ -106,10 +136,10 @@ class InteropSummary extends PolymerElement {
             <h3 class="summary-title">INVESTIGATIONS</h3>
           </div>
         </div>
-        <div id="summaryNumberRow">
+        <div class="summary-number-row" id="browserSummaryRow">
           <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
             <div class="summary-flex-item" tabindex="0">
-              <div class="summary-number score-number smaller-summary-number">--</div>
+              <div class="summary-number score-number browser-score smaller-summary-number">--</div>
               <template is="dom-if" if="{{isChromeEdgeCombo(browserInfo)}}">
                 <!-- Chrome/Edge -->
                 <template is="dom-if" if="[[stable]]">
@@ -158,7 +188,7 @@ class InteropSummary extends PolymerElement {
           </template>
           <template is="dom-if" if="{{isMobileScoresView}}">
             <div class="summary-flex-item" tabindex="0">
-              <div class="summary-number score-number smaller-summary-number">--</div>
+              <div class="summary-number score-number browser-score smaller-summary-number">--</div>
               <div class="summary-browser-name">
                 <figure>
                   <img src="/static/wktr_64x64.png" width="36" alt="Safari iOS" />
@@ -209,7 +239,9 @@ class InteropSummary extends PolymerElement {
     }
 
     const summaryDiv = this.shadowRoot.querySelector('.summary-container');
-    summaryDiv.style.minHeight = SUMMARY_CONTAINER_MIN_HEIGHTS[this.year] || '470px';
+    if (window.innerWidth > 768) {
+      summaryDiv.style.minHeight = SUMMARY_CONTAINER_MIN_HEIGHTS[this.year] || '470px';
+    }
     // Don't display the interop score for Interop 2021.
     if (this.year === '2021') {
       const interopDiv = this.shadowRoot.querySelector('#interopSummary');
diff --git a/webapp/components/wpt-header.js b/webapp/components/wpt-header.js
index 09268f30bc4..60f0ce20ba9 100644
--- a/webapp/components/wpt-header.js
+++ b/webapp/components/wpt-header.js
@@ -47,6 +47,41 @@ class WPTHeader extends WPTFlags(PolymerElement) {
       header nav a {
         margin-right: 1em;
       }
+
+      /* Media Query for Mobile Devices */
+      @media (max-width: 768px) {
+        header {
+          padding: 1em;
+        }
+        header h1 {
+          font-size: 1em; /* Slightly adjusted for balance */
+        }
+        header > div {
+          flex-direction: column; /* Stack logo/title and login button */
+          align-items: flex-start; /* Align items to the left */
+          gap: 1em; /* Add space between the stacked items */
+          margin-bottom: 1em;
+        }
+        nav {
+          display: flex;
+          flex-direction: column; /* Stack nav links vertically */
+          align-items: stretch; /* Stretch links to fill width */
+          border-top: 1px solid #e0e0e0;
+          padding-top: 0.5em;
+        }
+        nav a {
+          margin-right: 0;
+          padding: 0.25em;
+          text-align: center;
+          border-bottom: 1px solid #f0f0f0;
+        }
+        nav a:last-child {
+          border-bottom: none;
+        }
+        img {
+          vertical-align: middle;
+        }
+      }
     </style>
     <header>
       <div>
diff --git a/webapp/templates/interop.html b/webapp/templates/interop.html
index ea497c50db7..4fd06a17c59 100644
--- a/webapp/templates/interop.html
+++ b/webapp/templates/interop.html
@@ -2,8 +2,9 @@
 <html lang="en">
 <head>
 {{ template "_head_common.html" . }}
-<!-- <meta name="color-scheme" content="dark light"> -->
-<script type="module" src="/components/interop.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- <meta name="color-scheme" content="dark light"> -->
+  <script type="module" src="/components/interop.js"></script>
 </head>
 <body>
 <div id="content">

From 6c6316ae57ea4acc6d88d19ff3fa585104defa00 Mon Sep 17 00:00:00 2001
From: DanielRyanSmith <danielrsmith@google.com>
Date: Mon, 23 Jun 2025 18:01:46 +0000
Subject: [PATCH 2/7] header has mobile functionality

---
 webapp/components/wpt-header.js | 226 ++++++++++++++++++++++++++++----
 1 file changed, 197 insertions(+), 29 deletions(-)

diff --git a/webapp/components/wpt-header.js b/webapp/components/wpt-header.js
index 60f0ce20ba9..e6473a89200 100644
--- a/webapp/components/wpt-header.js
+++ b/webapp/components/wpt-header.js
@@ -15,6 +15,11 @@ class WPTHeader extends WPTFlags(PolymerElement) {
   static get template() {
     return html`
     <style>
+      :host {
+        display: block;
+        position: relative;
+        background: #fff;
+      }
       * {
         margin: 0;
         padding: 0;
@@ -42,57 +47,167 @@ class WPTHeader extends WPTFlags(PolymerElement) {
       header > div {
         align-items: center;
         display: flex;
+      }
+      header nav a {
+        margin-right: 1em;
+      }
+      #title-area {
         justify-content: space-between;
       }
+      .mobile-title {
+        display: none; /* Shown on desktop via media query */
+      }
+      .logo-area > a {
+        align-items: center;
+        gap: 16px;
+      }
+      .logo-area img {
+        height: 32px;
+        width: 32px;
+        vertical-align: middle;
+      }
+      .login-area {
+        display: none; /* Shown on desktop via media query */
+      }
+
+      .menu-button {
+        display: none; /* Hidden on desktop */
+        flex-direction: column;
+        justify-content: space-around;
+        width: 30px;
+        height: 30px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        z-index: 1001; /* Above the nav panel */
+      }
+      .menu-button span {
+        display: block;
+        width: 100%;
+        height: 3px;
+        background: #333;
+        border-radius: 3px;
+        transition: all 0.3s ease;
+      }
+      /* Hamburger to "X" animation */
+      .menu-button.open span:nth-of-type(1) {
+        transform: rotate(45deg) translate(7px, 7px);
+      }
+      .menu-button.open span:nth-of-type(2) {
+        opacity: 0;
+      }
+      .menu-button.open span:nth-of-type(3) {
+        transform: rotate(-45deg) translate(7px, -7px);
+      }
       header nav a {
         margin-right: 1em;
       }
 
-      /* Media Query for Mobile Devices */
+      /* Navigation Links */
+      .nav-links {
+        display: flex;
+        align-items: center;
+        gap: 1.5em;
+      }
+      .nav-links a {
+        font-weight: 500;
+        color: #555;
+      }
+      .nav-links a:last-of-type {
+        margin-right: 0;
+      }
+
+      /* Mobile Styles */
       @media (max-width: 768px) {
-        header {
-          padding: 1em;
-        }
         header h1 {
-          font-size: 1em; /* Slightly adjusted for balance */
+          margin-bottom: 0;
         }
-        header > div {
-          flex-direction: column; /* Stack logo/title and login button */
-          align-items: flex-start; /* Align items to the left */
-          gap: 1em; /* Add space between the stacked items */
-          margin-bottom: 1em;
+        #desktop-login {
+          display: none;
         }
-        nav {
+        #mobile-navigation {
+          z-index: 2;
+        }
+        .desktop-title {
+          display: none;
+        }
+        .mobile-title {
           display: flex;
-          flex-direction: column; /* Stack nav links vertically */
-          align-items: stretch; /* Stretch links to fill width */
-          border-top: 1px solid #e0e0e0;
-          padding-top: 0.5em;
         }
-        nav a {
-          margin-right: 0;
-          padding: 0.25em;
+        .menu-button {
+          display: flex; /* Show button on mobile */
+        }
+        .nav-links {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 1em;
+          background: #fff;
+          position: fixed;
+          top: 0;
+          right: 0;
+          height: 100vh;
+          width: 80%;
+          max-width: 300px;
+          padding-top: 6em;
+          box-shadow: -2px 0 8px rgba(0,0,0,0.1);
+          
+          /* Hidden by default, slides in */
+          transform: translateX(100%);
+          transition: transform 0.3s ease-in-out;
+        }
+        .nav-links.open {
+          transform: translateX(0);
+        }
+        .nav-links a {
+          font-size: 1.2em;
+          width: 100%;
           text-align: center;
-          border-bottom: 1px solid #f0f0f0;
+          padding: 0.5em 0;
+          margin: 0;
         }
-        nav a:last-child {
-          border-bottom: none;
+        /* Hide the main nav container, but not the links inside the panel */
+        nav {
+          display: none;
+        }
+      }
+
+      /* Desktop Styles */
+      @media (min-width: 769px) {
+        .login-area {
+          display: block; /* Show login on desktop */
         }
-        img {
-          vertical-align: middle;
+
+        #mobile-navigation {
+          display: none;
         }
       }
     </style>
     <header>
-      <div>
+    <div id="title-area">
+      <div class="logo-area">
         <h1>
           <img src="/static/logo.svg" alt="wpt.fyi logo">
-          <a href="/">web-platform-tests dashboard</a>
-        </h1>
-        <template is="dom-if" if="[[githubLogin]]">
-          <github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
-        </template>
+          <a class=desktop-title href="/">web-platform-tests dashboard</a>
+          <a class="mobile-title" href="/">WPT dashboard</a>
+        <h1>
       </div>
+      <template is="dom-if" if="[[githubLogin]]">
+        <github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
+      </template>
+      <button
+          class$="[[_computeMenuButtonClass(_isMenuOpen)]]"
+          on-click="_toggleMenu"
+          aria-label$="[[_computeAriaLabel(_isMenuOpen)]]"
+          aria-expanded$="[[_isMenuOpen]]"
+          aria-controls="mobile-navigation">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+    </div>
 
       <nav>
         <!-- TODO: handle onclick with wpt-results.navigate if available -->
@@ -105,6 +220,20 @@ class WPTHeader extends WPTFlags(PolymerElement) {
         </template>
         <a href="/about">About</a>
       </nav>
+
+      <div id="mobile-navigation" class$="[[_computeNavLinksClass(_isMenuOpen)]]">
+        <a href="/">Latest Run</a>
+        <a href="/runs">Recent Runs</a>
+        <a href="/interop">&#10024;Interop 2025&#10024;</a>
+        <a href="/insights">Insights</a>
+        <template is="dom-if" if="[[processorTab]]">
+          <a href="/status">Processor</a>
+        </template>
+        <a href="/about">About</a>
+        <template is="dom-if" if="[[githubLogin]]">
+          <github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
+        </template>
+      </div>
     </header>
 `;
   }
@@ -126,8 +255,47 @@ class WPTHeader extends WPTFlags(PolymerElement) {
       user: String,
       isTriageMode: {
         type: Boolean,
+      },
+      // New property to manage the menu's open/closed state
+      _isMenuOpen: {
+        type: Boolean,
+        value: false,
       }
     };
   }
+
+  /**
+   * Toggles the state of the mobile menu.
+   */
+  _toggleMenu() {
+    this._isMenuOpen = !this._isMenuOpen;
+  }
+
+  /**
+   * Computes the class string for the hamburger menu button.
+   * @param {boolean} isOpen
+   * @return {string}
+   */
+  _computeMenuButtonClass(isOpen) {
+    return isOpen ? 'menu-button open' : 'menu-button';
+  }
+
+  /**
+   * Computes the class string for the slide-out navigation panel.
+   * @param {boolean} isOpen
+   * @return {string}
+   */
+  _computeNavLinksClass(isOpen) {
+    return isOpen ? 'nav-links open' : 'nav-links';
+  }
+
+  /**
+   * Computes the ARIA label for accessibility based on the menu state.
+   * @param {boolean} isOpen
+   * @return {string}
+   */
+  _computeAriaLabel(isOpen) {
+    return isOpen ? 'Close navigation menu' : 'Open navigation menu';
+  }
 }
 window.customElements.define(WPTHeader.is, WPTHeader);

From 03b8367ed046d15313ace8d6dce7f83e4c858e4f Mon Sep 17 00:00:00 2001
From: DanielRyanSmith <danielrsmith@google.com>
Date: Mon, 23 Jun 2025 20:17:26 +0000
Subject: [PATCH 3/7] update tables for mobile view

---
 webapp/components/interop-dashboard.js | 198 ++++++++++++++++++++-----
 1 file changed, 163 insertions(+), 35 deletions(-)

diff --git a/webapp/components/interop-dashboard.js b/webapp/components/interop-dashboard.js
index f1756f2bbe6..23c721f6167 100644
--- a/webapp/components/interop-dashboard.js
+++ b/webapp/components/interop-dashboard.js
@@ -38,10 +38,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
         }
 
         .previous-year-banner {
-          height: 40px;
           background-color: #DEF;
           text-align: center;
-          padding-top: 16px;
+          padding: 16px 0;
         }
 
         .previous-year-banner p {
@@ -224,10 +223,6 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
           text-align: right;
         }
 
-        .score-table tbody > tr:nth-child(odd) {
-          background: hsl(0 0% 0% / 5%);
-        }
-
         .subtotal-row {
           border-top: 1px solid GrayText;
           background: hsl(0 0% 0% / 5%);
@@ -286,10 +281,104 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
           }
         }
 
+        .interop-score-mobile,
+        .table-title-mobile {
+          display: none;
+        }
+
         @media only screen and (max-width: 800px) {
           .grid-container {
             margin: 0 1em;
           }
+
+          /* --- RESPONSIVE TABLE STYLES --- */
+          .table-title-mobile {
+            display: block;
+          }
+          .card-header-mobile {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 1em;
+          }
+          .interop-score-mobile {
+            display: flex;
+            font-size: 0.9em;
+            font-weight: 500;
+            color: #333;
+            background: #e0e0e0;
+            padding: 0.1em 0.5em;
+            border-radius: 4px;
+            white-space: nowrap;
+          }
+          .score-table thead {
+            border: none;
+            clip: rect(0 0 0 0);
+            height: 1px;
+            margin: -1px;
+            overflow: hidden;
+            padding: 0;
+            position: absolute;
+            width: 1px;
+          }
+          .score-table tr {
+            display: block;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 1em;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            overflow: hidden; /* To contain the floated pseudo-elements */
+          }
+          .score-table .subtotal-row,
+          .score-table tfoot tr {
+            border-top: 2px solid #aaa;
+            font-weight: bold;
+          }
+          .score-table td {
+            display: block;
+            text-align: right;
+            border-bottom: 1px solid #eee;
+            padding: 0.75em;
+            line-height: 1.5;
+          }
+          .score-table td[data-label="Interop"] {
+            /* Hide the separate Interop row in our new layout */
+            display: none;
+          }
+          .score-table td:last-child {
+            border-bottom: 0;
+          }
+          .score-table td:first-child {
+            text-align: left;
+            font-weight: bold;
+            background-color: hsl(0 0% 0% / 5%);
+            border-bottom: 1px solid #ddd;
+            padding: 0; /* Padding is now on the inner element */
+          }
+          .score-table td:first-child .card-header-mobile {
+            padding: 0.75em;
+          }
+          .score-table td:not(:first-child)::before {
+            content: attr(data-label);
+            float: left;
+            font-weight: 500;
+            color: #555;
+          }
+          .score-table td[colspan="4"] {
+            background-color: hsl(0 0% 0% / 5%);
+            font-weight: bold;
+            text-align: left;
+            padding: 0.75em;
+
+          }
+          .score-table td[colspan="4"] + td::before {
+             content: "Progress";
+          }
+        }
+        @media only screen and (min-width: 801px) {
+          .score-table tbody > tr:nth-child(odd) {
+            background: hsl(0 0% 0% / 5%);
+          }
         }
       </style>
       <div class="previous-year-banner" hidden$=[[isCurrentYear]]>
@@ -302,9 +391,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
         <div class="grid-item grid-item-header">
           <h1>[[dashboardTitle]]</h1>
           <div class="channel-area">
-            <paper-button id="toggleStable" class\$="[[stableButtonClass(stable, isMobileScoresView)]]" on-click="clickStable">Stable</paper-button>
-            <paper-button id="toggleExperimental" class\$="[[experimentalButtonClass(stable, isMobileScoresView)]]" on-click="clickExperimental">Experimental</paper-button>
-            <paper-button id="toggleMobile" class\$="[[mobileButtonClass(isMobileScoresView)]]" on-click="clickMobile" hidden$="[[!shouldShowMobileScoresView()]]">Mobile</paper-button>
+            <paper-button id="toggleStable" class$="[[stableButtonClass(stable, isMobileScoresView)]]" on-click="clickStable">Stable</paper-button>
+            <paper-button id="toggleExperimental" class$="[[experimentalButtonClass(stable, isMobileScoresView)]]" on-click="clickExperimental">Experimental</paper-button>
+            <paper-button id="toggleMobile" class$="[[mobileButtonClass(isMobileScoresView)]]" on-click="clickMobile" hidden$="[[!shouldShowMobileScoresView()]]">Mobile</paper-button>
           </div>
           <div class="text-center" id="mobileWarning" hidden$="[[!isMobileScoresView]]">
             <p><i>Mobile browser results and how they are obtained are a work in progress. Scores may not reflect the real level of support for a given feature.</i></p>
@@ -354,19 +443,19 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
         <div class="grid-item grid-item-scores">
           <div class="table-card">
             <template is="dom-repeat" items="{{getYearProp('tableSections')}}" as="section">
+              <h1 class="table-title-mobile">{{section.name}}</h1>
               <table class="score-table">
                 <thead>
-
                   <!-- First score table header with sort functionality -->
                   <template is="dom-if" if="[[isFirstTable(itemsIndex)]]">
                     <tr class="section-header">
-                      <th class="sortable-header">
+                      <th class="sortable-header" data-label$="[[section.name]]">
                         {{section.name}}
                         <img class="sort-icon-focus-areas" src="[[getFocusAreaSortIcon(sortColumn, isSortedAsc)]]" />
                       </th>
                       <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
                         <template is="dom-if" if="{{isChromeEdgeCombo(browserInfo)}}">
-                          <th class="sortable-header">
+                          <th class="sortable-header" data-label="Chrome/Edge">
                               <template is="dom-if" if="[[stable]]">
                                 <div class="browser-icons">
                                   <img src="/static/chrome_64x64.png" width="32" alt="Chrome" title="Chrome" />
@@ -383,7 +472,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                           </th>
                         </template>
                         <template is="dom-if" if="{{!isChromeEdgeCombo(browserInfo)}}">
-                          <th class="sortable-header">
+                          <th class="sortable-header" data-label$="[[browserInfo.tableName]]">
                             <div class="browser-icons single-browser-icon">
                               <img src="[[getBrowserIcon(browserInfo, stable)]]" width="32" alt="[[getBrowserIconName(browserInfo, stable)]]" title="[[getBrowserIconName(browserInfo, stable)]]" />
                             </div>
@@ -392,14 +481,14 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                         </template>
                       </template>
                       <template is="dom-if" if="{{isMobileScoresView}}">
-                        <th class="sortable-header">
+                        <th class="sortable-header" data-label="Safari iOS">
                           <div class="browser-icons single-browser-icon">
                             <img src="/static/wktr_64x64.png" width="32" alt="Safari iOS" title="Safari iOS" />
                           </div>
                           <img class="sort-icon" src="[[getSortIcon(2, sortColumn, isSortedAsc)]]" />
                         </th>
                       </template>
-                      <th class="sortable-header">
+                      <th class="sortable-header" data-label="Interop">
                         <div class="interop-header">INTEROP</div>
                         <img class="sort-icon" src="[[getInteropSortIcon(sortColumn, isSortedAsc)]]" />
                       </th>
@@ -454,28 +543,36 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                     <template is="dom-repeat" items="{{sortRows(section.rows, index, sortColumn, isSortedAsc)}}" as="rowName">
                       <tr data-feature$="[[rowName]]">
                         <td>
-                          <a href$="[[getTestsURL(rowName, stable)]]">[[getRowInfo(rowName, 'description')]]</a>
+                          <div class="card-header-mobile">
+                            <a href$="[[getTestsURL(rowName, stable)]]">[[getRowInfo(rowName, 'description')]]</a>
+                            <span class="interop-score-mobile">[[getInteropScoreForFeature(rowName, stable)]]</span>
+                          </div>
                         </td>
                         <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
-                          <td>[[getBrowserScoreForFeature(itemsIndex, rowName, stable)]]</td>
+                          <td data-label$="[[browserInfo.tableName]]">[[getBrowserScoreForFeature(itemsIndex, rowName, stable)]]</td>
                         </template>
                         <template is="dom-if" if="[[isMobileScoresView]]">
-                          <td>--%</td>
+                          <td data-label="Safari iOS">--%</td>
                         </template>
-                        <td>[[getInteropScoreForFeature(rowName, stable)]]</td>
+                        <td data-label="Interop">[[getInteropScoreForFeature(rowName, stable)]]</td>
                       </tr>
                     </template>
                   </tbody>
                   <tfoot>
                     <tr class="subtotal-row">
-                      <td><strong>TOTAL</strong></td>
+                        <td>
+                          <div class="card-header-mobile">
+                            <strong>TOTAL</strong>
+                            <span class="interop-score-mobile">[[getInteropSubtotalScore(section, stable)]]</span>
+                          </div>
+                        </td>
                       <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
-                        <td>[[getSubtotalScore(itemsIndex, section, stable)]]</td>
+                        <td data-label$="[[browserInfo.tableName]]">[[getSubtotalScore(itemsIndex, section, stable)]]</td>
                       </template>
                       <template is="dom-if" if="[[isMobileScoresView]]">
-                        <td>--%</td>
+                        <td data-label="Safari iOS">--%</td>
                       </template>
-                      <td>[[getInteropSubtotalScore(section, stable)]]</td>
+                      <td data-label="Interop">[[getInteropSubtotalScore(section, stable)]]</td>
                     </tr>
                   </tfoot>
                 </template>
@@ -483,18 +580,17 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                   <tbody>
                     <template is="dom-repeat" items="{{section.rows}}" as="rowName">
                       <tr>
-                        <td colspan=4>
+                        <td colspan="4">
                           <a href$="[[getInvestigationUrl(rowName, section.previous_investigation)]]">[[rowName]]</a>
                         </td>
-                        <td>[[getInvestigationScore(rowName, section.previous_investigation)]]</td>
+                        <td data-label="Progress">[[getInvestigationScore(rowName, section.previous_investigation)]]</td>
                       </tr>
                     </template>
                   </tbody>
                   <tfoot>
                     <tr class="subtotal-row">
-                      <td><strong>TOTAL</strong></td>
-                      <td colspan=3></td>
-                      <td>[[getInvestigationScoreSubtotal(section.previous_investigation)]]</td>
+                      <td colspan="4" class="card-header-mobile"><strong>TOTAL</strong></td>
+                      <td data-label="Total Progress">[[getInvestigationScoreSubtotal(section.previous_investigation)]]</td>
                     </tr>
                   </tfoot>
                 </template>
@@ -534,9 +630,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
             </div>
 
             <interop-feature-chart year="[[year]]"
-                                  data-manager="[[dataManager]]"
-                                  stable="[[stable]]"
-                                  feature="{{feature}}">
+                                   data-manager="[[dataManager]]"
+                                   stable="[[stable]]"
+                                   feature="{{feature}}">
             </interop-feature-chart>
           </section>
         </div>
@@ -553,7 +649,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
           </template>
         </div>
       </footer>
-`;
+    `;
   }
   static get is() {
     return 'interop-dashboard';
@@ -563,7 +659,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return {
       year: String,
       embedded: Boolean,
-      stable: Boolean,
+      stable: {
+        type: Boolean,
+        observer: '_stableChanged',
+      },
       feature: String,
       features: {
         type: Array,
@@ -659,7 +758,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     if (this.year === '2021' || this.year === '2022' || this.isMobileScoresView) {
       const gridContainerDiv = this.shadowRoot.querySelector('.grid-container');
       gridContainerDiv.style.display = 'block';
-      gridContainerDiv.style.width = '700px';
+      gridContainerDiv.style.maxWidth = '700px';
       gridContainerDiv.style.margin = 'auto';
       // Dashboards after 2022 also display a special description,
       // which is not displayed in previous years.
@@ -669,6 +768,35 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     afterNextRender(this, this.addSortEvents);
   }
 
+  _stableChanged() {
+    this.updateSummaryScores();
+  }
+
+  async updateSummaryScores() {
+    const scoreElements = this.shadowRoot.querySelectorAll('.interop-score-mobile');
+    const scores = this.stable ? this.scores.stable : this.scores.experimental;
+    const summaryFeatureName = this.dataManager.getYearProp('summaryFeatureName');
+    console.log(this.scores);
+    // If the elements have not rendered yet, don't update the scores.
+    if ((!this.isMobileScoresView && scoreElements.length !== scores.length) ||
+        (this.isMobileScoresView && scoreElements.length !== scores.length + 1)) {
+      return;
+    }
+    // // Update interop summary number first.
+    // this.updateSummaryScore(scoreElements[0], scores[scores.length - 1][summaryFeatureName]);
+    // // Update the rest of the browser scores.
+    // for (let i = 1; i < scores.length; i++) {
+    //   this.updateSummaryScore(scoreElements[i], scores[i - 1][summaryFeatureName]);
+    // }
+
+    // // Update investigation summary separately.
+    // if (this.shouldDisplayInvestigationNumber()) {
+    //   const investigationNumber = this.shadowRoot.querySelector('#investigationNumber');
+    //   this.updateSummaryScore(
+    //     investigationNumber, this.dataManager.getYearProp('investigationTotalScore'));
+    // }
+  }
+
   // Add the on-click handlers for sorting by a specific table header.
   addSortEvents() {
     const sortableHeaders = this.shadowRoot.querySelectorAll('.sortable-header');
@@ -1067,7 +1195,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     // Reverse the sort order if the same column is clicked again.
     if (this.sortColumn === i) {
       this.isSortedAsc = !this.isSortedAsc;
-    } else  {
+    } else {
       // Otherwise, sort in descending order.
       this.isSortedAsc = false;
     }

From 2fb2fe46c14dfadfc482ecd45c256425c06d9c40 Mon Sep 17 00:00:00 2001
From: DanielRyanSmith <danielrsmith@google.com>
Date: Mon, 23 Jun 2025 21:49:16 +0000
Subject: [PATCH 4/7] add color to interop totals in mobile sections

---
 webapp/components/interop-dashboard.js | 131 +++++++++++++++----------
 webapp/components/interop-summary.js   |   7 +-
 webapp/components/wpt-header.js        |  24 ++---
 3 files changed, 89 insertions(+), 73 deletions(-)

diff --git a/webapp/components/interop-dashboard.js b/webapp/components/interop-dashboard.js
index 23c721f6167..93b2a62549b 100644
--- a/webapp/components/interop-dashboard.js
+++ b/webapp/components/interop-dashboard.js
@@ -286,12 +286,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
           display: none;
         }
 
-        @media only screen and (max-width: 800px) {
+        @media only screen and (max-width: 768px) {
           .grid-container {
             margin: 0 1em;
           }
-
-          /* --- RESPONSIVE TABLE STYLES --- */
           .table-title-mobile {
             display: block;
           }
@@ -327,7 +325,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
             border-radius: 5px;
             margin-bottom: 1em;
             box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-            overflow: hidden; /* To contain the floated pseudo-elements */
+            overflow: hidden;
           }
           .score-table .subtotal-row,
           .score-table tfoot tr {
@@ -342,7 +340,6 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
             line-height: 1.5;
           }
           .score-table td[data-label="Interop"] {
-            /* Hide the separate Interop row in our new layout */
             display: none;
           }
           .score-table td:last-child {
@@ -353,7 +350,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
             font-weight: bold;
             background-color: hsl(0 0% 0% / 5%);
             border-bottom: 1px solid #ddd;
-            padding: 0; /* Padding is now on the inner element */
+            padding: 0;
           }
           .score-table td:first-child .card-header-mobile {
             padding: 0.75em;
@@ -375,7 +372,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
              content: "Progress";
           }
         }
-        @media only screen and (min-width: 801px) {
+        @media only screen and (min-width: 769px) {
           .score-table tbody > tr:nth-child(odd) {
             background: hsl(0 0% 0% / 5%);
           }
@@ -545,7 +542,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                         <td>
                           <div class="card-header-mobile">
                             <a href$="[[getTestsURL(rowName, stable)]]">[[getRowInfo(rowName, 'description')]]</a>
-                            <span class="interop-score-mobile">[[getInteropScoreForFeature(rowName, stable)]]</span>
+                            <span
+                              class="interop-score-mobile"
+                              style$="[[getScoreStyle(rowName, stable)]]"
+                            >[[getInteropScoreForFeature(rowName, stable)]]</span>
                           </div>
                         </td>
                         <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
@@ -563,7 +563,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                         <td>
                           <div class="card-header-mobile">
                             <strong>TOTAL</strong>
-                            <span class="interop-score-mobile">[[getInteropSubtotalScore(section, stable)]]</span>
+                            <span
+                              class="interop-score-mobile"
+                              style$="[[getSubtotalScoreStyle(section, stable)]]"
+                            >[[getInteropSubtotalScore(section, stable)]]</span>
                           </div>
                         </td>
                       <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
@@ -659,10 +662,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return {
       year: String,
       embedded: Boolean,
-      stable: {
-        type: Boolean,
-        observer: '_stableChanged',
-      },
+      stable: Boolean,
       feature: String,
       features: {
         type: Array,
@@ -768,33 +768,51 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     afterNextRender(this, this.addSortEvents);
   }
 
-  _stableChanged() {
-    this.updateSummaryScores();
-  }
+  calculateColor(score) {
+    const gradient = [
+      // Red.
+      { scale: 0, color: [250, 0, 0] },
+      // Orange.
+      { scale: 33.33, color: [250, 125, 0] },
+      // Yellow.
+      { scale: 66.67, color: [220, 220, 0] },
+      // Green.
+      { scale: 100, color: [0, 160, 0] },
+    ];
 
-  async updateSummaryScores() {
-    const scoreElements = this.shadowRoot.querySelectorAll('.interop-score-mobile');
-    const scores = this.stable ? this.scores.stable : this.scores.experimental;
-    const summaryFeatureName = this.dataManager.getYearProp('summaryFeatureName');
-    console.log(this.scores);
-    // If the elements have not rendered yet, don't update the scores.
-    if ((!this.isMobileScoresView && scoreElements.length !== scores.length) ||
-        (this.isMobileScoresView && scoreElements.length !== scores.length + 1)) {
-      return;
+    let color1, color2;
+    for (let i = 1; i < gradient.length; i++) {
+      if (score <= gradient[i].scale) {
+        color1 = gradient[i - 1];
+        color2 = gradient[i];
+        break;
+      }
     }
-    // // Update interop summary number first.
-    // this.updateSummaryScore(scoreElements[0], scores[scores.length - 1][summaryFeatureName]);
-    // // Update the rest of the browser scores.
-    // for (let i = 1; i < scores.length; i++) {
-    //   this.updateSummaryScore(scoreElements[i], scores[i - 1][summaryFeatureName]);
-    // }
-
-    // // Update investigation summary separately.
-    // if (this.shouldDisplayInvestigationNumber()) {
-    //   const investigationNumber = this.shadowRoot.querySelector('#investigationNumber');
-    //   this.updateSummaryScore(
-    //     investigationNumber, this.dataManager.getYearProp('investigationTotalScore'));
-    // }
+    const colorWeight = ((score - color1.scale) / (color2.scale - color1.scale));
+    const color = [
+      Math.round(color1.color[0] * (1 - colorWeight) + color2.color[0] * colorWeight),
+      Math.round(color1.color[1] * (1 - colorWeight) + color2.color[1] * colorWeight),
+      Math.round(color1.color[2] * (1 - colorWeight) + color2.color[2] * colorWeight),
+    ];
+
+    return [
+      `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
+      `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.15)`,
+    ];
+  }
+
+  getSubtotalScoreStyle(section, stable) {
+    const interopIndex = this.dataManager.getYearProp('numBrowsers');
+    const score = this.getNumericalSubtotalScore(interopIndex, section, stable);
+    const colors = this.calculateColor(score);
+    return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
+  }
+
+  getScoreStyle(feature, stable) {
+    const interopIndex = this.dataManager.getYearProp('numBrowsers');
+    const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature, stable);
+    const colors = this.calculateColor(score);
+    return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
   }
 
   // Add the on-click handlers for sorting by a specific table header.
@@ -897,23 +915,27 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return `${(total / 10).toFixed(1)}%`;
   }
 
-  getSubtotalScore(browserIndex, section, stable) {
+  getNumericalSubtotalScore(browserIndex, section, stable) {
     const scores = stable ? this.scores.stable : this.scores.experimental;
     const totalScore = section.rows.reduce((sum, rowName) => {
       return sum + scores[browserIndex][rowName];
     }, 0);
     const avg = Math.floor(totalScore / section.rows.length) / 10;
+    return avg;
+  }
+
+  getSubtotalScore(browserIndex, section, stable) {
+    const score = this.getNumericalSubtotalScore(browserIndex, section, stable);
     // Don't display decimal places for a 100% score.
-    if (avg >= 100) {
+    if (score >= 100) {
       return '100%';
     }
-    return `${avg.toFixed(1)}%`;
+    return `${score.toFixed(1)}%`;
   }
 
   getInteropSubtotalScore(section, isStable) {
     const numBrowsers = this.getYearProp('numBrowsers');
-    const score = this.getSubtotalScore(numBrowsers, section, isStable);
-    return score;
+    return this.getSubtotalScore(numBrowsers, section, isStable);
   }
 
   getSummaryOptionText() {
@@ -932,8 +954,8 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return !scoreAsGroup && !this.showBrowserIcons(index);
   }
 
-  getBrowserScoreForFeature(browserIndex, feature) {
-    const scores = this.stable ? this.scores.stable : this.scores.experimental;
+  getBrowserScoreForFeature(browserIndex, feature, stable) {
+    const scores = stable ? this.scores.stable : this.scores.experimental;
     const score = scores[browserIndex][feature];
     // Don't display decimal places for a 100% score.
     if (score / 10 >= 100) {
@@ -942,15 +964,15 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return `${(score / 10).toFixed(1)}%`;
   }
 
-  getInteropScoreForFeature(feature, isStable) {
+  getInteropScoreForFeature(feature, stable) {
     const numBrowsers = this.getYearProp('numBrowsers');
-    return this.getBrowserScoreForFeature(numBrowsers, feature, isStable);
+    return this.getBrowserScoreForFeature(numBrowsers, feature, stable);
   }
 
   // getNumericalBrowserScoreByFeature returns the same score as
   // getBrowserScoreForFeature but as a number instead of a string
-  getNumericalBrowserScoreByFeature(browserIndex, feature) {
-    const scores = this.stable ? this.scores.stable : this.scores.experimental;
+  getNumericalBrowserScoreByFeature(browserIndex, feature, stable) {
+    const scores = stable ? this.scores.stable : this.scores.experimental;
     const score = scores[browserIndex][feature];
     const roundedScore = Math.round(score * 100) / 100;
     return roundedScore / 10;
@@ -974,9 +996,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     }
 
     const summaryFeatureName = this.getYearProp('summaryFeatureName');
-    this.totalChromium = this.getBrowserScoreForFeature(0, summaryFeatureName);
-    this.totalFirefox = this.getBrowserScoreForFeature(1, summaryFeatureName);
-    this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName);
+    this.totalChromium = this.getBrowserScoreForFeature(0, summaryFeatureName, this.stable);
+    this.totalFirefox = this.getBrowserScoreForFeature(1, summaryFeatureName, this.stable);
+    this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName, this.stable);
   }
 
   updateUrlParams(embedded, stable, feature, isMobileScoresView) {
@@ -1141,7 +1163,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     const individualScores = [];
     for (let i = 0; i < rows.length; i++) {
       const feature = rows[i];
-      individualScores[i] = [feature, this.getNumericalBrowserScoreByFeature(browserIndex, feature)];
+      individualScores[i] = [
+        feature,
+        this.getNumericalBrowserScoreByFeature(browserIndex, feature, this.stable)
+      ];
     }
     individualScores.sort((a, b) => a[1] - b[1]);
     for (let i = 0; i < individualScores.length; i++) {
diff --git a/webapp/components/interop-summary.js b/webapp/components/interop-summary.js
index 7e0dde66b22..a3e6c918c28 100644
--- a/webapp/components/interop-summary.js
+++ b/webapp/components/interop-summary.js
@@ -93,30 +93,25 @@ class InteropSummary extends PolymerElement {
           display: none;
         }
 
-        /* Media Query for Mobile Devices */
         @media (max-width: 768px) {
           .summary-container {
             min-height: 340px;
           }
-
           .summary-number {
             font-size: 2em;
             width: 2.5ch;
             height: 2.5ch;
             padding: 5px;
           }
-
           #totalSummaryRow > .summary-flex-item > .summary-number {
             font-size: 4em;
             width: 2.5ch;
             height: 2.5ch;
             padding: 4px;
           }
-
           .browser-score {
             font-size: 2em;
           }
-
           .summary-browser-name > figure > figcaption {
             line-height: 1.1;
             margin: 0 -10px;
@@ -239,7 +234,7 @@ class InteropSummary extends PolymerElement {
     }
 
     const summaryDiv = this.shadowRoot.querySelector('.summary-container');
-    if (window.innerWidth > 768) {
+    if (window.innerWidth > 800) {
       summaryDiv.style.minHeight = SUMMARY_CONTAINER_MIN_HEIGHTS[this.year] || '470px';
     }
     // Don't display the interop score for Interop 2021.
diff --git a/webapp/components/wpt-header.js b/webapp/components/wpt-header.js
index e6473a89200..75ad07a892f 100644
--- a/webapp/components/wpt-header.js
+++ b/webapp/components/wpt-header.js
@@ -55,7 +55,7 @@ class WPTHeader extends WPTFlags(PolymerElement) {
         justify-content: space-between;
       }
       .mobile-title {
-        display: none; /* Shown on desktop via media query */
+        display: none;
       }
       .logo-area > a {
         align-items: center;
@@ -67,11 +67,11 @@ class WPTHeader extends WPTFlags(PolymerElement) {
         vertical-align: middle;
       }
       .login-area {
-        display: none; /* Shown on desktop via media query */
+        display: none;
       }
 
       .menu-button {
-        display: none; /* Hidden on desktop */
+        display: none;
         flex-direction: column;
         justify-content: space-around;
         width: 30px;
@@ -80,7 +80,7 @@ class WPTHeader extends WPTFlags(PolymerElement) {
         border: none;
         cursor: pointer;
         padding: 0;
-        z-index: 1001; /* Above the nav panel */
+        z-index: 3;
       }
       .menu-button span {
         display: block;
@@ -100,11 +100,10 @@ class WPTHeader extends WPTFlags(PolymerElement) {
       .menu-button.open span:nth-of-type(3) {
         transform: rotate(-45deg) translate(7px, -7px);
       }
+
       header nav a {
         margin-right: 1em;
       }
-
-      /* Navigation Links */
       .nav-links {
         display: flex;
         align-items: center;
@@ -118,7 +117,6 @@ class WPTHeader extends WPTFlags(PolymerElement) {
         margin-right: 0;
       }
 
-      /* Mobile Styles */
       @media (max-width: 768px) {
         header h1 {
           margin-bottom: 0;
@@ -136,7 +134,7 @@ class WPTHeader extends WPTFlags(PolymerElement) {
           display: flex;
         }
         .menu-button {
-          display: flex; /* Show button on mobile */
+          display: flex;
         }
         .nav-links {
           display: flex;
@@ -153,8 +151,6 @@ class WPTHeader extends WPTFlags(PolymerElement) {
           max-width: 300px;
           padding-top: 6em;
           box-shadow: -2px 0 8px rgba(0,0,0,0.1);
-          
-          /* Hidden by default, slides in */
           transform: translateX(100%);
           transition: transform 0.3s ease-in-out;
         }
@@ -168,16 +164,14 @@ class WPTHeader extends WPTFlags(PolymerElement) {
           padding: 0.5em 0;
           margin: 0;
         }
-        /* Hide the main nav container, but not the links inside the panel */
         nav {
           display: none;
         }
       }
 
-      /* Desktop Styles */
       @media (min-width: 769px) {
         .login-area {
-          display: block; /* Show login on desktop */
+          display: block;
         }
 
         #mobile-navigation {
@@ -195,7 +189,9 @@ class WPTHeader extends WPTFlags(PolymerElement) {
         <h1>
       </div>
       <template is="dom-if" if="[[githubLogin]]">
-        <github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
+        <div id="desktop-login">
+          <github-login user="[[user]]" is-triage-mode="[[isTriageMode]]"></github-login>
+        </div>
       </template>
       <button
           class$="[[_computeMenuButtonClass(_isMenuOpen)]]"

From ba63939e9bcd8af57ec0bf5ba7a002712d135eb6 Mon Sep 17 00:00:00 2001
From: DanielRyanSmith <danielrsmith@google.com>
Date: Thu, 26 Jun 2025 02:39:44 +0000
Subject: [PATCH 5/7] changes suggested by @jcscottiii

---
 webapp/components/interop-dashboard.js | 59 ++++++++++++++------------
 webapp/components/interop-summary.js   | 34 +++++++--------
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/webapp/components/interop-dashboard.js b/webapp/components/interop-dashboard.js
index 93b2a62549b..b771f87d930 100644
--- a/webapp/components/interop-dashboard.js
+++ b/webapp/components/interop-dashboard.js
@@ -768,6 +768,14 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     afterNextRender(this, this.addSortEvents);
   }
 
+  /**
+   * Generates a font and background color based on a score from 0 to 100.
+   * The colors are calculated on a gradient from red to green.
+   *
+   * @param {number} score - The score, ranging from 0 to 100.
+   * @returns {[string, string]} An array containing the font color as an RGB
+   * string and the background color as an RGBA string with 15% opacity.
+   */
   calculateColor(score) {
     const gradient = [
       // Red.
@@ -801,16 +809,16 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     ];
   }
 
-  getSubtotalScoreStyle(section, stable) {
+  getSubtotalScoreStyle(section, isStable) {
     const interopIndex = this.dataManager.getYearProp('numBrowsers');
-    const score = this.getNumericalSubtotalScore(interopIndex, section, stable);
+    const score = this.getNumericalSubtotalScore(interopIndex, section, isStable);
     const colors = this.calculateColor(score);
     return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
   }
 
-  getScoreStyle(feature, stable) {
+  getScoreStyle(feature, isStable) {
     const interopIndex = this.dataManager.getYearProp('numBrowsers');
-    const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature, stable);
+    const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature, isStable);
     const colors = this.calculateColor(score);
     return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
   }
@@ -825,10 +833,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return feature === this.feature;
   }
 
-  featureLinks(feature, stable) {
+  featureLinks(feature, isStable) {
     const data = this.getYearProp('focusAreas')[feature];
     const rawURL = (this.isMobileScoresView) ? data?.mobile_tests : data?.tests;
-    const testsURL = this.formatTestsURL(rawURL, stable);
+    const testsURL = this.formatTestsURL(rawURL, isStable);
 
     return [
       { text: 'Spec', href: data?.spec },
@@ -846,7 +854,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
   }
 
   // Add the stable or experimental label to a tests URL depending on the view.
-  formatTestsURL(testsURL, stable) {
+  formatTestsURL(testsURL, isStable) {
     // Don't try to add a label if the URL is undefined or empty.
     if (!testsURL) {
       return '';
@@ -863,7 +871,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     // Remove any existing stable or experimental label param.
     const newLabels = existingLabels.filter(val => val !== 'stable' && val !== 'experimental');
     // Add the stable/experimental label depending on the dashboard view.
-    newLabels.push(stable ? 'stable' : 'experimental');
+    newLabels.push(isStable ? 'stable' : 'experimental');
     // Delete the existing label params and re-add them.
     url.searchParams.delete('label');
     for (const labelValue of newLabels) {
@@ -874,9 +882,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
   }
 
   // Get the tests URL for a row and add the stable/experimental label.
-  getTestsURL(name, stable) {
+  getTestsURL(name, isStable) {
     const urlKey = (this.isMobileScoresView) ? 'mobile_tests' : 'tests';
-    return this.formatTestsURL(this.getRowInfo(name, urlKey), stable);
+    return this.formatTestsURL(this.getRowInfo(name, urlKey), isStable);
   }
 
   getInvestigationScore(rowName, isPreviousYear) {
@@ -915,17 +923,16 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return `${(total / 10).toFixed(1)}%`;
   }
 
-  getNumericalSubtotalScore(browserIndex, section, stable) {
-    const scores = stable ? this.scores.stable : this.scores.experimental;
+  getNumericalSubtotalScore(browserIndex, section, isStable) {
+    const scores = isStable ? this.scores.stable : this.scores.experimental;
     const totalScore = section.rows.reduce((sum, rowName) => {
       return sum + scores[browserIndex][rowName];
     }, 0);
-    const avg = Math.floor(totalScore / section.rows.length) / 10;
-    return avg;
+    return Math.floor(totalScore / section.rows.length) / 10;
   }
 
-  getSubtotalScore(browserIndex, section, stable) {
-    const score = this.getNumericalSubtotalScore(browserIndex, section, stable);
+  getSubtotalScore(browserIndex, section, isStable) {
+    const score = this.getNumericalSubtotalScore(browserIndex, section, isStable);
     // Don't display decimal places for a 100% score.
     if (score >= 100) {
       return '100%';
@@ -954,8 +961,8 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return !scoreAsGroup && !this.showBrowserIcons(index);
   }
 
-  getBrowserScoreForFeature(browserIndex, feature, stable) {
-    const scores = stable ? this.scores.stable : this.scores.experimental;
+  getBrowserScoreForFeature(browserIndex, feature, isStable) {
+    const scores = isStable ? this.scores.stable : this.scores.experimental;
     const score = scores[browserIndex][feature];
     // Don't display decimal places for a 100% score.
     if (score / 10 >= 100) {
@@ -964,15 +971,15 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return `${(score / 10).toFixed(1)}%`;
   }
 
-  getInteropScoreForFeature(feature, stable) {
+  getInteropScoreForFeature(feature, isStable) {
     const numBrowsers = this.getYearProp('numBrowsers');
-    return this.getBrowserScoreForFeature(numBrowsers, feature, stable);
+    return this.getBrowserScoreForFeature(numBrowsers, feature, isStable);
   }
 
   // getNumericalBrowserScoreByFeature returns the same score as
   // getBrowserScoreForFeature but as a number instead of a string
-  getNumericalBrowserScoreByFeature(browserIndex, feature, stable) {
-    const scores = stable ? this.scores.stable : this.scores.experimental;
+  getNumericalBrowserScoreByFeature(browserIndex, feature, isStable) {
+    const scores = isStable ? this.scores.stable : this.scores.experimental;
     const score = scores[browserIndex][feature];
     const roundedScore = Math.round(score * 100) / 100;
     return roundedScore / 10;
@@ -1001,7 +1008,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName, this.stable);
   }
 
-  updateUrlParams(embedded, stable, feature, isMobileScoresView) {
+  updateUrlParams(embedded, isStable, feature, isMobileScoresView) {
     // Our observer may be called before the feature is set, so debounce that.
     if (feature === undefined) {
       return;
@@ -1011,7 +1018,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     if (feature && feature !== this.getYearProp('summaryFeatureName')) {
       params.push(`feature=${feature}`);
     }
-    if (stable) {
+    if (isStable) {
       params.push('stable');
     }
     if (embedded) {
@@ -1075,12 +1082,12 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     this.toggleMobileView(true, false);
   }
 
-  toggleMobileView(showMobileScores, stable) {
+  toggleMobileView(showMobileScores, isStable) {
     let queryString = '';
     if (showMobileScores) {
       queryString += 'mobile-view';
     }
-    if (stable) {
+    if (isStable) {
       queryString += (queryString.length) ? '&stable' : 'stable';
     }
     if (queryString.length) {
diff --git a/webapp/components/interop-summary.js b/webapp/components/interop-summary.js
index a3e6c918c28..36805dc75f7 100644
--- a/webapp/components/interop-summary.js
+++ b/webapp/components/interop-summary.js
@@ -9,18 +9,6 @@ import '../node_modules/@polymer/polymer/lib/elements/dom-if.js';
 import { html, PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js';
 import {afterNextRender} from  '../node_modules/@polymer/polymer/lib/utils/render-status.js';
 
-// This min-height is added to this section to ensure that the section below
-// is not moved after the user selects between STABLE and EXPERIMENTAL
-// (experimental browser names are longer and add additional lines).
-// Different years have different initial heights for these sections.
-const SUMMARY_CONTAINER_MIN_HEIGHTS = {
-  '2021': '275px',
-  '2022': '470px',
-  '2023': '470px',
-  '2024': '380px',
-  '2025': '380px',
-};
-
 
 class InteropSummary extends PolymerElement {
   static get template() {
@@ -29,6 +17,9 @@ class InteropSummary extends PolymerElement {
       <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
 
       <style>
+        #interopSummary[data-year="2021"] {
+          display: none;
+        }
         .summary-number-row {
           display: flex;
           justify-content: center;
@@ -37,7 +28,7 @@ class InteropSummary extends PolymerElement {
         }
 
         .summary-container {
-          min-height: 470px;
+          min-height: 380px;
         }
 
         .summary-number {
@@ -93,6 +84,15 @@ class InteropSummary extends PolymerElement {
           display: none;
         }
 
+        .summary-container[data-year="2021"] {
+          min-height: 275px;
+        }
+
+        .summary-container[data-year="2022"],
+        .summary-container[data-year="2023"] {
+          min-height: 470px;
+        }
+
         @media (max-width: 768px) {
           .summary-container {
             min-height: 340px;
@@ -118,10 +118,10 @@ class InteropSummary extends PolymerElement {
           }
         }
       </style>
-      <div class="summary-container">
+      <div class="summary-container" data-year$="[[year]]">
         <div class="summary-number-row" id="totalSummaryRow">
           <!-- Interop -->
-          <div id="interopSummary" class="summary-flex-item" tabindex="0">
+          <div id="interopSummary" class="summary-flex-item" tabindex="0" data-year$="[[year]]">
             <div class="summary-number score-number smaller-summary-number">--</div>
             <h3 class="summary-title">INTEROP</h3>
           </div>
@@ -233,10 +233,6 @@ class InteropSummary extends PolymerElement {
       investigationDiv.style.display = 'none';
     }
 
-    const summaryDiv = this.shadowRoot.querySelector('.summary-container');
-    if (window.innerWidth > 800) {
-      summaryDiv.style.minHeight = SUMMARY_CONTAINER_MIN_HEIGHTS[this.year] || '470px';
-    }
     // Don't display the interop score for Interop 2021.
     if (this.year === '2021') {
       const interopDiv = this.shadowRoot.querySelector('#interopSummary');

From 7b4eaf21abf5ac4ec05a67277f7ab1e28d2ded8b Mon Sep 17 00:00:00 2001
From: DanielRyanSmith <danielrsmith@google.com>
Date: Thu, 26 Jun 2025 03:54:48 +0000
Subject: [PATCH 6/7] move calculateColor to utils file

---
 webapp/components/interop-dashboard.js | 46 ++----------------
 webapp/components/interop-summary.js   | 36 +--------------
 webapp/components/test/test-utils.html | 64 ++++++++++++++++++++++++++
 webapp/components/utils.js             | 42 +++++++++++++++++
 4 files changed, 111 insertions(+), 77 deletions(-)
 create mode 100644 webapp/components/test/test-utils.html

diff --git a/webapp/components/interop-dashboard.js b/webapp/components/interop-dashboard.js
index b771f87d930..162a4b80018 100644
--- a/webapp/components/interop-dashboard.js
+++ b/webapp/components/interop-dashboard.js
@@ -6,6 +6,7 @@
 
 import { InteropDataManager } from './interop-data-manager.js';
 import { WPTFlags } from './wpt-flags.js';
+import { calculateColor } from './utils.js';
 import '../node_modules/@polymer/paper-button/paper-button.js';
 import '../node_modules/@polymer/polymer/lib/elements/dom-if.js';
 import '../node_modules/@polymer/paper-icon-button/paper-icon-button.js';
@@ -768,58 +769,17 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     afterNextRender(this, this.addSortEvents);
   }
 
-  /**
-   * Generates a font and background color based on a score from 0 to 100.
-   * The colors are calculated on a gradient from red to green.
-   *
-   * @param {number} score - The score, ranging from 0 to 100.
-   * @returns {[string, string]} An array containing the font color as an RGB
-   * string and the background color as an RGBA string with 15% opacity.
-   */
-  calculateColor(score) {
-    const gradient = [
-      // Red.
-      { scale: 0, color: [250, 0, 0] },
-      // Orange.
-      { scale: 33.33, color: [250, 125, 0] },
-      // Yellow.
-      { scale: 66.67, color: [220, 220, 0] },
-      // Green.
-      { scale: 100, color: [0, 160, 0] },
-    ];
-
-    let color1, color2;
-    for (let i = 1; i < gradient.length; i++) {
-      if (score <= gradient[i].scale) {
-        color1 = gradient[i - 1];
-        color2 = gradient[i];
-        break;
-      }
-    }
-    const colorWeight = ((score - color1.scale) / (color2.scale - color1.scale));
-    const color = [
-      Math.round(color1.color[0] * (1 - colorWeight) + color2.color[0] * colorWeight),
-      Math.round(color1.color[1] * (1 - colorWeight) + color2.color[1] * colorWeight),
-      Math.round(color1.color[2] * (1 - colorWeight) + color2.color[2] * colorWeight),
-    ];
-
-    return [
-      `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
-      `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.15)`,
-    ];
-  }
-
   getSubtotalScoreStyle(section, isStable) {
     const interopIndex = this.dataManager.getYearProp('numBrowsers');
     const score = this.getNumericalSubtotalScore(interopIndex, section, isStable);
-    const colors = this.calculateColor(score);
+    const colors = calculateColor(score);
     return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
   }
 
   getScoreStyle(feature, isStable) {
     const interopIndex = this.dataManager.getYearProp('numBrowsers');
     const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature, isStable);
-    const colors = this.calculateColor(score);
+    const colors = calculateColor(score);
     return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
   }
 
diff --git a/webapp/components/interop-summary.js b/webapp/components/interop-summary.js
index 36805dc75f7..70bc5e97f12 100644
--- a/webapp/components/interop-summary.js
+++ b/webapp/components/interop-summary.js
@@ -4,6 +4,7 @@
  * found in the LICENSE file.
  */
 
+import { calculateColor } from './utils.js';
 import { CountUp } from '../node_modules/countup.js/dist/countUp.js';
 import '../node_modules/@polymer/polymer/lib/elements/dom-if.js';
 import { html, PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js';
@@ -272,7 +273,7 @@ class InteropSummary extends PolymerElement {
     new CountUp(number, score, {
       startVal: curScore === '--' ? 0 : curScore
     }).start();
-    const colors = this.calculateColor(score);
+    const colors = calculateColor(score);
     number.style.color = `color-mix(in lch, ${colors[0]} 70%, black)`;
     number.style.backgroundColor = colors[1];
   }
@@ -336,38 +337,5 @@ class InteropSummary extends PolymerElement {
   getBrowserNameParts(browserInfo) {
     return [browserInfo.tableName, ...browserInfo.experimentalName.split(' ')];
   }
-
-  calculateColor(score) {
-    const gradient = [
-      // Red.
-      { scale: 0, color: [250, 0, 0] },
-      // Orange.
-      { scale: 33.33, color: [250, 125, 0] },
-      // Yellow.
-      { scale: 66.67, color: [220, 220, 0] },
-      // Green.
-      { scale: 100, color: [0, 160, 0] },
-    ];
-
-    let color1, color2;
-    for (let i = 1; i < gradient.length; i++) {
-      if (score <= gradient[i].scale) {
-        color1 = gradient[i - 1];
-        color2 = gradient[i];
-        break;
-      }
-    }
-    const colorWeight = ((score - color1.scale) / (color2.scale - color1.scale));
-    const color = [
-      Math.round(color1.color[0] * (1 - colorWeight) + color2.color[0] * colorWeight),
-      Math.round(color1.color[1] * (1 - colorWeight) + color2.color[1] * colorWeight),
-      Math.round(color1.color[2] * (1 - colorWeight) + color2.color[2] * colorWeight),
-    ];
-
-    return [
-      `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
-      `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.15)`,
-    ];
-  }
 }
 export { InteropSummary };
diff --git a/webapp/components/test/test-utils.html b/webapp/components/test/test-utils.html
new file mode 100644
index 00000000000..1ff28531979
--- /dev/null
+++ b/webapp/components/test/test-utils.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/webcomponents-loader.js"></script>
+  <script src="https://unpkg.com/wct-browser-legacy@1.0.2/browser.js"></script>
+</head>
+
+<body>
+  <script type="module">
+    import { calculateColor } from '../utils.js';
+
+    suite('calculateColor', () => {
+      test('should return pure red for a score of 0', () => {
+        const expected = ['rgb(250, 0, 0)', 'rgba(250, 0, 0, 0.15)'];
+        assert.deepEqual(calculateColor(0), expected);
+      });
+
+      test('should return pure green for a score of 100', () => {
+        const expected = ['rgb(0, 160, 0)', 'rgba(0, 160, 0, 0.15)'];
+        assert.deepEqual(calculateColor(100), expected);
+      });
+
+      test('should return the exact color for a gradient stop (Orange)', () => {
+        const expected = ['rgb(250, 125, 0)', 'rgba(250, 125, 0, 0.15)'];
+        assert.deepEqual(calculateColor(33.33), expected);
+      });
+
+      test('should return the exact color for a gradient stop (Yellow)', () => {
+        const expected = ['rgb(220, 220, 0)', 'rgba(220, 220, 0, 0.15)'];
+        assert.deepEqual(calculateColor(66.67), expected);
+      });
+
+      test('should return a color halfway between red and orange', () => {
+        // Midpoint score: (0 + 33.33) / 2 = 16.665
+        // Red component: round(250 * 0.5 + 250 * 0.5) = 250
+        // Green component: round(0 * 0.5 + 125 * 0.5) = 63
+        // Blue component: round(0 * 0.5 + 0 * 0.5) = 0
+        const expected = ['rgb(250, 63, 0)', 'rgba(250, 63, 0, 0.15)'];
+        assert.deepEqual(calculateColor(16.665), expected);
+      });
+
+      test('should return a color at an arbitrary point between orange and yellow', () => {
+        // weight = (50 - 33.33) / (66.67 - 33.33) = 16.67 / 33.34 ≈ 0.5
+        // Let w = 16.67 / 33.34
+        // R = round(250 * (1-w) + 220 * w) = round(125.025 + 109.989) = 235
+        // G = round(125 * (1-w) + 220 * w) = round(62.5125 + 109.989) = 173
+        // B = round(0 * (1-w) + 0 * w) = 0
+        const expected = ['rgb(235, 173, 0)', 'rgba(235, 173, 0, 0.15)'];
+        assert.deepEqual(calculateColor(50), expected);
+      });
+
+      test('should return a color halfway between yellow and green', () => {
+        // Midpoint score: (66.67 + 100) / 2 = 83.335
+        // R: round(220 * 0.5 + 0 * 0.5) = 110
+        // G: round(220 * 0.5 + 160 * 0.5) = 190
+        // B: round(0 * 0.5 + 0 * 0.5) = 0
+        const expected = ['rgb(110, 190, 0)', 'rgba(110, 190, 0, 0.15)'];
+        assert.deepEqual(calculateColor(83.335), expected);
+      });
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/webapp/components/utils.js b/webapp/components/utils.js
index b859345a69d..11203f4f724 100644
--- a/webapp/components/utils.js
+++ b/webapp/components/utils.js
@@ -20,4 +20,46 @@ function timeTaken(millis) {
   return `${s} seconds`;
 }
 
+/**
+ * Generates a font and background color for percentages on the Interop
+ * dashboardbased on a score from 0 to 100. The colors are calculated on a
+ * gradient from red to green.
+ *
+ * @param {number} score - The score, ranging from 0 to 100.
+ * @returns {[string, string]} An array containing the font color as an RGB
+ * string and the background color as an RGBA string with 15% opacity.
+ */
+export function calculateColor(score) {
+  const gradient = [
+    // Red.
+    { scale: 0, color: [250, 0, 0] },
+    // Orange.
+    { scale: 33.33, color: [250, 125, 0] },
+    // Yellow.
+    { scale: 66.67, color: [220, 220, 0] },
+    // Green.
+    { scale: 100, color: [0, 160, 0] },
+  ];
+
+  let color1, color2;
+  for (let i = 1; i < gradient.length; i++) {
+    if (score <= gradient[i].scale) {
+      color1 = gradient[i - 1];
+      color2 = gradient[i];
+      break;
+    }
+  }
+  const colorWeight = ((score - color1.scale) / (color2.scale - color1.scale));
+  const color = [
+    Math.round(color1.color[0] * (1 - colorWeight) + color2.color[0] * colorWeight),
+    Math.round(color1.color[1] * (1 - colorWeight) + color2.color[1] * colorWeight),
+    Math.round(color1.color[2] * (1 - colorWeight) + color2.color[2] * colorWeight),
+  ];
+
+  return [
+    `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
+    `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.15)`,
+  ];
+}
+
 export { timeTaken };

From 02f809974412616563e3401870afd4ad2aad2b96 Mon Sep 17 00:00:00 2001
From: DanielRyanSmith <danielrsmith@google.com>
Date: Thu, 26 Jun 2025 04:25:52 +0000
Subject: [PATCH 7/7] make sure CSS is applied on mobile

---
 webapp/components/interop-summary.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/webapp/components/interop-summary.js b/webapp/components/interop-summary.js
index 70bc5e97f12..3b5f3b59c6e 100644
--- a/webapp/components/interop-summary.js
+++ b/webapp/components/interop-summary.js
@@ -95,8 +95,13 @@ class InteropSummary extends PolymerElement {
         }
 
         @media (max-width: 768px) {
-          .summary-container {
-            min-height: 340px;
+          .summary-container,
+          .summary-container[data-year="2022"],
+          .summary-container[data-year="2023"] {
+            min-height: 335px;
+          }
+          .summary-container[data-year="2021"] {
+            min-height: 185px;
           }
           .summary-number {
             font-size: 2em;