بهبود

src/components/Widgets/ContentCategory/ContentCategoryShow/ContentCategoryShow.vue

@@ -13,7 +13,7 @@
     <entity-index v-if="mounted && contentCategory.id"
                   ref="entityIndex"
                   v-model:value="contentInputs"
-                  class="product-index"
+                  class="content-index"
                   :api="contentApi"
                   :table="table"
                   :table-keys="tableKeys"
@@ -30,23 +30,25 @@
               class="ContentCategoryShow-banner">
       محصولات مرتبط
     </q-banner>
-    <entity-index v-if="mounted && contentCategory.id && showRelatedProduct"
-                  ref="entityIndex"
-                  v-model:value="productInputs"
-                  class="product-index"
-                  :api="productApi"
-                  :table="table"
-                  :table-keys="tableKeys"
-                  :table-grid-size="true"
-                  :default-layout="false"
-                  :show-search-button="false"
-                  :show-expand-button="false"
-                  :show-reload-button="false"
-                  @onPageChanged="onProductPageChanged">
-      <template #entity-index-table-item-cell="{inputData}">
-        <product-item :product="getProduct(inputData.props.row)" />
-      </template>
-    </entity-index>
+    <div class="product-index-wrapper">
+      <entity-index v-if="mounted && contentCategory.id && showRelatedProduct"
+                    ref="entityIndex"
+                    v-model:value="productInputs"
+                    class="product-index"
+                    :api="productApi"
+                    :table="table"
+                    :table-keys="tableKeys"
+                    :table-grid-size="true"
+                    :default-layout="false"
+                    :show-search-button="false"
+                    :show-expand-button="false"
+                    :show-reload-button="false"
+                    @onPageChanged="onProductPageChanged">
+        <template #entity-index-table-item-cell="{inputData}">
+          <product-item :product="getProduct(inputData.props.row)" />
+        </template>
+      </entity-index>
+    </div>
   </div>
 </template>
 
@@ -285,29 +287,37 @@ export default {
     margin-bottom: 39px;
     margin-top: 50px;
   }
-  :deep(.entity-index) {
-    margin-top: 24px;
-    .quasar-crud-index-table {
-      .q-table__top {
-        display: none;
-      }
-      .q-table__grid-content {
-        $gap: 24px;
-        flex-wrap: wrap;
-        gap: $gap;
-        justify-content: center;
-        .product-item {
-          flex: 0 0 calc( 25% - #{$gap} );
-          box-sizing: border-box;
-        }
-      }
-      .q-table__bottom {
-        .q-table__control {
+
+  .product-index-wrapper {
+    :deep(.entity-index) {
+      margin-top: 24px;
+
+      .quasar-crud-index-table {
+        .q-table__top {
           display: none;
         }
+
+        .q-table__grid-content {
+          $gap: 24px;
+          flex-wrap: wrap;
+          gap: $gap;
+          //justify-content: center;
+
+          .product-item {
+            flex: 0 0 calc(25% - #{$gap});
+            box-sizing: border-box;
+          }
+        }
+
+        .q-table__bottom {
+          .q-table__control {
+            display: none;
+          }
+        }
       }
     }
   }
+
   .ContentCategory-info-wrapper {
     background: white;
     width: 100%;