fix ui

src/pages/HomePage.vue

@@ -8,6 +8,7 @@ import {
   CustomerServiceOutlined,
   TeamOutlined,
   HomeOutlined,
+  LoginOutlined,
   UserOutlined,
 } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
@@ -263,11 +264,11 @@ onMounted(load)
               هنوز نسخه‌ای برای نمایش موجودی ثبت نشده است
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ lowestSmsTenants.length }} نسخه کم‌موجودی</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -302,11 +303,11 @@ onMounted(load)
               سرور نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringServers.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -336,11 +337,11 @@ onMounted(load)
               افزونه نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringPlugins.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -370,11 +371,11 @@ onMounted(load)
               پشتیبانی نزدیک‌انقضا یا بدون تاریخ ثبت‌شده نیست
             </div>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ expiringSupports.length }} مورد پیگیری</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </div>
@@ -394,11 +395,11 @@ onMounted(load)
             <h3>{{ item.title }}</h3>
             <p>{{ item.desc }}</p>
           </div>
-          <div>
+          <div class="module-foot">
             <div class="progress"><span /></div>
             <div class="module-meta">
               <span>{{ item.meta }}</span>
-              <span>ورود ←</span>
+              <span class="module-enter"><LoginOutlined /> ورود</span>
             </div>
           </div>
         </button>
@@ -408,31 +409,32 @@ onMounted(load)
 </template>
 
 <style scoped>
-.sms-dashboard-card {
-  min-height: 196px;
-}
-
 .sms-mini-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
 }
 
 .sms-mini-card {
   border: none;
-  border-radius: 14px;
-  padding: 10px 12px;
+  border-radius: 10px;
+  padding: 7px 9px;
   text-align: right;
   font-family: inherit;
   cursor: pointer;
   display: grid;
-  gap: 2px;
+  gap: 1px;
   color: #17324d;
+  min-width: 0;
+  flex: 1 1 calc(50% - 6px);
 }
 
 .sms-mini-card strong {
-  font-size: 0.88rem;
+  font-size: 0.82rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sms-mini-card span,
@@ -462,11 +464,11 @@ onMounted(load)
 }
 
 .sms-mini-empty {
-  grid-column: 1 / -1;
-  border-radius: 14px;
+  flex: 1 1 100%;
+  border-radius: 10px;
   background: #f5f7fb;
-  padding: 14px;
+  padding: 10px 12px;
   color: #7b8798;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 </style>