diff --git a/packages/map/src/components/UsaMap/components/UsaMap.State.tsx b/packages/map/src/components/UsaMap/components/UsaMap.State.tsx
index 596ca215f..90d72ea1f 100644
--- 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 */}
-
+
{state.general.territoriesLabel}
- {territories}
+ {territories}
>
diff --git a/packages/map/src/scss/map.scss b/packages/map/src/scss/map.scss
index 554d0b3d4..195fd1ec9 100644
--- 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 {