From 652cffb5fd97a193a94f1013bba1a6ddc01e5e48 Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Mon, 31 Mar 2025 02:38:52 +0200
Subject: [PATCH 1/6] update dropdown hovers, tech icons, gradients,

---
 src/js/components/drilldownHeader.js          |   6 +
 src/js/techreport/index.js                    |   4 +
 src/js/techreport/tableLinked.js              |  10 +-
 static/css/techreport/general.css             |   1 +
 static/css/techreport/techreport.css          | 399 ++++++++----------
 templates/techreport/category.html            | 208 ++++-----
 templates/techreport/comparison.html          | 176 ++++----
 .../components/filter_breakdown.html          |   8 +-
 .../techreport/components/table_linked.html   |   6 +-
 templates/techreport/drilldown.html           | 200 ++++-----
 templates/techreport/templates/filters.html   |  32 +-
 .../techreport/templates/selector_tech.html   |   8 +-
 12 files changed, 528 insertions(+), 530 deletions(-)

diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js
index 95987592..957994e7 100644
--- a/src/js/components/drilldownHeader.js
+++ b/src/js/components/drilldownHeader.js
@@ -35,6 +35,9 @@ function setCategories(categories) {
       cellTemplate.textContent = `+ ${more} more`;
       list.appendChild(cellTemplate);
     }
+  } else {
+    const list = document.querySelector('.intro .category-list');
+    list.remove();
   }
 }
 
@@ -42,6 +45,9 @@ function setDescription(description) {
   if(description && description !== "") {
     const descr = document.querySelector('p.app-description');
     descr.textContent = description;
+  } else {
+    const descr = document.querySelector('p.app-description');
+    descr.remove();
   }
 }
 
diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js
index ae4fe58e..7f73cf5d 100644
--- a/src/js/techreport/index.js
+++ b/src/js/techreport/index.js
@@ -355,6 +355,8 @@ class TechReport {
       },
     ];
 
+    const filters = document.querySelectorAll('.filters select');
+    filters.forEach(filter => filter.setAttribute('disabled', 'true'));
     Promise.all(filterApis.map(api => {
       const url = `${Constants.apiBase}/${api.endpoint}`;
 
@@ -369,6 +371,8 @@ class TechReport {
       FilterComponent.updateTechnologies();
       FilterComponent.updateRank();
       FilterComponent.updateGeo();
+
+      filters.forEach(filter => filter.removeAttribute('disabled'));
     });
   }
 
diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js
index fd2b792c..a0b02f2d 100644
--- a/src/js/techreport/tableLinked.js
+++ b/src/js/techreport/tableLinked.js
@@ -35,8 +35,6 @@ class TableLinked {
 
     this.dataArray = this.dataArray.filter(row => row.length > 0);
 
-    console.log('set content', content, this.dataArray);
-
     const isContent = content?.length > 0 || this.dataArray?.length > 0;
 
     if(tbody && isContent) {
@@ -105,17 +103,21 @@ class TableLinked {
               cell = document.createElement('th');
               cell.classList.add('app-cell');
 
+              const wrapper = document.createElement('span');
+              wrapper.classList.add('app-wrapper');
+
               const img = document.createElement('span');
               const imgUrl = `https://cdn.httparchive.org/static/icons/${formattedApp}.png`;
               img.setAttribute('aria-hidden', 'true');
               img.setAttribute('style', `background-image: url(${imgUrl})`);
               img.classList.add('app-img');
-              cell.append(img);
+              wrapper.append(img);
 
               const link = document.createElement('a');
               link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`);
               link.innerHTML = formattedApp;
-              cell.append(link);
+              wrapper.append(link);
+              cell.append(wrapper);
             } else if (column.type === 'checkbox') {
               cell = this.addColumnCheckbox(app);
             } else if(column.key === 'client') {
diff --git a/static/css/techreport/general.css b/static/css/techreport/general.css
index cb3fd9c6..d5ea5bc9 100644
--- a/static/css/techreport/general.css
+++ b/static/css/techreport/general.css
@@ -69,6 +69,7 @@ nav li:hover {
   background: var(--color-card-background);
   border-radius: var(--card-radius);
   border: 1px solid var(--color-card-border-light);
+  border: 1px solid var(--color-card-border);
   box-shadow: var(--card-shadow);
   transition: padding 0.35s;
 }
diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css
index 1f4dd878..f9796a1d 100644
--- a/static/css/techreport/techreport.css
+++ b/static/css/techreport/techreport.css
@@ -11,39 +11,66 @@
   --color-blue-100: #eff7ff;
   --color-blue-light: #e1f1ff;
   --color-gray-medium: #5c5c5d;
+  --color-gray-light: #f6f6f7;
   --color-teal-vibrant: #1c818d;
   --color-teal-vibrant-darker: #136e78;
+  --color-yellow-light: #fefae5;
+  --color-yellow-dark: #B08705;
 
   /* Colors based on function */
+  /* Regular text */
   --color-link: var(--color-blue-dark);
   --color-text: #444;
   --color-text-lighter: #5f6768;
   --color-text-darker: #1e1e1e;
   --color-text-inverted: #fff;
+
+  /* Cards */
   --color-card-background: #fff;
   --color-card-border: #cdd4d6;
   --color-card-border-light: #e8e8e8;
+
+  /* Page */
   --color-page-background: #f4f4f4;
+  --color-bg-gradient: var(--color-teal-faded);
+  --color-page-border: var(--color-teal-medium);
+
+  /* Checkboxes */
   --color-checkbox: var(--color-blue-dark);
   --color-checkbox-selected: var(--color-blue-dark);
   --color-checkbox-button-selected: var(--color-blue-light);
   --color-checkbox-button-label: var(--color-text);
   --color-checkbox-button-label-selected: var(--color-text);
+
+  /* Buttons */
+  --color-button-background: var(--color-teal-vibrant);
+  --color-button-background-hover: var(--color-teal-vibrant-darker);
+  --color-button-text: #fff;
   --color-theme-toggle-background: #f4f4f4;
-  --color-bg-gradient: var(--color-teal-faded);
-  --color-page-border: var(--color-teal-medium);
   --color-tooltip-background: var(--color-card-background);
   --color-tooltip-border: var(--color-card-border);
+
+  /* Dropdowns */
+  --color-dropdown-background: transparent;
+  --color-dropdown-background-disabled: var(--color-gray-light);
+  --color-dropdown-text: var(--color-text);
+  --color-dropdown-text-disabled: var(--color-text-lighter);
+  --color-dropdown-border-disabled: #aeb1b3;
+
+  /* Navigation */
   --color-nav: #667a7d;
   --color-nav-active: var(--color-teal-accent);
   --color-nav-inactive: var(--color-teal-medium);
-  --color-button-background: var(--color-teal-vibrant);
-  --color-button-background-hover: var(--color-teal-vibrant-darker);
-  --color-button-text: #fff;
-  --color-progress-basic-border: #8e9799;
+
+  /* Charts */
+  --color-progress-basic-border: #879092;
   --color-progress-basic-bg: #eee;
   --color-progress-basic-fill: #3a5c63;
 
+  /* Tables */
+  --color-table-selected-bg: var(--color-yellow-light);
+  --color-table-selected-border: var(--color-yellow-dark);
+
   /* Font sizes */
   --font-size-small: 0.875rem;
   --font-size-regular: 1rem;
@@ -55,6 +82,7 @@
   --card-shadow: 0 3px 12px 0px rgba(106, 121, 124, 0.2);
   --card-radius: 0.625rem;
   --table-row-hover: var(--color-blue-100);
+  --table-row-hover-border: var(--color-blue-dark);
   --color-panel-text: #203b40;
   --color-panel-background: #bfe1e7;
 
@@ -168,6 +196,100 @@ nav {
   font-weight: 600;
 }
 
+/* Dropdowns */
+.default-dropdown-label {
+  margin-bottom: 0.5rem;
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  width: 100%;
+}
+
+.default-dropdown {
+  width: 100%;
+  margin-bottom: 0;
+  border: 1px solid #959494;
+  appearance: none;
+  background-color: transparent;
+  color: var(--color-text-darker);
+  font-size: 0.9rem;
+  border-color: var(--color-text-lighter);
+  padding: 0.5rem;
+  z-index: 4;
+  position: relative;
+}
+
+.default-dropdown-group:not(:first-of-type) {
+  margin-top: 1.5rem;
+}
+
+.default-dropdown-wrapper {
+  position: relative;
+}
+
+.default-dropdown-wrapper::before {
+  content: "";
+  display: block;
+  width: 2.5rem;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  border-radius: 0 4px 4px 0;
+  z-index: 2;
+}
+
+.default-dropdown-wrapper::after {
+  content: "";
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  top: calc(50% - 0.25rem);
+  border-bottom: 1.5px solid var(--color-text-darker);
+  border-left: 1.5px solid var(--color-text-darker);
+  border-radius: 1px;
+  transform: rotate(-45deg);
+  z-index: 3;
+}
+
+.default-dropdown:not(:disabled):is(:focus-visible, :hover) {
+  background-image: linear-gradient(-90deg, var(--color-teal-light), var(--color-teal-light));
+  background-repeat: no-repeat;
+  background-size: calc(100% - 2.5rem) 100%;
+}
+
+.default-dropdown-wrapper:has(select:not(:disabled):is(:focus-visible, :hover))::before {
+  background-color: var(--color-text-darker);
+  border-left: 1px solid var(--color-text-darker);
+}
+
+.default-dropdown-wrapper:has(select:is(:focus-visible, :hover))::after {
+  border-color: var(--color-page-background);
+}
+
+.default-dropdown-wrapper:has(select:focus-visible) {
+  background-color: var(--color-page-background);
+  color: var(--color-text);
+}
+
+[data-theme="dark"] select option,
+[data-theme="dark"] .default-dropdown-wrapper:has(select:focus-visible) select {
+  color: var(--color-page-background) !important;
+  background-color: var(--color-text-darker) !important;
+}
+
+.default-dropdown:disabled {
+  background-color: var(--color-dropdown-background-disabled);
+  color: var(--color-dropdown-text-disabled);
+  border-color: var(--color-dropdown-border-disabled);
+}
+
+.default-dropdown-wrapper:has(select:disabled):after {
+  border-color: var(--color-dropdown-text-disabled);
+}
+
 /* -------------------- */
 /* ---- Components ---- */
 /* -------------------- */
@@ -423,8 +545,7 @@ nav {
   width: 100%;
 }
 
-#page-filters .lens .select-label select,
-.breakdown select {
+#page-filters .lens .select-label select {
   color: var(--color-text-darker);
   font-size: 0.9rem;
   width: 100%;
@@ -432,128 +553,15 @@ nav {
   padding: 0.825rem;
 }
 
-.breakdown select {
-  background-color: transparent;
-  appearance: none;
-  margin: 0;
-  border: none;
-}
-
-#page-filters .lens .select-label:not(:last-of-type) {
-  margin-bottom: 2rem;
-}
-
-.select-label {
-  border: 1px solid #959494;
-  padding: 0;
-  line-height: 100%;
-  position: relative;
-  border-radius: 5px;
-}
-
-#page-filters .select-label label {
-  margin-bottom: 0;
-  padding: 0;
-  position: absolute;
-  top: 0.5rem;
-  left: 0.75rem;
-  font-size: 0.825rem;
-  z-index: 0;
-  color: #767474;
-}
-
-#page-filters .select-label select {
-  appearance: none;
-  background-color: transparent;
-  z-index: 1;
-  position: relative;
-  border: none;
-  margin-bottom: 0;
-  line-height: 100%;
-  color: var(--color-text-darker);
-  border-radius: 3px;
-  outline-offset: 2px;
-}
-
 .dropdown-content {
   z-index: 2;
 }
 
-.select-label::before {
-  content: "";
-  display: block;
-  width: 2.5rem;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  border-radius: 0 4px 4px 0;
-}
-
-.select-label::after {
-  content: "";
-  display: block;
-  width: 0.5rem;
-  height: 0.5rem;
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  top: calc(50% - 0.25rem);
-  border-bottom: 1.5px solid var(--color-text-darker);
-  border-left: 1.5px solid var(--color-text-darker);
-  border-radius: 1px;
-  transform: rotate(-45deg);
-}
-
-.select-label:has(select:is(:focus-visible, :hover))::before {
-  background-color: var(--color-text-darker);
-  border-left: 1px solid var(--color-text-darker);
-}
-
-.select-label:has(select:is(:focus-visible, :hover))::after {
-  border-color: var(--color-page-background);
-}
-
-.select-label:has(select:focus-visible) {
-  background-color: var(--color-page-background);
-}
-
-.select-label:has(select:focus-visible) label {
-  color: var(--color-text) !important;
-}
-
 .technology-filters {
   border-bottom: 1px solid var(--color-card-border);
   padding-bottom: 2.5rem;
 }
 
-.technology-filters label.tech {
-  margin-bottom: 0.5rem;
-  color: var(--color-text);
-  font-size: 0.875rem;
-  font-weight: 600;
-  width: 100%;
-}
-
-.technology-filters select.tech {
-  width: 100%;
-  margin-bottom: 0;
-  border: 1px solid #959494;
-  appearance: none;
-  background-color: transparent;
-  color: var(--color-text-darker);
-  font-size: 0.9rem;
-  border-color: var(--color-text-lighter);
-  padding: 0.5rem;
-}
-
-.technology-filters .tech-selector-group {
-  padding-top: 1.5rem;
-}
-
-.technology-filters .tech-selector-group:first-of-type {
-  margin-top: -1.5rem;
-}
-
 .breakdown {
   margin-top: 1rem;
 }
@@ -574,66 +582,6 @@ nav {
   align-items: end;
 }
 
-.tech-input-wrapper {
-  position: relative;
-}
-
-.tech-input-wrapper::before {
-  content: "";
-  display: block;
-  width: 2.5rem;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  border-radius: 0 4px 4px 0;
-  z-index: 2;
-}
-
-.tech-input-wrapper::after {
-  content: "";
-  display: block;
-  width: 0.5rem;
-  height: 0.5rem;
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  top: calc(50% - 0.25rem);
-  border-bottom: 1.5px solid var(--color-text-darker);
-  border-left: 1.5px solid var(--color-text-darker);
-  border-radius: 1px;
-  transform: rotate(-45deg);
-  z-index: 3;
-}
-
-.tech-input-wrapper select {
-  z-index: 1;
-  position: relative;
-}
-
-.tech-input-wrapper:has(select:is(:focus-visible, :hover))::before {
-  background-color: var(--color-text-darker);
-  border-left: 1px solid var(--color-text-darker);
-}
-
-.tech-input-wrapper:has(select:is(:focus-visible, :hover))::after {
-  border-color: var(--color-page-background);
-}
-
-.tech-input-wrapper:has(select:focus-visible) {
-  background-color: var(--color-page-background);
-  color: var(--color-text);
-}
-
-.tech-input-wrapper:has(select:focus-visible) select {
-  color: var(--color-text);
-}
-
-[data-theme="dark"] select option,
-[data-theme="dark"] .tech-input-wrapper:has(select:focus-visible) select {
-  color: var(--color-page-background) !important;
-  background-color: var(--color-text-darker) !important;
-}
-
 .tech-selector-group .content {
   position: relative;
   width: 100%;
@@ -978,8 +926,8 @@ select {
   text-align: left;
 }
 
-.table-ui :is(td, th):not(:last-child) {
-  padding: 1rem 1rem 1rem 0;
+.table-ui :is(td, th):not(:last-child, :first-child) {
+  padding: 1rem 0;
 }
 
 .table-ui :is(td, th):has(.progress-circle) {
@@ -1006,43 +954,61 @@ select {
   display: block;
 }
 
-.table-ui tr .row-link:is(:hover, :focus) {
-  text-decoration-thickness: 3px;
+.table-ui tr:has(.check-cell input[type="checkbox"]:checked) {
+  background-color: var(--color-table-selected-bg);
+  border: 1px solid var(--color-table-selected-border);
 }
 
-.table-ui tr:has(.row-link:hover) {
-  background-color: var(--table-row-hover);
+.table-ui tr:has(.check-cell input[type="checkbox"]:checked) :is(th, td) {
+  border-bottom: 1px solid var(--color-table-selected-border);
+  border-top: 1px solid var(--color-table-selected-border);
 }
 
-.table-ui tr:has(.row-link:focus) {
+.table-ui tr:has(.app-cell a:is(:hover, :focus-visible)) {
   background-color: var(--table-row-hover);
-  border: 1.5px solid var(--color-teal-dark);
+
+  box-shadow: 0 0 0 1.5px var(--table-row-hover-border) inset,
+    0 2px 0 var(--table-row-hover-border) inset;
+  border-bottom-color: transparent;
+}
+
+.table-ui td.check-cell {
+  position: relative;
+}
+
+.check-cell input[type="checkbox"]::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
-.table-ui tr:has(.row-link:focus) :is(th, td) {
-  border-bottom: 1.5px solid var(--color-teal-dark);
-  border-top: 1.5px solid var(--color-teal-dark);
+.check-cell input[type="checkbox"]:is(:hover, :focus) {
+  border-width: 2px;
 }
 
-.table-ui tr:has(.row-link:focus) .row-link:focus {
-  /* So the outline only gets removed in browsers that support :has */
-  outline-style: dotted;
+.table-ui .app-wrapper {
+  display: flex;
+  min-width: 15rem;
+  align-items: center;
 }
 
 .table-ui .app-cell .app-img {
-  display: inline-block;
+  display: block;
   height: 1rem;
   width: 1rem;
   margin-right: 0.75rem;
-  position: relative;
-  top: -0.12rem;
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .table-ui .app-cell a {
-  display: inline-block;
-  width: 20rem;
   text-overflow: ellipsis;
   text-wrap: nowrap;
   overflow: hidden;
@@ -1050,6 +1016,7 @@ select {
 
 .table-ui .check-cell {
   min-width: 2rem;
+  padding-left: 0.5rem;
 }
 
 .table-ui .check-cell input[type="checkbox"] {
@@ -1085,6 +1052,7 @@ select {
 
 .table-ui .client {
   text-align: right;
+  padding-right: 0.5rem;
 }
 
 .table-ui .good-scores {
@@ -1197,9 +1165,9 @@ select {
 .intro {
   border: none;
   margin-top: 0;
+  margin-bottom: 3rem;
   background-color: transparent;
-  padding: 4rem 0;
-  margin-bottom: 2.5rem;
+  padding: 3rem 0 7rem 0;
 }
 
 .intro h1 {
@@ -1279,16 +1247,17 @@ select {
   width: 100%;
 }
 
-.report-content {
+.data-sections {
   background-image: linear-gradient(var(--color-bg-gradient), rgba(238, 238, 238, 0));
   background-size: 100% 50rem;
   background-repeat: no-repeat;
-  background-position: 0 25rem;
+  background-position: 0 0;
+  padding-top: 2rem;
+  border-top: 1px solid #6A797C;
 }
 
-.report-content .intro {
-  padding: 0;
-  margin-top: 3rem;
+.data-sections > div:first-of-type {
+  margin-top: -10rem;
 }
 
 .report-section {
@@ -1300,7 +1269,6 @@ select {
 }
 
 h2.summary-heading {
-  margin-top: 4rem;
   font-size: var(--font-size-regular);
   text-transform: uppercase;
   font-weight: 600;
@@ -1318,7 +1286,7 @@ h2.summary-heading {
 }
 
 .report-section > .card {
-  margin-top: 2rem;
+  margin-top: 1rem;
 }
 
 .report-content:has(> .error) {
@@ -1689,9 +1657,9 @@ path.highcharts-tick {
 }
 
 .cta-link[data-name="selected-apps"] {
-  border: 1.5px solid var(--color-teal-dark);
+  border: 1.5px solid var(--color-button-background);
   background-color: transparent;
-  color: var(--color-teal-dark);
+  color: var(--color-button-background);
 }
 
 .selected-apps {
@@ -1701,7 +1669,8 @@ path.highcharts-tick {
 
 .selected-apps p {
   font-weight: 600;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
+  margin-top: 1.75rem;
 }
 
 .selected-apps ul li {
@@ -1711,14 +1680,14 @@ path.highcharts-tick {
 }
 
 .selected-apps ul li:not(:last-of-type) {
-  margin-right: 1em;
+  margin-right: 0.75em;
 }
 
 .selected-apps ul li button {
   padding: 0.1em 0.5em;
   border-radius: 2rem;
-  border: 1px solid var(--color-text-lighter);
-  background-color: transparent;
+  border: 1px solid var(--color-gray-medium);
+  background-color: var(--color-gray-light);
   color: var(--color-text-lighter);
 }
 
diff --git a/templates/techreport/category.html b/templates/techreport/category.html
index 319a5974..d9375caf 100644
--- a/templates/techreport/category.html
+++ b/templates/techreport/category.html
@@ -3,14 +3,14 @@
 {% block filters %}
 <form id="page-filters">
   <div>
-    <fieldset class="technology-filters">
+    <fieldset class="technology-filters filters">
       <legend class="form-title">Choose a dataset</legend>
 
-      <div class="tech-selector">
-        <label for="categories_selector" class="tech">Category</label>
-        <div class="tech-input-wrapper">
+      <div class="tech-selector default-dropdown-group">
+        <label for="categories_selector" class="tech default-dropdown-label">Category</label>
+        <div class="default-dropdown-wrapper">
           {% set category_selected = tech_report_page.filters.category or tech_report_config.default_category %}
-          <select name="categories" class="tech" data-selected="{{ category_selected }}" id="categories_selector">
+          <select name="categories" class="default-dropdown tech" data-selected="{{ category_selected }}" id="categories_selector">
             <option value="{{ category_selected }}" selected="true">
               {{ category_selected }}
             </option>
@@ -22,22 +22,26 @@
     <fieldset class="lens">
       <legend class="sr-only">Lens</legend>
 
-      <label for="geo">Geo</label>
-      <div class="select-label">
-        <select name="geo" id="geo">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="geo">Geo</label>
+        <div class="default-dropdown-wrapper">
+          <select class="default-dropdown" name="geo" id="geo">
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
 
-      <label for="rank">Rank</label>
-      <div class="select-label">
-        <select name="rank" id="rank">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="rank">Rank</label>
+        <div class="default-dropdown-wrapper">
+          <select class="default-dropdown" name="rank" id="rank">
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
     </fieldset>
   </div>
@@ -77,99 +81,101 @@ <h1>
       </div>
     </div>
 
-    <div
-      id="cateogry-summary"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="category"
-    >
-      <h2 class="summary-heading">Summary</h2>
-      <div class="summary-grid">
-        {% for summary in tech_report_page.config.summary %}
-          {% include "techreport/components/summary_card.html" %}
-        {% endfor %}
+    <div class="data-sections">
+      <div
+        id="cateogry-summary"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="category"
+      >
+        <h2 class="summary-heading">Summary</h2>
+        <div class="summary-grid">
+          {% for summary in tech_report_page.config.summary %}
+            {% include "techreport/components/summary_card.html" %}
+          {% endfor %}
+        </div>
       </div>
-    </div>
 
-    <div
-      id="comparison-summary"
-      class="card block-m summary report-section"
-      data-type="section"
-      data-api="cwv,lighthouse,page-weight"
-    >
-      <h2>Technologies</h2>
-      <div class="table-descr">
-        <p>
-          Overview of the latest Core Web Vitals of all technologies within this category, sorted by number of origins.
-          Select up to 10 technologies to compare their Core Web Vitals, Lighthouse scores, adoption, and page weight over time, or view details about a single technology.
-        </p>
-        <p>
-          Currently showing page <strong><span data-page="current">1</span> of <span data-page="total">1</span></strong>, based on the latest data (<span data-slot="timestamp"></span>).
-        </p>
-      </div>
+      <div
+        id="comparison-summary"
+        class="card block-m summary report-section"
+        data-type="section"
+        data-api="cwv,lighthouse,page-weight"
+      >
+        <h2>Technologies</h2>
+        <div class="table-descr">
+          <p>
+            Overview of the latest Core Web Vitals of all technologies within this category, sorted by number of origins.
+            Select up to 10 technologies to compare their Core Web Vitals, Lighthouse scores, adoption, and page weight over time, or view details about a single technology.
+          </p>
+          <p>
+            Currently showing page <strong><span data-page="current">1</span> of <span data-page="total">1</span></strong>, based on the latest data (<span data-slot="timestamp"></span>).
+          </p>
+        </div>
 
-      {% set component = tech_report_page.config.tech_comparison_summary %}
-      {% set id = component.id %}
-      {% set client = request.args.get('client', '')  or 'mobile' %}
-      {% set sort_endpoint = "adoption" %}
-      {% set sort_metric = "adoption" %}
-      {% set sort_key = "origins" %}
-      {% set sort_order = "desc" %}
+        {% set component = tech_report_page.config.tech_comparison_summary %}
+        {% set id = component.id %}
+        {% set client = request.args.get('client', '')  or 'mobile' %}
+        {% set sort_endpoint = "adoption" %}
+        {% set sort_metric = "adoption" %}
+        {% set sort_key = "origins" %}
+        {% set sort_order = "desc" %}
 
-      <a data-name="selected-apps" href="/reports/techreport/tech" class="cta-link">Compare all technologies on this page</a>
+        <a data-name="selected-apps" href="/reports/techreport/tech" class="cta-link">Compare all technologies on this page</a>
 
-      <div class="selected-apps">
-        <p>
-          Selected technologies:
-        </p>
-        <ul data-name="selected-apps-overview"></ul>
-      </div>
+        <div class="selected-apps">
+          <p>
+            Selected technologies:
+          </p>
+          <ul data-name="selected-apps-overview"></ul>
+        </div>
 
-      {% set table = component.table %}
-      {% include "techreport/components/table_linked.html" %}
+        {% set table = component.table %}
+        {% include "techreport/components/table_linked.html" %}
 
-      <div class="table-pagination">
-        {% set filters = tech_report_page.filters %}
-        <p data-pagination="previous">
-          {% if filters.page and filters.page > 1 %}
-            <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page - 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Previous page </a>
-          {% endif %}
-        </p>
-        <div class="table-page-info">
-          <p>
-            Page <strong data-page="current">1</strong> of <strong data-page="total">1</strong>
+        <div class="table-pagination">
+          {% set filters = tech_report_page.filters %}
+          <p data-pagination="previous">
+            {% if filters.page and filters.page > 1 %}
+              <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page - 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Previous page </a>
+            {% endif %}
           </p>
-          <div class="table-row-count">
-            <label for="rowsPerPage">
-              Rows
-            </label>
-            <select id="rowsPerPage">
-              {% if filters.rows == "10" %}
-                <option value="10" selected>10</option>
-              {% else %}
-                <option value="10">10</option>
-              {% endif %}
-              {% if filters.rows == "25" %}
-                <option value="25" selected>25</option>
-              {% else %}
-                <option value="25">25</option>
-              {% endif %}
-              {% if filters.rows == "50" %}
-                <option value="50" selected>50</option>
-              {% else %}
-                <option value="50">50</option>
-              {% endif %}
-            </select>
+          <div class="table-page-info">
+            <p>
+              Page <strong data-page="current">1</strong> of <strong data-page="total">1</strong>
+            </p>
+            <div class="table-row-count">
+              <label for="rowsPerPage">
+                Rows
+              </label>
+              <select id="rowsPerPage">
+                {% if filters.rows == "10" %}
+                  <option value="10" selected>10</option>
+                {% else %}
+                  <option value="10">10</option>
+                {% endif %}
+                {% if filters.rows == "25" %}
+                  <option value="25" selected>25</option>
+                {% else %}
+                  <option value="25">25</option>
+                {% endif %}
+                {% if filters.rows == "50" %}
+                  <option value="50" selected>50</option>
+                {% else %}
+                  <option value="50">50</option>
+                {% endif %}
+              </select>
+            </div>
+            <p class="sr-only" aria-live="polite">
+              <span id="rows-announcement"></span>
+            </p>
           </div>
-          <p class="sr-only" aria-live="polite">
-            <span id="rows-announcement"></span>
+          <p data-pagination="next">
+            {% if not filters.last_page and filters.last_page == False  %}
+              <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page + 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Next page</a>
+            {% endif %}
           </p>
         </div>
-        <p data-pagination="next">
-          {% if not filters.last_page and filters.last_page == False  %}
-            <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page + 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Next page</a>
-          {% endif %}
-        </p>
       </div>
     </div>
   </div>
diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html
index 29c0c4cd..fcac1960 100644
--- a/templates/techreport/comparison.html
+++ b/templates/techreport/comparison.html
@@ -21,102 +21,104 @@ <h1>
       </div>
     </div>
 
-    <!-- Section: Summary of the main metrics -->
-    <div
-      id="comparison-summary"
-      class="card block-m summary report-section"
-      data-type="section"
-      data-api="cwv,lighthouse,page-weight"
-    >
-      <h2>Summary</h2>
-      <p>Showing the latest data for <strong>{{ technologies | length }} technologies</strong>.</p>
-      {% set component = tech_report_page.config.tech_comparison_summary %}
-      {% set id = component.id %}
-      {% set client = request.args.get('client', '')  or 'mobile' %}
-
-      {% set table = component.table %}
-      {% include "techreport/components/table_linked.html" %}
-
-      {% include "techreport/components/filter_meta.html" %}
-    </div>
+    <div class="data-sections">
+      <!-- Section: Summary of the main metrics -->
+      <div
+        id="comparison-summary"
+        class="card block-m summary report-section"
+        data-type="section"
+        data-api="cwv,lighthouse,page-weight"
+      >
+        <h2>Summary</h2>
+        <p>Showing the latest data for <strong>{{ technologies | length }} technologies</strong>.</p>
+        {% set component = tech_report_page.config.tech_comparison_summary %}
+        {% set id = component.id %}
+        {% set client = request.args.get('client', '')  or 'mobile' %}
+
+        {% set table = component.table %}
+        {% include "techreport/components/table_linked.html" %}
+
+        {% include "techreport/components/filter_meta.html" %}
+      </div>
 
-    <!-- Section: Core Web Vitals -->
-    <div
-      id="comparison-good-cwvs"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="cwv"
-    >
-      <h2>Core Web Vitals</h2>
-      <p>{{ tech_report_labels.metrics.vitals.general.description }}</p>
-
-      <!-- Timeseries -->
-      <div class="card">
-        {% set timeseries = tech_report_page.config.good_cwv_timeseries %}
-        {% if timeseries %}
-          {% set subcategory = request.args.get('good-cwv-over-time', '')  or 'cwv' %}
-          {% include "techreport/components/timeseries.html" %}
-        {% endif %}
+      <!-- Section: Core Web Vitals -->
+      <div
+        id="comparison-good-cwvs"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="cwv"
+      >
+        <h2>Core Web Vitals</h2>
+        <p>{{ tech_report_labels.metrics.vitals.general.description }}</p>
+
+        <!-- Timeseries -->
+        <div class="card">
+          {% set timeseries = tech_report_page.config.good_cwv_timeseries %}
+          {% if timeseries %}
+            {% set subcategory = request.args.get('good-cwv-over-time', '')  or 'cwv' %}
+            {% include "techreport/components/timeseries.html" %}
+          {% endif %}
+        </div>
       </div>
-    </div>
 
-    <!-- Section: Lighthouse -->
-    <div
-      id="comparison-lighthouse"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="lighthouse"
-    >
-      <h2>Lighthouse</h2>
-      <p>{{ tech_report_labels.metrics.lighthouse.general.description }}</p>
-
-      <!-- Timeseries -->
-      <div class="card">
-        {% set timeseries = tech_report_page.config.lighthouse_timeseries %}
-        {% if timeseries %}
-          {% set subcategory = request.args.get('median-lighthouse-over-time', '')  or 'performance' %}
-          {% include "techreport/components/timeseries.html" %}
-        {% endif %}
+      <!-- Section: Lighthouse -->
+      <div
+        id="comparison-lighthouse"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="lighthouse"
+      >
+        <h2>Lighthouse</h2>
+        <p>{{ tech_report_labels.metrics.lighthouse.general.description }}</p>
+
+        <!-- Timeseries -->
+        <div class="card">
+          {% set timeseries = tech_report_page.config.lighthouse_timeseries %}
+          {% if timeseries %}
+            {% set subcategory = request.args.get('median-lighthouse-over-time', '')  or 'performance' %}
+            {% include "techreport/components/timeseries.html" %}
+          {% endif %}
+        </div>
+      </div>
+
+      <!-- Section: Page weight -->
+      <div
+        id="comparison-page-weight"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="page-weight"
+      >
+        <h2>Page weight</h2>
+        <p>{{ tech_report_labels.metrics.pageWeight.general.description }}</p>
+
+        <!-- Timeseries -->
+        <div class="card">
+          {% set timeseries = tech_report_page.config.weight_timeseries %}
+          {% if timeseries %}
+            {% set subcategory = request.args.get('median-weight-over-time', '')  or 'image' %}
+            {% include "techreport/components/timeseries.html" %}
+          {% endif %}
+        </div>
       </div>
-    </div>
 
-    <!-- Section: Page weight -->
-    <div
-      id="comparison-page-weight"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="page-weight"
-    >
-      <h2>Page weight</h2>
-      <p>{{ tech_report_labels.metrics.pageWeight.general.description }}</p>
-
-      <!-- Timeseries -->
-      <div class="card">
-        {% set timeseries = tech_report_page.config.weight_timeseries %}
+      <!-- Section: Adoption -->
+      <div
+        id="comparison-adoption"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="adopiton"
+      >
+        <h2>Adoption</h2>
+        <p>{{ tech_report_labels.metrics.adoption.general.description }}</p>
+
+        <!-- Timeseries -->
+        <div class="card">
+        {% set timeseries = tech_report_page.config.adoption_timeseries %}
         {% if timeseries %}
-          {% set subcategory = request.args.get('median-weight-over-time', '')  or 'image' %}
           {% include "techreport/components/timeseries.html" %}
         {% endif %}
       </div>
-    </div>
-
-    <!-- Section: Adoption -->
-    <div
-      id="comparison-adoption"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="adopiton"
-    >
-      <h2>Adoption</h2>
-      <p>{{ tech_report_labels.metrics.adoption.general.description }}</p>
-
-      <!-- Timeseries -->
-      <div class="card">
-      {% set timeseries = tech_report_page.config.adoption_timeseries %}
-      {% if timeseries %}
-        {% include "techreport/components/timeseries.html" %}
-      {% endif %}
-    </div>
+      </div>
     </div>
   </div>
 
diff --git a/templates/techreport/components/filter_breakdown.html b/templates/techreport/components/filter_breakdown.html
index 148274f7..df6c6f4e 100644
--- a/templates/techreport/components/filter_breakdown.html
+++ b/templates/techreport/components/filter_breakdown.html
@@ -1,7 +1,7 @@
-<div class="breakdown">
-  <label for="client-breakdown">Client</label>
-  <div class="select-label">
-    <select name="client-breakdown" id="client-breakdown">
+<div class="breakdown default-dropdown-group">
+  <label for="client-breakdown" class="default-dropdown-label">Client</label>
+  <div class="select-label default-dropdown-wrapper">
+    <select class="default-dropdown" name="client-breakdown" id="client-breakdown">
       {% if request.args.get('client', '') == 'desktop' %}
       <option value="mobile">Mobile</option>
       <option value="desktop" selected>Desktop</option>
diff --git a/templates/techreport/components/table_linked.html b/templates/techreport/components/table_linked.html
index abe263f4..c921563c 100644
--- a/templates/techreport/components/table_linked.html
+++ b/templates/techreport/components/table_linked.html
@@ -57,8 +57,10 @@
             {% for column in table.columns %}
               {% if column.key == "technology" %}
                 <th class="app-cell">
-                  <span class="app-img" aria-hidden="true" style="background-image: url(https://cdn.httparchive.org/static/icons/{{ tech }}.png)"></span>
-                  <a href="/reports/techreport/tech?tech={{ tech }}&geo={{ tech_report_page.filters.geo }}&rank={{ tech_report_page.filters.rank }}">{{ tech }}</a>
+                  <span class="app-wrapper">
+                    <span class="app-img" aria-hidden="true" style="background-image: url(https://cdn.httparchive.org/static/icons/{{ tech }}.png)"></span>
+                    <a href="/reports/techreport/tech?tech={{ tech }}&geo={{ tech_report_page.filters.geo }}&rank={{ tech_report_page.filters.rank }}">{{ tech }}</a>
+                  </span>
                 </th>
               {% elif column.viz == "progress" %}
                 <td style="--cell-value: 2%" data-value="0" class="cwv-cell main-cell pct-value">
diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html
index e64f21eb..58fbd984 100644
--- a/templates/techreport/drilldown.html
+++ b/templates/techreport/drilldown.html
@@ -22,119 +22,121 @@ <h1>
       </ul>
     </div>
 
-    <!-- Section: Summary of the main metrics -->
-    <div
-      id="drilldown-summary"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="cwv,lighthouse,page-weight"
-    >
-      <h2 class="summary-heading">Summary</h2>
-      <div class="summary-grid">
-        {% for summary in tech_report_page.config.summary %}
-          {% include "techreport/components/summary_card.html" %}
-        {% endfor %}
-      </div>
-      {% include "techreport/components/filter_meta.html" %}
-    </div>
-
-    <!-- Section: Core Web Vitals -->
-    <div
-      id="good-cwvs"
-      class="block-m report-section"
-      data-type="section"
-      data-api="cwv"
-    >
-      <h2>Core Web Vitals</h2>
-      <p>{{ tech_report_labels.metrics.vitals.general.description }}</p>
-
-      {% if tech_report_page.config.good_cwv_summary %}
-        <h3>{{ tech_report_page.config.good_cwv_summary.title }}</h3>
+    <div class="data-sections">
+      <!-- Section: Summary of the main metrics -->
+      <div
+        id="drilldown-summary"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="cwv,lighthouse,page-weight"
+      >
+        <h2 class="summary-heading">Summary</h2>
         <div class="summary-grid">
-          {% for summary in tech_report_page.config.good_cwv_summary.cards %}
-            {% set section_prefix = "cwv" %}
+          {% for summary in tech_report_page.config.summary %}
             {% include "techreport/components/summary_card.html" %}
           {% endfor %}
         </div>
-      {% endif %}
-
-      <div class="card">
-        {% set timeseries = tech_report_page.config.good_cwv_timeseries %}
-        {% set selected_subcategory = request.args.get('good-cwv-over-time', '') or tech_report_page.config.good_cwv_timeseries.viz.default or 'overall' %}
-        {% include "techreport/components/timeseries.html" %}
+        {% include "techreport/components/filter_meta.html" %}
       </div>
-    </div>
 
-    <!-- Section: Lighthouse -->
-    <div
-      id="lighthouse"
-      class="block-m report-section"
-      data-type="section"
-      data-api="lighthouse"
-    >
-      <h2>Lighthouse</h2>
-      <p>{{ tech_report_labels.metrics.lighthouse.general.description }}</p>
-
-      {% if tech_report_page.config.lighthouse_summary %}
-        {% set section_prefix = "lighthouse" %}
-        <h3>{{ tech_report_page.config.lighthouse_summary.title }}</h3>
-        <div class="summary-grid">
-          {% for summary in tech_report_page.config.lighthouse_summary.cards %}
-            {% include "techreport/components/summary_card.html" %}
-          {% endfor %}
+      <!-- Section: Core Web Vitals -->
+      <div
+        id="good-cwvs"
+        class="block-m report-section"
+        data-type="section"
+        data-api="cwv"
+      >
+        <h2>Core Web Vitals</h2>
+        <p>{{ tech_report_labels.metrics.vitals.general.description }}</p>
+
+        {% if tech_report_page.config.good_cwv_summary %}
+          <h3>{{ tech_report_page.config.good_cwv_summary.title }}</h3>
+          <div class="summary-grid">
+            {% for summary in tech_report_page.config.good_cwv_summary.cards %}
+              {% set section_prefix = "cwv" %}
+              {% include "techreport/components/summary_card.html" %}
+            {% endfor %}
+          </div>
+        {% endif %}
+
+        <div class="card">
+          {% set timeseries = tech_report_page.config.good_cwv_timeseries %}
+          {% set selected_subcategory = request.args.get('good-cwv-over-time', '') or tech_report_page.config.good_cwv_timeseries.viz.default or 'overall' %}
+          {% include "techreport/components/timeseries.html" %}
         </div>
-      {% endif %}
-
-      <div class="card">
-        {% set timeseries = tech_report_page.config.lighthouse_timeseries %}
-        {% set selected_subcategory = request.args.get('median-lighthouse-over-time', '')  or 'performance' %}
-        {% include "techreport/components/timeseries.html" %}
       </div>
-    </div>
 
-    <!-- Section: Page Weight -->
-    <div
-      id="page-weight"
-      class="block-m report-section"
-      data-type="section"
-      data-api="page-weight"
-    >
-      <h2>Page weight</h2>
-      <p>{{ tech_report_labels.metrics.pageWeight.general.description }}</p>
-
-      {% if tech_report_page.config.weight_summary %}
-      {% set section_prefix = "weight" %}
-        <h3>{{ tech_report_page.config.weight_summary.title }}</h3>
-        <div class="summary-grid">
-          {% for summary in tech_report_page.config.weight_summary.cards %}
-            {% include "techreport/components/summary_card.html" %}
-          {% endfor %}
+      <!-- Section: Lighthouse -->
+      <div
+        id="lighthouse"
+        class="block-m report-section"
+        data-type="section"
+        data-api="lighthouse"
+      >
+        <h2>Lighthouse</h2>
+        <p>{{ tech_report_labels.metrics.lighthouse.general.description }}</p>
+
+        {% if tech_report_page.config.lighthouse_summary %}
+          {% set section_prefix = "lighthouse" %}
+          <h3>{{ tech_report_page.config.lighthouse_summary.title }}</h3>
+          <div class="summary-grid">
+            {% for summary in tech_report_page.config.lighthouse_summary.cards %}
+              {% include "techreport/components/summary_card.html" %}
+            {% endfor %}
+          </div>
+        {% endif %}
+
+        <div class="card">
+          {% set timeseries = tech_report_page.config.lighthouse_timeseries %}
+          {% set selected_subcategory = request.args.get('median-lighthouse-over-time', '')  or 'performance' %}
+          {% include "techreport/components/timeseries.html" %}
         </div>
-      {% endif %}
-
-      <div class="card">
-        {% set timeseries = tech_report_page.config.weight_timeseries %}
-        {% set selected_subcategory = request.args.get('weight-over-time', '') or tech_report_page.config.weight_timeseries.viz.default or 'performance' %}
-        {% include "techreport/components/timeseries.html" %}
       </div>
-    </div>
 
-    <!-- Section: Adoption -->
-    <div
-      id="adoption"
-      class="block-m report-section"
-      data-type="section"
-      data-api="adoption"
-    >
-      <h2>Adoption</h2>
-      <p>{{ tech_report_labels.metrics.adoption.general.description }}</p>
-
-      <div class="card">
-        {% set timeseries = tech_report_page.config.adoption_timeseries %}
-        {% set selected_subcategory = tech_report_page.config.adoption_timeseries.viz.default or 'adoption' %}
-        {% include "techreport/components/timeseries.html" %}
+      <!-- Section: Page Weight -->
+      <div
+        id="page-weight"
+        class="block-m report-section"
+        data-type="section"
+        data-api="page-weight"
+      >
+        <h2>Page weight</h2>
+        <p>{{ tech_report_labels.metrics.pageWeight.general.description }}</p>
+
+        {% if tech_report_page.config.weight_summary %}
+        {% set section_prefix = "weight" %}
+          <h3>{{ tech_report_page.config.weight_summary.title }}</h3>
+          <div class="summary-grid">
+            {% for summary in tech_report_page.config.weight_summary.cards %}
+              {% include "techreport/components/summary_card.html" %}
+            {% endfor %}
+          </div>
+        {% endif %}
+
+        <div class="card">
+          {% set timeseries = tech_report_page.config.weight_timeseries %}
+          {% set selected_subcategory = request.args.get('weight-over-time', '') or tech_report_page.config.weight_timeseries.viz.default or 'performance' %}
+          {% include "techreport/components/timeseries.html" %}
+        </div>
       </div>
 
+      <!-- Section: Adoption -->
+      <div
+        id="adoption"
+        class="block-m report-section"
+        data-type="section"
+        data-api="adoption"
+      >
+        <h2>Adoption</h2>
+        <p>{{ tech_report_labels.metrics.adoption.general.description }}</p>
+
+        <div class="card">
+          {% set timeseries = tech_report_page.config.adoption_timeseries %}
+          {% set selected_subcategory = tech_report_page.config.adoption_timeseries.viz.default or 'adoption' %}
+          {% include "techreport/components/timeseries.html" %}
+        </div>
+
+      </div>
     </div>
   </div>
 {% endblock %}
diff --git a/templates/techreport/templates/filters.html b/templates/techreport/templates/filters.html
index 857368ee..8ba4c98d 100644
--- a/templates/techreport/templates/filters.html
+++ b/templates/techreport/templates/filters.html
@@ -24,22 +24,26 @@
     <fieldset class="lens">
       <legend class="sr-only">Lens</legend>
 
-      <label for="geo">Geo</label>
-      <div class="select-label">
-        <select name="geo" id="geo">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="geo">Geo</label>
+        <div class="default-dropdown-wrapper">
+          <select name="geo" id="geo" class="default-dropdown">
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
 
-      <label for="rank">Rank</label>
-      <div class="select-label">
-        <select name="rank" id="rank">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="rank">Rank</label>
+        <div class="default-dropdown-wrapper">
+          <select name="rank" id="rank" class="default-dropdown">
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
     </fieldset>
   </div>
diff --git a/templates/techreport/templates/selector_tech.html b/templates/techreport/templates/selector_tech.html
index eae2f41f..0319d207 100644
--- a/templates/techreport/templates/selector_tech.html
+++ b/templates/techreport/templates/selector_tech.html
@@ -1,9 +1,9 @@
-<div class="tech-selector-group" data-tech="{{ name }}">
+<div class="default-dropdown-group tech-selector-group" data-tech="{{ name }}">
   <div class="content">
     <div class="tech-selector">
-      <label for="{{ name }}" class="tech">Technology {% if key > 1%}{{ key }}{% endif %}</label>
-      <div class="tech-input-wrapper">
-        <select name="tech" class="tech" data-selected="{{ technologyName }}" id="{{ name }}">
+      <label for="{{ name }}" class="default-dropdown-label tech">Technology {% if key > 1%}{{ key }}{% endif %}</label>
+      <div class="default-dropdown-wrapper">
+        <select class="tech default-dropdown" name="tech" class="tech" data-selected="{{ technologyName }}" id="{{ name }}">
           <option value="{{ technology }}" selected="true">
             {{ technologyName }}
           </option>

From c56ecb1c58824a07282113b46435477f6f5f6d22 Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Wed, 2 Apr 2025 00:19:46 +0200
Subject: [PATCH 2/6] improve darmode

---
 static/css/techreport/techreport.css | 76 +++++++++++++++++++++-------
 1 file changed, 58 insertions(+), 18 deletions(-)

diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css
index f9796a1d..de0fa197 100644
--- a/static/css/techreport/techreport.css
+++ b/static/css/techreport/techreport.css
@@ -7,15 +7,19 @@
   --color-teal-accent: #4e848b;
   --color-teal-dark: #3a5c63;
   --color-teal-darker: #1c4750;
+  --color-blue-darkest: #0a3555;
   --color-blue-dark: #3a7098;
-  --color-blue-100: #eff7ff;
   --color-blue-light: #e1f1ff;
+  --color-gray-lighter: #747171;
   --color-gray-medium: #5c5c5d;
+  --color-gray-dark: #2f2f30;
   --color-gray-light: #f6f6f7;
   --color-teal-vibrant: #1c818d;
   --color-teal-vibrant-darker: #136e78;
   --color-yellow-light: #fefae5;
   --color-yellow-dark: #B08705;
+  --color-yellow-darker: #705600;
+  --color-yellow-darkest: #352902;
 
   /* Colors based on function */
   /* Regular text */
@@ -34,6 +38,7 @@
   --color-page-background: #f4f4f4;
   --color-bg-gradient: var(--color-teal-faded);
   --color-page-border: var(--color-teal-medium);
+  --color-separator: var(--color-card-border);
 
   /* Checkboxes */
   --color-checkbox: var(--color-blue-dark);
@@ -49,6 +54,7 @@
   --color-theme-toggle-background: #f4f4f4;
   --color-tooltip-background: var(--color-card-background);
   --color-tooltip-border: var(--color-card-border);
+  --color-button-border: var(--color-text-lighter);
 
   /* Dropdowns */
   --color-dropdown-background: transparent;
@@ -56,6 +62,12 @@
   --color-dropdown-text: var(--color-text);
   --color-dropdown-text-disabled: var(--color-text-lighter);
   --color-dropdown-border-disabled: #aeb1b3;
+  --color-dropdown-border: var(--color-text-lighter);
+
+  /* Pills */
+  --color-pillbutton-background: var(--color-gray-light);
+  --color-pillbutton-text: var(--color-text-lighter);
+  --color-pillbutton-border: var(--color-gray-medium);
 
   /* Navigation */
   --color-nav: #667a7d;
@@ -70,6 +82,8 @@
   /* Tables */
   --color-table-selected-bg: var(--color-yellow-light);
   --color-table-selected-border: var(--color-yellow-dark);
+  --table-row-hover: var(--color-blue-light);
+  --table-row-hover-border: var(--color-blue-dark);
 
   /* Font sizes */
   --font-size-small: 0.875rem;
@@ -81,8 +95,6 @@
   /* Components */
   --card-shadow: 0 3px 12px 0px rgba(106, 121, 124, 0.2);
   --card-radius: 0.625rem;
-  --table-row-hover: var(--color-blue-100);
-  --table-row-hover-border: var(--color-blue-dark);
   --color-panel-text: #203b40;
   --color-panel-background: #bfe1e7;
 
@@ -97,14 +109,20 @@
 }
 
 [data-theme="dark"] {
+  /* Text */
   --color-link: var(--color-teal-faded);
   --color-text: #fff;
   --color-text-lighter: #fff;
   --color-text-darker: #fff;
   --color-text-inverted: #000;
+
+  /* Cards */
   --color-card-background: #111;
   --color-card-border: #000;
+  --card-shadow: 0 3px 12px 0px rgba(4, 8, 8, 0.2);
   --color-page-background: #292828;
+
+  /* Checkboxes */
   --color-checkbox-button-label-selected: #292828;
   --color-checkbox: #fff;
   --color-checkbox-selected: #292828;
@@ -116,9 +134,29 @@
   --color-panel-background: #203b40;
   --color-nav: #bfe1e7;
 
+  /* Pills */
+  --color-pillbutton-background: var(--color-page-background);
+  --color-pillbutton-text: var(--color-text-lighter);
+  --color-pillbutton-border: var(--color-gray-medium);
+
+  /* Tables */
+  --color-table-selected-bg: var(--color-yellow-darkest);
+  --color-table-selected-border: var(--color-yellow-darker);
+  --table-row-hover: var(--color-teal-darker);
+  --table-row-hover-border: var(--color-blue-light);
+
   /* Graph colors */
   --graph-color-labels: #a6bbbe;
   --graph-color-line: var(--color-gray-medium);
+
+  /* Dropdowns */
+  --color-dropdown-border: var(--color-gray-lighter);
+
+  /* Buttons */
+  --color-button-border: var(--color-gray-lighter);
+
+  /* Other */
+  --color-separator: var(--color-gray-dark);
 }
 
 /* ------------------------- */
@@ -208,12 +246,11 @@ nav {
 .default-dropdown {
   width: 100%;
   margin-bottom: 0;
-  border: 1px solid #959494;
+  border: 1px solid var(--color-dropdown-border);
   appearance: none;
   background-color: transparent;
   color: var(--color-text-darker);
   font-size: 0.9rem;
-  border-color: var(--color-text-lighter);
   padding: 0.5rem;
   z-index: 4;
   position: relative;
@@ -533,7 +570,7 @@ nav {
   margin-bottom: 1.5rem;
   margin-right: 0;
   margin-top: 2rem;
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
   padding-bottom: 2.5rem;
 }
 
@@ -558,7 +595,7 @@ nav {
 }
 
 .technology-filters {
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
   padding-bottom: 2.5rem;
 }
 
@@ -935,7 +972,7 @@ select {
 }
 
 .table-ui tbody tr {
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
 }
 
 .table-ui tbody th {
@@ -950,8 +987,6 @@ select {
 .table-ui tr a {
   color: var(--color-link);
   text-decoration: underline;
-  width: 100%;
-  display: block;
 }
 
 .table-ui tr:has(.check-cell input[type="checkbox"]:checked) {
@@ -994,6 +1029,7 @@ select {
 .table-ui .app-wrapper {
   display: flex;
   min-width: 15rem;
+  max-width: 25rem;
   align-items: center;
 }
 
@@ -1014,6 +1050,10 @@ select {
   overflow: hidden;
 }
 
+.table-ui .app-cell a:focus-visible {
+  outline-color: var(--table-row-hover-border);
+}
+
 .table-ui .check-cell {
   min-width: 2rem;
   padding-left: 0.5rem;
@@ -1116,7 +1156,7 @@ select {
   justify-content: space-between;
   padding: 1.5rem 0 1rem;
   margin-top: 2.5rem;
-  border-top: 1px solid var(--color-card-border);
+  border-top: 1px solid var(--color-separator);
 }
 
 .table-page-info p {
@@ -1253,7 +1293,7 @@ select {
   background-repeat: no-repeat;
   background-position: 0 0;
   padding-top: 2rem;
-  border-top: 1px solid #6A797C;
+  border-top: 1px solid var(--color-page-border);
 }
 
 .data-sections > div:first-of-type {
@@ -1550,7 +1590,7 @@ path.highcharts-tick {
 
 .accessibility-options {
   background-color: var(--color-card-background);
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
   padding-bottom: 4rem;
 }
 
@@ -1564,7 +1604,7 @@ path.highcharts-tick {
 }
 
 .check-wrapper {
-  border: 1px solid var(--color-text-lighter);
+  border: 1px solid var(--color-button-border);
   display: inline-block;
   margin-top: 1rem;
   margin-bottom: 0.25rem;
@@ -1631,7 +1671,7 @@ path.highcharts-tick {
 
 .theme-switcher {
   background-color: var(--color-theme-toggle-background);
-  border: 1px solid var(--color-text-lighter);
+  border: 1px solid var(--color-button-border);
   margin-top: 1rem;
   margin-bottom: 0.25rem;
   padding: 0.5rem 1rem;
@@ -1686,9 +1726,9 @@ path.highcharts-tick {
 .selected-apps ul li button {
   padding: 0.1em 0.5em;
   border-radius: 2rem;
-  border: 1px solid var(--color-gray-medium);
-  background-color: var(--color-gray-light);
-  color: var(--color-text-lighter);
+  border: 1px solid var(--color-pillbutton-border);
+  background-color: var(--color-pillbutton-background);
+  color: var(--color-pillbutton-text);
 }
 
 .selected-apps ul li button img {

From 2a62366606841760d66b402631e7d59c13c7abfd Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Wed, 2 Apr 2025 11:56:01 +0200
Subject: [PATCH 3/6] update color contrast darkmode

---
 static/css/techreport/general.css    |  3 ++-
 static/css/techreport/techreport.css | 21 ++++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/static/css/techreport/general.css b/static/css/techreport/general.css
index d5ea5bc9..f7c40a6b 100644
--- a/static/css/techreport/general.css
+++ b/static/css/techreport/general.css
@@ -39,7 +39,7 @@ strong {
 }
 
 :is(a, button, select):focus-visible {
-  outline: 1.5px solid var(--color-teal-dark);
+  outline: 1.5px solid var(--focus-default);
   outline-offset: 1.5px;
   border-radius: 3px;
 }
@@ -125,6 +125,7 @@ nav li:hover {
   width: 25rem;
   max-width: 100vw;
   position: relative;
+  border-right: 1px solid var(--color-card-border);
 }
 
 .split-view:has(.filters.hidden) .page-content {
diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css
index de0fa197..f9d0c768 100644
--- a/static/css/techreport/techreport.css
+++ b/static/css/techreport/techreport.css
@@ -58,6 +58,7 @@
 
   /* Dropdowns */
   --color-dropdown-background: transparent;
+  --color-dropdown-background-hover: var(--color-teal-light);
   --color-dropdown-background-disabled: var(--color-gray-light);
   --color-dropdown-text: var(--color-text);
   --color-dropdown-text-disabled: var(--color-text-lighter);
@@ -103,9 +104,11 @@
   --graph-color-primary-darker: var(--color-teal-darker);
   --graph-color-line: #a6bbbe;
   --graph-color-labels: #62777b;
+  --progess-color-empty: var(--color-progress-basic-bg);
 
   /* Defaults */
   --breakdown-color: var(--color-text);
+  --focus-default: var(--color-teal-dark);
 }
 
 [data-theme="dark"] {
@@ -115,6 +118,7 @@
   --color-text-lighter: #fff;
   --color-text-darker: #fff;
   --color-text-inverted: #000;
+  --color-nav-inactive: #6D8488;
 
   /* Cards */
   --color-card-background: #111;
@@ -151,12 +155,18 @@
 
   /* Dropdowns */
   --color-dropdown-border: var(--color-gray-lighter);
+  --color-dropdown-background-hover: var(--color-page-background);
+  --color-dropdown-text-disabled: var(--color-gray-lighter);
+  --color-dropdown-background-disabled: var(--color-page-background);
+  --color-dropdown-border-disabled: var(--color-gray-medium);;
 
   /* Buttons */
   --color-button-border: var(--color-gray-lighter);
 
   /* Other */
   --color-separator: var(--color-gray-dark);
+  --focus-default: var(--color-text-darker);
+  --progess-color-empty: var(--color-page-background);
 }
 
 /* ------------------------- */
@@ -292,7 +302,7 @@ nav {
 }
 
 .default-dropdown:not(:disabled):is(:focus-visible, :hover) {
-  background-image: linear-gradient(-90deg, var(--color-teal-light), var(--color-teal-light));
+  background-image: linear-gradient(-90deg, var(--color-dropdown-background-hover), var(--color-dropdown-background-hover));
   background-repeat: no-repeat;
   background-size: calc(100% - 2.5rem) 100%;
 }
@@ -311,12 +321,6 @@ nav {
   color: var(--color-text);
 }
 
-[data-theme="dark"] select option,
-[data-theme="dark"] .default-dropdown-wrapper:has(select:focus-visible) select {
-  color: var(--color-page-background) !important;
-  background-color: var(--color-text-darker) !important;
-}
-
 .default-dropdown:disabled {
   background-color: var(--color-dropdown-background-disabled);
   color: var(--color-dropdown-text-disabled);
@@ -383,7 +387,7 @@ nav {
   color: var(--color-text);
   background-color: var(--color-card-background);
   border-top: 1px solid var(--color-page-background);
-  border-bottom: 1px solid var(--color-page-background);
+  border-bottom:1px solid var(--color-card-border);
   display: flex;
   justify-content: space-between;
   padding: 0 2.5vw;
@@ -1552,7 +1556,6 @@ path.highcharts-tick {
   --progress-start: calc(70% - 1px);
   --progess-width: calc(70% - 0.25em);
   --progress-end: calc(70% - 0.25em + 1.5px);
-  --progess-color-empty: var(--color-progress-basic-bg);
   --offset-start: 0.75%;
   --offset-end: calc(var(--offset) - var(--offset-start));
 

From c7ea62be5da58c572391f11e52978b2e23a230a0 Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Wed, 2 Apr 2025 15:34:09 +0200
Subject: [PATCH 4/6] fix css and html linting

---
 static/css/techreport/general.css                 | 1 -
 static/css/techreport/techreport.css              | 3 +--
 templates/techreport/templates/selector_tech.html | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/static/css/techreport/general.css b/static/css/techreport/general.css
index f7c40a6b..cfbabfb7 100644
--- a/static/css/techreport/general.css
+++ b/static/css/techreport/general.css
@@ -68,7 +68,6 @@ nav li:hover {
   padding: 1.5rem;
   background: var(--color-card-background);
   border-radius: var(--card-radius);
-  border: 1px solid var(--color-card-border-light);
   border: 1px solid var(--color-card-border);
   box-shadow: var(--card-shadow);
   transition: padding 0.35s;
diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css
index f9d0c768..cd99227e 100644
--- a/static/css/techreport/techreport.css
+++ b/static/css/techreport/techreport.css
@@ -327,7 +327,7 @@ nav {
   border-color: var(--color-dropdown-border-disabled);
 }
 
-.default-dropdown-wrapper:has(select:disabled):after {
+.default-dropdown-wrapper:has(select:disabled)::after {
   border-color: var(--color-dropdown-text-disabled);
 }
 
@@ -1005,7 +1005,6 @@ select {
 
 .table-ui tr:has(.app-cell a:is(:hover, :focus-visible)) {
   background-color: var(--table-row-hover);
-
   box-shadow: 0 0 0 1.5px var(--table-row-hover-border) inset,
     0 2px 0 var(--table-row-hover-border) inset;
   border-bottom-color: transparent;
diff --git a/templates/techreport/templates/selector_tech.html b/templates/techreport/templates/selector_tech.html
index 0319d207..c4858cca 100644
--- a/templates/techreport/templates/selector_tech.html
+++ b/templates/techreport/templates/selector_tech.html
@@ -3,7 +3,7 @@
     <div class="tech-selector">
       <label for="{{ name }}" class="default-dropdown-label tech">Technology {% if key > 1%}{{ key }}{% endif %}</label>
       <div class="default-dropdown-wrapper">
-        <select class="tech default-dropdown" name="tech" class="tech" data-selected="{{ technologyName }}" id="{{ name }}">
+        <select class="tech default-dropdown" name="tech" data-selected="{{ technologyName }}" id="{{ name }}">
           <option value="{{ technology }}" selected="true">
             {{ technologyName }}
           </option>

From ab384bdf8176242051a8f0f57e740ee97e28b4ff Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Sun, 13 Apr 2025 01:19:58 +0200
Subject: [PATCH 5/6] disable dropdowns in html

---
 src/js/techreport/index.js                        | 1 -
 templates/techreport/templates/filters.html       | 4 ++--
 templates/techreport/templates/selector_tech.html | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js
index 7f73cf5d..b716a8d8 100644
--- a/src/js/techreport/index.js
+++ b/src/js/techreport/index.js
@@ -356,7 +356,6 @@ class TechReport {
     ];
 
     const filters = document.querySelectorAll('.filters select');
-    filters.forEach(filter => filter.setAttribute('disabled', 'true'));
     Promise.all(filterApis.map(api => {
       const url = `${Constants.apiBase}/${api.endpoint}`;
 
diff --git a/templates/techreport/templates/filters.html b/templates/techreport/templates/filters.html
index 8ba4c98d..59a40b30 100644
--- a/templates/techreport/templates/filters.html
+++ b/templates/techreport/templates/filters.html
@@ -27,7 +27,7 @@
       <div class="default-dropdown-group">
         <label for="geo">Geo</label>
         <div class="default-dropdown-wrapper">
-          <select name="geo" id="geo" class="default-dropdown">
+          <select name="geo" id="geo" class="default-dropdown" disabled>
             <option value="ALL" selected="true">
               ALL
             </option>
@@ -38,7 +38,7 @@
       <div class="default-dropdown-group">
         <label for="rank">Rank</label>
         <div class="default-dropdown-wrapper">
-          <select name="rank" id="rank" class="default-dropdown">
+          <select name="rank" id="rank" class="default-dropdown" disabled>
             <option value="ALL" selected="true">
               ALL
             </option>
diff --git a/templates/techreport/templates/selector_tech.html b/templates/techreport/templates/selector_tech.html
index c4858cca..6dec1163 100644
--- a/templates/techreport/templates/selector_tech.html
+++ b/templates/techreport/templates/selector_tech.html
@@ -3,7 +3,7 @@
     <div class="tech-selector">
       <label for="{{ name }}" class="default-dropdown-label tech">Technology {% if key > 1%}{{ key }}{% endif %}</label>
       <div class="default-dropdown-wrapper">
-        <select class="tech default-dropdown" name="tech" data-selected="{{ technologyName }}" id="{{ name }}">
+        <select class="tech default-dropdown" name="tech" data-selected="{{ technologyName }}" id="{{ name }}" disabled>
           <option value="{{ technology }}" selected="true">
             {{ technologyName }}
           </option>

From 36464d4b3e1cd0bed1c7c12937e6d467ec72e78b Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Wed, 16 Apr 2025 12:11:50 +0200
Subject: [PATCH 6/6] disable category dropdowns until loaded

---
 templates/techreport/category.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/techreport/category.html b/templates/techreport/category.html
index 378d130f..50487109 100644
--- a/templates/techreport/category.html
+++ b/templates/techreport/category.html
@@ -10,7 +10,7 @@
         <label for="categories_selector" class="tech default-dropdown-label">Category</label>
         <div class="default-dropdown-wrapper">
           {% set category_selected = tech_report_page.filters.category or tech_report_config.default_category %}
-          <select name="categories" class="default-dropdown tech" data-selected="{{ category_selected }}" id="categories_selector">
+          <select name="categories" class="default-dropdown tech" data-selected="{{ category_selected }}" id="categories_selector" disabled>
             <option value="{{ category_selected }}" selected="true">
               {{ category_selected }}
             </option>
@@ -25,7 +25,7 @@
       <div class="default-dropdown-group">
         <label for="geo">Geo</label>
         <div class="default-dropdown-wrapper">
-          <select class="default-dropdown" name="geo" id="geo">
+          <select class="default-dropdown" name="geo" id="geo" disabled>
             <option value="ALL" selected="true">
               ALL
             </option>
@@ -36,7 +36,7 @@
       <div class="default-dropdown-group">
         <label for="rank">Rank</label>
         <div class="default-dropdown-wrapper">
-          <select class="default-dropdown" name="rank" id="rank">
+          <select class="default-dropdown" name="rank" id="rank" disabled>
             <option value="ALL" selected="true">
               ALL
             </option>