From e1f48aacb3a05128d925c254645ab206ae5fe129 Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Wed, 21 Jan 2026 22:25:23 -0500
Subject: [PATCH] fix: alignment of radiobox and checkbox to left

---
 .../CommunityPortal/CPDashboard.jsx           | 64 ++++++++-----------
 .../CommunityPortal/CPDashboard.module.css    | 52 +++++++--------
 2 files changed, 49 insertions(+), 67 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 8baf7053c4..e945f79b53 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -229,40 +229,29 @@ export function CPDashboard() {
               <div className={styles.filterItem}>
                 <label htmlFor="date-tomorrow"> Dates</label>
                 <div className={styles.radioRow}>
-                  <FormGroup check className={styles.radioGroup + ' d-flex align-items-center'}>
-                    <Input
-                      id="date-tomorrow"
-                      type="radio"
-                      name="dates"
-                      checked={dateFilter === 'tomorrow'}
-                      onChange={() => setDateFilter('tomorrow')}
-                      className={styles.radioInput}
-                    />
-                    <Label
-                      htmlFor="date-tomorrow"
-                      check
-                      className={styles.radioLabel + ' ms-2 mb-0'}
-                    >
+                  <div className={styles.radioColumn}>
+                    <label className={styles.radioLabel}>
+                      <input
+                        type="radio"
+                        name="dates"
+                        checked={dateFilter === 'tomorrow'}
+                        onChange={() => setDateFilter('tomorrow')}
+                        className={styles.radioInput}
+                      />
                       Tomorrow
-                    </Label>
-                  </FormGroup>
-                  <FormGroup check className={styles.radioGroup + ' d-flex align-items-center'}>
-                    <Input
-                      id="date-weekend"
-                      type="radio"
-                      name="dates"
-                      checked={dateFilter === 'weekend'}
-                      onChange={() => setDateFilter('weekend')}
-                      className={styles.radioInput}
-                    />
-                    <Label
-                      htmlFor="date-weekend"
-                      check
-                      className={styles.radioLabel + ' ms-2 mb-0'}
-                    >
+                    </label>
+
+                    <label className={styles.radioLabel}>
+                      <input
+                        type="radio"
+                        name="dates"
+                        checked={dateFilter === 'weekend'}
+                        onChange={() => setDateFilter('weekend')}
+                        className={styles.radioInput}
+                      />
                       This Weekend
-                    </Label>
-                  </FormGroup>
+                    </label>
+                  </div>
                 </div>
                 <div className={styles.dashboardActions}>
                   <Button color="primary" onClick={() => setDateFilter('')}>
@@ -273,19 +262,18 @@ export function CPDashboard() {
               </div>
 
               <div className={styles.filterItem}>
-                <label htmlFor="online-only">Online</label>
-                <div>
-                  <Input
+                <label className={styles.checkboxLabel}>
+                  <input
                     type="checkbox"
-                    id="online-only"
                     checked={onlineOnly}
                     onChange={e => {
                       setOnlineOnly(e.target.checked);
                       setPagination(prev => ({ ...prev, currentPage: 1 }));
                     }}
-                  />{' '}
+                    className={styles.checkboxInput}
+                  />
                   Online Only
-                </div>
+                </label>
               </div>
 
               <div className={styles.filterItem}>
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 79e556f471..939710f8ca 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -139,53 +139,46 @@
   gap: 20px;
 }
 
+
 .radioRow {
   display: flex;
+  gap: 16px;          /* spacing between radio options */
   flex-wrap: wrap;
-  gap: 5px;
-  margin-top: 10px;
 }
 
-.radioGroup {
-  margin-right: 8px;
+.radioColumn {
+  display: flex;
+  flex-direction: column;  /* stack vertically */
+  gap: 8px;                /* space between radios */
 }
 
-.radioInput {
-  margin-right: 6px;
+.radioLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;           /* spacing between radio and text */
+  cursor: pointer;
 }
 
-.radioLabel {
-  margin-bottom: 0;
+.radioInput {
+  margin: 0;
+  width: auto;
   vertical-align: middle;
 }
 
-.filterItem input:not([type="checkbox"]):not([type="radio"]),
-.filterItem select {
-  padding: 12px 15px;
-  margin-top: 10px;
-  border-radius: 8px;
-  width: 100%;
-  height: auto;
-  font-size: 1rem;
-  transition: all 0.3s ease;
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;           /* spacing between checkbox and text */
+  cursor: pointer;
 }
 
-.filterItem input[type="radio"],
-.filterItem input[type="checkbox"] {
-  display: inline-block;      /* <– keeps input on same line as text */
+.checkboxInput {
+  margin: 0;
   width: auto;
-  padding: 0;
-  margin: 5px 0px 0px 120px;       /* top margin to line up under "Dates" */
   vertical-align: middle;
 }
 
-.filterItem input:focus,
-.filterItem select:focus {
-  border-color: #2c3e50;
-  box-shadow: 0 0 5px rgba(44, 62, 80, 0.4);
-  outline: none;
-}
-
 .dashboardMain {
   width: 65%;
   padding: 30px;
@@ -255,6 +248,7 @@
 .dashboardActions {
   text-align: center;
   margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .dashboardActions button {