From 74542bbb123246431f3f4f6da4846aca178592b4 Mon Sep 17 00:00:00 2001
From: Mehdi104797 <92753457+Mehdi104797@users.noreply.github.com>
Date: Sat, 19 Apr 2025 10:06:07 +0330
Subject: [PATCH] =?UTF-8?q?=D8=B1=DB=8C=D8=B3=D9=BE=D8=A7=D9=86=D8=B3?=
 =?UTF-8?q?=DB=8C=D9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/haditha/CardList.vue |  1 +
 pages/haditha/library/index.vue | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/components/haditha/CardList.vue b/components/haditha/CardList.vue
index 6273167..b156171 100644
--- a/components/haditha/CardList.vue
+++ b/components/haditha/CardList.vue
@@ -33,6 +33,7 @@ const goToLibraryShow = (item) => {
   <UCard
     v-if="props.list?.length"
     v-for="(item, index) in props.list"
+     class="mx-auto"
     :key="index"
     variant="solid"
     :ui="{
diff --git a/pages/haditha/library/index.vue b/pages/haditha/library/index.vue
index e5d7c52..df5142b 100644
--- a/pages/haditha/library/index.vue
+++ b/pages/haditha/library/index.vue
@@ -120,7 +120,10 @@ const CardList = defineAsyncComponent(
           <img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
         </div>
 
-        <div ref="el" class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
+        <div
+          ref="el"
+          class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-3 md:gap-x-28 md:gap-y-12 lg:grid-cols-5 lg:gap-x-28 lg:gap-y-12 mx-6"
+        >
           <!-- Client-side loaded content -->
           <card-list
             v-if="loadedItems.length"
@@ -148,6 +151,7 @@ const CardList = defineAsyncComponent(
   background: #f7fffd;
 
   .library-list-contianer {
+    height: 100%;
     margin-top: 10em;
     max-width: 1200px;
     width: 100%;
@@ -186,9 +190,18 @@ const CardList = defineAsyncComponent(
   }
 }
 
-@media screen and (max-width: 719.99px) {
+@media screen and (max-width: 991.99px) {
   .search-box-container {
-  padding-top: 0em;
-}
+    padding-top: 0em;
+  }
+  .library-list {
+    height: calc(100dvh - 13em);
+  }
+
+  .page-header {
+    margin-top: 4em;
+    margin-right: 2em;
+    margin-bottom: 1em;
+  }
 }
 </style>