fix: แก้ layout

src/components/StatCardComponent.vue

@@ -19,7 +19,7 @@ const props = withDefaults(
 
 <template>
   <div
-    class="stat-card row"
+    class="stat-card"
     style="gap: var(--size-4)"
     :class="{ 'justify-between': $q.screen.lt.md, dark }"
   >
@@ -31,12 +31,15 @@ const props = withDefaults(
       style="
         padding: 12px 16px;
         height: 75px;
-        width: 200px;
         min-width: 150px;
         box-shadow: var(--shadow-2);
       "
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1440 320"
+        style="width: 100%"
+      >
         <path
           class="box-path"
           d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
@@ -45,7 +48,7 @@ const props = withDefaults(
 
       <div class="stat-card__content">
         <div class="text-h5 text-weight-bold">{{ v.count }}</div>
-        <div class="text-weight-bold">
+        <div class="text-weight-bold text-no-wrap">
           {{ labelI18n ? $t(v.label) : v.label }}
         </div>
       </div>
@@ -56,6 +59,20 @@ const props = withDefaults(
 <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;
+  }
 }
 
 .stat-card__wave {