From 7919c147eeb4f2e891afc5ee99329794c78e2805 Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 28 Jun 2025 15:52:28 +0530
Subject: [PATCH] =?UTF-8?q?"Pagination=20overlaps=20on=20'+'=20(Add)=20but?=
 =?UTF-8?q?ton=20in=20Directory=20=E2=80=93=20bottom=20right=20corner"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Directory/NotesCardViewDirectory.jsx      | 73 ++++++++++---------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/components/Directory/NotesCardViewDirectory.jsx b/src/components/Directory/NotesCardViewDirectory.jsx
index be207ffd..75a16b06 100644
--- a/src/components/Directory/NotesCardViewDirectory.jsx
+++ b/src/components/Directory/NotesCardViewDirectory.jsx
@@ -107,7 +107,7 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
   return (
     <div className="w-100 h-100 ">
       {/* Filter Dropdown */}
-      <div className="dropdown mb-3 ms-2">    
+      <div className="dropdown mb-3 ms-2">
       </div>
 
       {/* Notes List */}
@@ -129,41 +129,46 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div className="d-flex justify-content-end mt-3 me-3">
-          <div className="d-flex align-items-center gap-2">
-            <button
-              className="btn btn-sm rounded-circle border"
-              onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
-              disabled={currentPage === 1}
-              title="Previous"
-            >
-              «
-            </button>
+        <div className="d-flex justify-content-end mt-2 align-items-center gap-2"
+          style={{ marginRight: '70px' }}>
+          {/* Previous Button */}
+          <button
+            className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm for smaller size like in image
+            onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
+            disabled={currentPage === 1}
+            title="Previous"
+            style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
+          >
+            «
+          </button>
 
-            {[...Array(totalPages)].map((_, i) => {
-              const page = i + 1;
-              return (
-                <button
-                  key={page}
-                  className={`btn btn-sm rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-outline-primary"
-                    }`}
-                  style={{ width: "32px", height: "32px", padding: 0 }}
-                  onClick={() => handlePageClick(page)}
-                >
-                  {page}
-                </button>
-              );
-            })}
+          {/* Page Number Buttons */}
+          {[...Array(totalPages)].map((_, i) => {
+            const page = i + 1;
+            return (
+              <button
+                key={page}
+                // Changed btn-sm to just btn, adjusted class for active/inactive state backgrounds and text colors
+                className={`btn rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-light text-secondary"
+                  }`}
+                style={{ width: "38px", height: "38px", padding: 0, fontSize: "1rem", lineHeight: "1" }} // Adjusted size and font for better fit
+                onClick={() => handlePageClick(page)}
+              >
+                {page}
+              </button>
+            );
+          })}
 
-            <button
-              className="btn btn-sm rounded-circle border"
-              onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
-              disabled={currentPage === totalPages}
-              title="Next"
-            >
-              »
-            </button>
-          </div>
+          {/* Next Button */}
+          <button
+            className="btn btn-sm rounded-circle border text-secondary" // Added text-secondary for lighter color, kept btn-sm
+            onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
+            disabled={currentPage === totalPages}
+            title="Next"
+            style={{ width: "38px", height: "38px", padding: 0 }} // Ensure consistent size
+          >
+            »
+          </button>
         </div>
       )}
     </div>