Update mobile territory styles (#2058)

Author: jayb

packages/core/styles/_global-variables.scss

@@ -107,4 +107,5 @@ $colors: (
   --superTitle-font-size: 0.833rem;
   --title-font-size: 1.222rem;
   --territory-label-font-size: 0.809rem;
+  --territory-label-font-size-mobile: 0.556rem;
 }

packages/map/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -38,8 +38,9 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
       return a.props.label.localeCompare(b.props.label)
     })
 
+  const isMobileViewport = isMobileTerritoryViewport(currentViewport)
   const SVG_GAP = 9
-  const SVG_WIDTH = isMobileTerritoryViewport(currentViewport) ? 35 : 45
+  const SVG_WIDTH = isMobileViewport ? 30 : 45
 
   return (
     territoriesData.length > 0 && (
@@ -56,7 +57,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
               <div>
                 <h5 className='territories-label'>U.S. territories</h5>
                 <span
-                  className='mt-2 mb-3 d-flex territories'
+                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
                   style={{ minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px` }}
                 >
                   {usTerritories}
@@ -67,7 +68,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
               <div>
                 <h5 className='territories-label'>Freely associated states</h5>
                 <span
-                  className='mt-2 mb-3 d-flex territories'
+                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
                   style={{
                     minWidth: `${
                       freelyAssociatedStates.length * SVG_WIDTH + (freelyAssociatedStates.length - 1) * SVG_GAP

packages/map/src/scss/map.scss

@@ -111,13 +111,16 @@ $medium: 768px;
 .territories {
   gap: 0.5em;
   svg {
-    max-width: 35px;
-    min-width: 35px;
+    max-width: 30px;
+    min-width: 30px;
     transition: 0.3s all;
 
     text {
       font-size: var(--territory-label-font-size);
       font-weight: 900;
+      @include breakpointClass(sm) {
+        font-size: var(--territory-label-font-size-mobile);
+      }
     }
   }
 }