Fix minor UI bugs: dropdown text, responsive table, focus outline checkboxes (#1051)

* fix dropdown cutoff, fix bug focus outlines

* linting

* rgba to rgb

* rgba -> rgb

* Standardise format

---------

Co-authored-by: Barry Pollard <barrypollard@google.com>

Author: sarahfossheim

src/js/colors.js

@@ -1,9 +1,9 @@
 const OPACITY = 0.4;
 const RGBA = [
-  `rgba(4, 199, 253, ${OPACITY})`,
-  `rgba(166, 42, 164, ${OPACITY})`,
-  `rgba(18, 174, 248, ${OPACITY})`,
-  `rgba(132, 36, 134, ${OPACITY})`
+  `rgb(4, 199, 253, ${OPACITY})`,
+  `rgb(166, 42, 164, ${OPACITY})`,
+  `rgb(18, 174, 248, ${OPACITY})`,
+  `rgb(132, 36, 134, ${OPACITY})`
 ];
 const HEX = ['#04c7fd', '#a62aa4', '#12aef8', '#842486'];
 

src/js/histogram.js

@@ -326,7 +326,7 @@ function drawChart(series, containerId, options) {
     tooltip: {
       shared: true,
       useHTML: true,
-      borderColor: 'rgba(247,247,247,0.85)',
+      borderColor: 'rgb(247,247,247,0.85)',
       formatter: function() {
         const metric = new Metric(options, Math.round(this.points[0].x * 100) / 100);
         const tooltips = this.points.filter(p => !p.series.name.includes('CDF')).map((point) => {

src/js/timeseries.js

@@ -309,7 +309,7 @@ function drawChart(options, series) {
       crosshairs: true,
       shared: true,
       useHTML: true,
-      borderColor: 'rgba(247,247,247,0.85)',
+      borderColor: 'rgb(247,247,247,0.85)',
       formatter: function() {
         function getChangelog(changelog) {
           if (!changelog) return '';

static/css/styles.css

@@ -455,7 +455,7 @@ nav#mobile.active nav {
 
 nav#mobile li {
   display: block;
-  border-bottom: 1px solid rgba(0, 0, 0, 10%);
+  border-bottom: 1px solid rgb(0, 0, 0, 10%);
   margin: 0;
   background-color: #667a7d;
   color: #fff;
@@ -667,9 +667,9 @@ ul.bulleted li ul {
 
 .figure {
   box-shadow:
-    0 10px 20px rgba(0, 0, 0, 19%),
-    0 6px 6px rgba(0, 0, 0, 23%),
-    inset 0px 10px 50px 0px rgba(0, 0, 0, 15%);
+    0 10px 20px rgb(0, 0, 0, 19%),
+    0 6px 6px rgb(0, 0, 0, 23%),
+    inset 0px 10px 50px 0px rgb(0, 0, 0, 15%);
 }
 
 select,
@@ -703,7 +703,7 @@ input {
   top: 10px;
   left: 10px;
   font: bold 120px/1 monospace;
-  color: rgba(0, 0, 0, 10%);
+  color: rgb(0, 0, 0, 10%);
 }
 
 .report-graphic .primary-icon,

static/css/techreport/techreport.css

@@ -94,7 +94,7 @@
   --font-size-xlarge: 2.25rem;
 
   /* Components */
-  --card-shadow: 0 3px 12px 0px rgba(106, 121, 124, 0.2);
+  --card-shadow: 0 3px 12px 0px rgb(106, 121, 124, 20%);
   --card-radius: 0.625rem;
   --color-panel-text: #203b40;
   --color-panel-background: #bfe1e7;
@@ -123,7 +123,7 @@
   /* Cards */
   --color-card-background: #111;
   --color-card-border: #000;
-  --card-shadow: 0 3px 12px 0px rgba(4, 8, 8, 0.2);
+  --card-shadow: 0 3px 12px 0px rgb(4, 8, 8, 20%);
   --color-page-background: #292828;
 
   /* Checkboxes */
@@ -935,16 +935,26 @@ select {
 /* General tables */
 .table-ui-wrapper {
   overflow: auto;
+  margin: 1rem 0;
+  background: /* Shadow covers */
+    linear-gradient(90deg, var(--color-card-background) 30%, var(--color-card-background)),
+    linear-gradient(90deg, transparent, var(--color-card-background) 70%) 100% 0,
+    /* Shadows */
+    linear-gradient(90deg, rgb(0, 0, 0, 15%), rgb(0, 0, 0, 0%)),
+    linear-gradient(90deg, rgb(0, 0, 0, 0), rgb(0, 0, 0, 15%)) 100% 0;
+  background-repeat: no-repeat;
+  background-color: var(--color-card-background);
+  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+  background-attachment: local, local, scroll, scroll;
 }
 
-.table-ui-wrapper:focus-visible {
-  outline: 1.5px solid var(--color-teal-dark);
+.table-ui-wrapper:focus {
+  outline: 1.5px dotted var(--color-teal-dark);
   outline-offset: 1.5px;
 }
 
 .table-ui {
   width: 100%;
-  margin: 1rem 0;
   border-collapse: collapse;
 }
 
@@ -1198,6 +1208,7 @@ select {
 
 .component-filters select {
   font-size: 1rem;
+  line-height: 1.25em;
 }
 
 /* -------------------- */
@@ -1295,7 +1306,7 @@ select {
 }
 
 .data-sections {
-  background-image: linear-gradient(var(--color-bg-gradient), rgba(238, 238, 238, 0));
+  background-image: linear-gradient(var(--color-bg-gradient), rgb(238, 238, 238, 0));
   background-size: 100% 50rem;
   background-repeat: no-repeat;
   background-position: 0 0;
@@ -1630,6 +1641,11 @@ path.highcharts-tick {
   height: 0;
 }
 
+.check-wrapper:has(input:focus-visible) {
+  outline: 1.5px solid var(--focus-default);
+  outline-offset: 1.5px;
+}
+
 .check-wrapper input::after {
   position: absolute;
   top: 0;