From a6dfc7b7b01795596815672416d177b9fbb9f644 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 9 Dec 2025 10:23:59 +0530
Subject: [PATCH] At Create New Contact, in Select Bucket.

---
 src/components/Directory/ManageContact.jsx | 28 ++++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/Directory/ManageContact.jsx b/src/components/Directory/ManageContact.jsx
index 56dd6e70..54f0d905 100644
--- a/src/components/Directory/ManageContact.jsx
+++ b/src/components/Directory/ManageContact.jsx
@@ -456,13 +456,22 @@ const ManageContact = ({ contactId, closeModal }) => {
         {/* Buckets */}
         <div className="row">
           <div className="col-md-12 mt-3 text-start">
-            <label className="form-label mb-2">Select Bucket</label>
-            <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
+            <Label className="form-label mb-2" required>Select Bucket</Label>
+
+            <div
+              className="d-flex flex-wrap gap-3 p-1"
+              style={{
+                maxHeight: "200px",
+                overflowY: "auto",
+              }}
+            >
               {bucketsLoaging && <p>Loading...</p>}
+
               {buckets?.map((item) => (
-                <li
+                <div
                   key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+                  className="card p-3 shadow-sm flex-shrink-0"                 
+                  onClick={() => handleCheckboxChange(item.id)}
                 >
                   <div className="form-check">
                     <input
@@ -472,22 +481,21 @@ const ManageContact = ({ contactId, closeModal }) => {
                       checked={watchBucketIds.includes(item.id)}
                       onChange={() => handleCheckboxChange(item.id)}
                     />
-                    <label
-                      className="form-check-label"
-                      htmlFor={`item-${item.id}`}
-                    >
+                    <label className="form-check-label ms-2" htmlFor={`item-${item.id}`}>
                       {item.name}
                     </label>
                   </div>
-                </li>
+                </div>
               ))}
-            </ul>
+            </div>
+
             {errors.bucketIds && (
               <small className="danger-text">{errors.bucketIds.message}</small>
             )}
           </div>
         </div>
 
+
         {/* Address + Description */}
         <div className="col-12 text-start">
           <label className="form-label">Address</label>