refs 5987 fix media queries

src/components/ui/CardDescriptor.vue

@@ -193,14 +193,13 @@ body.body--light {
 </style>
 
 <style lang="scss" scoped>
-$descriptor--light: rgb(87 86 86 / 6%);
 body.body--light {
     .descriptor {
         .subtitle {
             color: $gray;
         }
         .list-box {
-            background-color: $descriptor--light;
+            background-color: $lighter-gray;
         }
     }
 }

src/components/ui/CardList.vue

@@ -109,21 +109,24 @@ body.body--light {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     row-gap: 10px;
-    column-gap: 10vw;
     margin-right: 10px;
 }
-
 .actions {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
-@media (min-width: 1024px) and (max-width: 1100px) {
+@media screen and (min-width: $breakpoint-lg) {
+    .list-items {
+        column-gap: 10vw;
+    }
+}
+@media screen and (min-width: $breakpoint-sm) {
     .list-items {
         column-gap: 5vw;
     }
 }
-@media (max-width: 600px) {
+@media (max-width: $breakpoint-xs) {
     .list-items {
         grid-template-columns: 1fr;
         grid-gap: 5px;

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -88,7 +88,7 @@ const setData = (entity) =>
         <template #body="{ entity }">
             <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
                 <template #value>
-                    <QBadge :color="entity.ticketState.state.classColor ?? 'primary'">
+                    <QBadge :color="entity.ticketState.state.classColor">
                         {{ entity.ticketState.state.name }}
                     </QBadge>
                 </template>