Merge pull request #142 from OCA-UFCG/refact/popup-layout

Update popup layout
OCA-UFCG · Nov 11, 2024 · 28d7d11 · 28d7d11
2 parents 58c1afa + d23133f
commit 28d7d11
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/components/MapPopup/MapPopup.styles.tsx b/src/components/MapPopup/MapPopup.styles.tsx
@@ -37,14 +37,15 @@ export const InfoContent = styled.div`
 export const LineInfo = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
   width: 100%;
 `;
 
 export const TotalArea = styled.h3`
   font-size: 0.75rem;
   font-weight: normal;
-  max-width: 70%;
+  width: 100%;
+  white-space: nowrap;
 `;
 
 export const PercentArea = styled.h3`
@@ -53,7 +54,7 @@ export const PercentArea = styled.h3`
 `;
 
 export const Color = styled.div<{ color: string; $percent: number }>`
-  width: ${({ $percent }) => `${$percent / 15}rem`};
+  width: ${({ $percent }) => `${$percent / 10}rem`};
   max-width: 100%;
   min-width: 0.2rem;
   height: 1.25rem;

diff --git a/src/components/MapPopup/MapPopup.tsx b/src/components/MapPopup/MapPopup.tsx
@@ -47,8 +47,8 @@ const MapPopup: React.FC<MapPopupProps> = ({
         {areas.map((areaInfo: AreaInfo, index) => (
           <LineInfo key={index}>
             <Color color={areaInfo.color} $percent={areaInfo.percent || 45} />
-            {areaInfo.percent && <PercentArea>{areaInfo.percent}%</PercentArea>}
             <TotalArea>{areaInfo.area}</TotalArea>
+            {areaInfo.percent && <PercentArea>{areaInfo.percent}%</PercentArea>}
           </LineInfo>
         ))}
       </InfoContent>