diff --git a/apps/web/public/styles.css b/apps/web/public/styles.css index ac5fe84..a5c7fdc 100644 --- a/apps/web/public/styles.css +++ b/apps/web/public/styles.css @@ -558,13 +558,16 @@ button:hover { } .vehicle-title { - display: flex; + display: grid; + grid-template-columns: auto auto minmax(0, 1fr); align-items: center; - gap: 8px; + gap: 6px; min-width: 0; } .vehicle-title strong { + display: block; + min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -617,11 +620,16 @@ button:hover { .badge { display: inline-flex; align-items: center; + flex: 0 0 auto; + justify-content: center; min-height: 22px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; + line-height: 1; + white-space: nowrap; + word-break: keep-all; } .badge.active { @@ -642,6 +650,8 @@ button:hover { .vehicle-type-chip { display: inline-flex; align-items: center; + flex: 0 0 auto; + justify-content: center; min-height: 22px; padding: 0 7px; border-radius: 5px; @@ -649,6 +659,9 @@ button:hover { color: #2c3b4f; font-size: 11px; font-weight: 600; + line-height: 1; + white-space: nowrap; + word-break: keep-all; } .vehicle-type-chip.type-trailer, @@ -1662,14 +1675,6 @@ button:hover { grid-template-columns: minmax(0, 1fr); } - .vehicle-title { - flex-wrap: wrap; - } - - .vehicle-title strong { - white-space: normal; - } - .speed { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline;