diff --git a/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx b/frontend/src/features/Station/components/StationOverlay/StationCard/Item.tsx index 82f4d3aa58..54af38e458 100644 --- 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 ( - {controlUnit.name} - {controlUnit.administration.name} + {controlUnit.name} + {controlUnit.administration.name} {displayControlUnitResourcesFromControlUnit(controlUnit)} ) @@ -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; } `