From cc0ebf972df0c500cbea062fed6ca0a176a060c1 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sat, 4 Jan 2025 16:18:12 +0530
Subject: [PATCH] fix weekdays checkbox clipping out

---
 src/CAREUI/interactive/WeekdayCheckbox.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/CAREUI/interactive/WeekdayCheckbox.tsx b/src/CAREUI/interactive/WeekdayCheckbox.tsx
index 1660d14ef02..366b700cb62 100644
--- a/src/CAREUI/interactive/WeekdayCheckbox.tsx
+++ b/src/CAREUI/interactive/WeekdayCheckbox.tsx
@@ -36,17 +36,17 @@ export default function WeekdayCheckbox({ value = [], onChange }: Props) {
   };
 
   return (
-    <ul className="flex justify-between">
+    <ul className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
       {Object.values(DAYS_OF_WEEK).map((day) => {
         const isChecked = value.includes(day);
 
         return (
-          <li key={day}>
+          <li key={day} className="w-full">
             <div
               className={cn(
-                "flex flex-col items-center justify-center gap-2 rounded-lg border px-8 py-6 transition-all duration-200 ease-in-out",
+                "flex flex-col items-center justify-center gap-2 rounded-lg border px-6 py-4 transition-all duration-200 ease-in-out",
                 isChecked
-                  ? "border-primary-500 bg-white shadow"
+                  ? "border-primary-500 bg-white shadow-md"
                   : "border-gray-300",
               )}
             >
@@ -57,7 +57,7 @@ export default function WeekdayCheckbox({ value = [], onChange }: Props) {
               />
               <label
                 htmlFor={`day_of_week_checkbox_${day}`}
-                className="cursor-pointer text-xs font-semibold uppercase"
+                className="cursor-pointer text-xs font-semibold uppercase text-center"
                 onClick={(e) => e.stopPropagation()}
               >
                 {t(`DAYS_OF_WEEK_SHORT__${day}`)}