added some feature for plugin

src/pages/PluginPanelPage.vue

@@ -195,11 +195,11 @@ onMounted(() => {
 
 <template>
   <div class="page-shell">
-    <div style="display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px">
-      <a-button type="text" @click="router.push({ name: 'home' })">
+    <div class="page-head">
+      <a-button type="text" class="page-head-back" @click="router.push({ name: 'home' })">
         <ArrowRightOutlined />
       </a-button>
-      <div style="flex: 1">
+      <div class="page-head-text">
         <h1 class="page-title">پنل افزونه</h1>
         <p class="page-sub">
           اشتراک افزونه‌های نسخه‌ها — هر نسخه می‌تواند چند افزونه داشته باشد یا هیچ‌کدام ·
@@ -220,7 +220,6 @@ onMounted(() => {
         v-model:value="q"
         allow-clear
         placeholder="جستجو نام، دامنه یا slug"
-        style="flex: 1; min-width: 180px"
       >
         <template #prefix><SearchOutlined /></template>
       </a-input>
@@ -402,6 +401,13 @@ onMounted(() => {
   gap: 8px;
   margin-bottom: 12px;
 }
+@media (max-width: 640px) {
+  .main-tabs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  .main-tabs button { width: 100%; }
+}
 .main-tabs button {
   appearance: none;
   border: 1px solid #d7e0ea;
@@ -485,9 +491,14 @@ onMounted(() => {
 
 .tenant-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
+  grid-template-columns: 1fr;
   gap: 10px;
 }
+@media (min-width: 640px) {
+  .tenant-grid {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
+  }
+}
 
 .tenant-card {
   appearance: none;
@@ -500,6 +511,13 @@ onMounted(() => {
   display: grid;
   gap: 4px;
   color: #17324d;
+  min-width: 0;
+  box-shadow: 0 6px 16px rgba(23, 50, 77, 0.08);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.tenant-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px rgba(23, 50, 77, 0.12);
 }
 
 .sms-toggle {
@@ -538,9 +556,12 @@ onMounted(() => {
   white-space: nowrap;
 }
 
-.tenant-card strong { font-size: 0.95rem; }
+.tenant-card strong {
+  font-size: 0.95rem;
+  overflow-wrap: break-word;
+}
 .tenant-card span,
-.tenant-card small { opacity: 0.92; font-size: 0.82rem; }
+.tenant-card small { opacity: 0.92; font-size: 0.82rem; overflow-wrap: break-word; }
 
 .tenant-card.healthy { background: linear-gradient(135deg, #dff8ea, #c3efd7); }
 .tenant-card.warning { background: linear-gradient(135deg, #fff4c7, #ffe39a); }