차량 카드 배지 줄바꿈 방지

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;