Handle long entries on Connecticut map (#321)

Eric-Arellano · web-flow · commit 87aa7491a6d4 · 2025-01-29T19:38:30.000-05:00
Changes:

* Make scorecard title smaller on mobile on both maps so it doesn't
cover as much of the map
* Truncate overly wrong dropdown entries when currently chosen
* Make the dropdown wider in CT map
* But we also don't make it the full width necessary of 300px because it
makes the dropdown look way too wide for most entries.
diff --git a/packages/ct/src/css/overrides.scss b/packages/ct/src/css/overrides.scss
@@ -0,0 +1,27 @@
+// These values come from packages/shared.
+$xs-width: 480px;
+$sm-width: 640px;
+
+@mixin gt-xxs() {
+  @media screen and (min-width: $xs-width) {
+    @content();
+  }
+}
+
+@mixin gt-xs() {
+  @media screen and (min-width: $sm-width) {
+    @content();
+  }
+}
+
+// Make the header wider on large breakpoints.
+.choices[data-type*="select-one"] {
+  .choices__inner {
+    @include gt-xxs() {
+      width: 245px;
+    }
+    @include gt-xs() {
+      width: 270px;
+    }
+  }
+}
diff --git a/packages/ct/src/index.html b/packages/ct/src/index.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="../../shared/src/css/style.scss" />
+    <link rel="stylesheet" href="./css/overrides.scss" />
   </head>
 
   <body>
diff --git a/packages/shared/src/css/_dropdown.scss b/packages/shared/src/css/_dropdown.scss
@@ -21,6 +21,15 @@
     border-top-right-radius: borders.$border-radius;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+
+    // Ensure the dropdown does not ever make the header too tall if we have long
+    // entries. Note that the scorecard will already show the full title of the
+    // selected city.
+    .choices__list--single .choices__item--selectable {
+      white-space: nowrap;
+      overflow: hidden;
+      width: 95%;
+    }
   }
 
   &:not(.is-open) {
diff --git a/packages/shared/src/css/_scorecard.scss b/packages/shared/src/css/_scorecard.scss
@@ -46,7 +46,11 @@
 
   color: colors.$teal;
   font-weight: bold;
-  font-size: typography.$font-size-xl;
+  font-size: typography.$font-size-lg;
+
+  @include breakpoints.gt-xs {
+    font-size: typography.$font-size-xl;
+  }
 }
 
 .scorecard-accordion-toggle {
