Handle overflow in base overlay card items

MTES-MCT · Nov 17, 2023 · 4636bc1 · 4636bc1
1 parent cd744f1
commit 4636bc1
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx b/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx
@@ -25,8 +25,8 @@ export function Item({ controlUnit }: ItemProps) {
 
   return (
     <Wrapper onClick={edit}>
-      <NameText>{controlUnit.name}</NameText>
-      <AdministrationText>{controlUnit.administration.name}</AdministrationText>
+      <NameText title={controlUnit.administration.name}>{controlUnit.name}</NameText>
+      <AdministrationText title={controlUnit.administration.name}>{controlUnit.administration.name}</AdministrationText>
       <ResourcesBar>{displayControlUnitResourcesFromControlUnit(controlUnit)}</ResourcesBar>
     </Wrapper>
   )
@@ -35,7 +35,7 @@ export function Item({ controlUnit }: ItemProps) {
 const Wrapper = styled.div`
   background-color: ${p => p.theme.color.gainsboro};
   cursor: pointer;
-  padding: 8px 12px;
+  padding: 8px 4px 0 12px;
 
   &:hover {
     background-color: ${p => p.theme.color.lightGray};
@@ -46,18 +46,27 @@ const NameText = styled.div`
   color: ${p => p.theme.color.gunMetal};
   font-weight: bold;
   line-height: 18px;
+  margin-right: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const AdministrationText = styled.div`
   color: ${p => p.theme.color.gunMetal};
   line-height: 18px;
-  margin: 2px 0 8px;
+  margin: 2px 4px 8px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const ResourcesBar = styled.div`
-  line-height: 18px;
+  display: flex;
+  flex-wrap: wrap;
 
-  > .Element-Tag:not(:first-child) {
-    margin-left: 8px;
+  > .Element-Tag {
+    margin: 0 8px 8px 0;
+    white-space: nowrap;
   }
 `