enhancement: improve territory display

CDCgov · Nov 21, 2024 · 0f4b2c6 · 0f4b2c6
1 parent 67208cf
commit 0f4b2c6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 34 deletions.
diff --git a/packages/map/src/components/UsaMap/components/UsaMap.State.tsx b/packages/map/src/components/UsaMap/components/UsaMap.State.tsx
@@ -121,14 +121,6 @@ const UsaMap = () => {
 
   const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
 
-  const getTerritoriesClasses = () => {
-    const screenWidth = window?.visualViewport?.width
-    let className = 'territories'
-    if (screenWidth < 700) return 'territories--mobile'
-    if (screenWidth < 900) return 'territories--tablet'
-    return className
-  }
-
   const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = isHex ? Territory.Hexagon : Territory.Rectangle
 
@@ -593,12 +585,12 @@ const UsaMap = () => {
       {territories.length > 0 && (
         <>
           {/* Temporarily make the max width fit the image width */}
-          <div className='two-col' style={{ maxWidth: 'calc(100% - 75px)' }}>
+          <div>
             <div>
               <span className='territories-label label'>{state.general.territoriesLabel}</span>
             </div>
             <div>
-              <span className={getTerritoriesClasses()}>{territories}</span>
+              <span className='territories'>{territories}</span>
             </div>
           </div>
         </>

diff --git a/packages/map/src/scss/map.scss b/packages/map/src/scss/map.scss
@@ -130,47 +130,30 @@ $medium: 768px;
 
 .territories-label {
   color: black;
-  margin: 2em 5px 2em 1em;
   font-size: 1.1em;
   display: block;
+  margin-top: 15px;
 }
 
 // Cities and Territories
 .territories {
-  margin: 2em 200px 2em 0;
+  margin-top: 7px;
   font-size: 1.1em;
   width: 100%;
-  display: block;
+  display: flex;
   align-items: center;
-  > span {
-    margin-left: 1em;
-    margin-right: 0.5em;
-  }
+  margin-bottom: 0.5em;
+  gap: 0.5em;
+  flex-wrap: wrap;
   svg {
     max-width: 35px;
     min-width: 25px;
-    margin-left: 0.5em;
     transition: 0.3s all;
+
     text {
       font-size: 0.95em;
     }
   }
-
-  &--mobile {
-    @extend .territories;
-    width: 60%;
-    svg {
-      margin-bottom: 0.5em;
-    }
-  }
-
-  &--tablet {
-    @extend .territories;
-    width: 70%;
-    svg {
-      margin-bottom: 0.5em;
-    }
-  }
 }
 
 .zoom-controls {