Add better mobile layout for interop dashboard

Author: DanielRyanSmith

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>

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');

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>

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">