refactor: change style

src/components/StatCardComponent.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import AppBox from 'components/app/AppBox.vue';
-
 const props = withDefaults(
   defineProps<{
     branch: {
@@ -11,7 +9,6 @@ const props = withDefaults(
     }[];
     dark?: boolean;
     labelI18n?: boolean;
-    nowrap?: boolean;
   }>(),
   {
     labelI18n: false,
@@ -20,18 +17,14 @@ const props = withDefaults(
 </script>
 
 <template>
-  <div
-    class="row"
-    style="gap: var(--size-4)"
-    :class="{ dark, 'no-wrap': nowrap }"
-  >
-    <AppBox
+  <div class="row" style="gap: var(--size-4)" :class="{ dark }">
+    <div
       v-for="v in props.branch"
-      class="no-padding shadow-2"
+      class="no-padding shadow-2 stat-card"
       :class="{ [`stat-card__${v.color}`]: true }"
       :key="v.label"
     >
-      <div class="stat-card__content row items-center q-px-md q-py-sm">
+      <div class="stat-card__content row items-center q-pa-sm">
         <div class="col-4 text-center">
           <q-avatar
             size="lg"
@@ -55,27 +48,14 @@ const props = withDefaults(
           <div class="col-6">{{ v.count }}</div>
         </div>
       </div>
-    </AppBox>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .stat-card {
-  --_color: var(--gray-6);
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-@media screen and (min-width: 1024px) {
-  .stat-card {
-    display: flex;
-  }
-}
-
-@media screen and (min-width: 1920px) {
-  .stat-card {
-    display: flex;
-  }
+  border-radius: var(--radius-2);
+  overflow: hidden;
 }
 
 .stat-card__content {