fix: fix unclickable gap in groups

Solvro · Sep 2, 2024 · ad2f27c · ad2f27c
1 parent a5b7382
commit ad2f27c
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -34,25 +34,25 @@ export const GroupsAccordion = ({
               (course) =>
                 course.registrationName === registrationName && (
                   <div key={course.name}>
-                    <div className="grid grid-cols-[1fr_4fr_1fr] items-center justify-between gap-4 break-all p-4 py-2 text-base hover:cursor-pointer hover:bg-stone-300">
+                    <div className="grid grid-cols-[1fr_5fr] items-center justify-between break-all p-4 py-2 text-base hover:cursor-pointer hover:bg-stone-300">
                       <div className="flex h-[50px] w-[50px] items-center justify-center rounded-[50px] bg-secondary">
                         {course.name.slice(0, 1).toUpperCase()}
                       </div>
                       <label
                         htmlFor={`${index}-${course.name}`}
-                        className="hover:cursor-pointer"
+                        className="ml-4 flex justify-between hover:cursor-pointer"
                       >
                         {course.name}
+                        <input
+                          id={`${index}-${course.name}`}
+                          type="checkbox"
+                          onChange={() => {
+                            onClick(course.name);
+                          }}
+                          className="h-6 w-6 cursor-pointer"
+                          checked={course.isChecked}
+                        />
                       </label>
-                      <input
-                        id={`${index}-${course.name}`}
-                        type="checkbox"
-                        onChange={() => {
-                          onClick(course.name);
-                        }}
-                        className="h-6 w-6 cursor-pointer justify-self-end"
-                        checked={course.isChecked}
-                      />
                     </div>
                   </div>
                 ),