fix: Proper alignment of buttons in edit events modal (#1476)

- Ensured aligned buttons properly in the "Edit Events" modal by verifying their placement across all screen sizes. Signed-off-by: Akhilender <[email protected]>
PalisadoesFoundation · Jan 23, 2024 · 62ac109 · 62ac109
1 parent aa5f6fc
commit 62ac109
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 48 deletions.
diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css
@@ -26,6 +26,8 @@
 .dispflex {
   display: flex;
   cursor: pointer;
+  justify-content: space-between;
+  margin: 10px 5px 5px 0px;
 }
 .eventtitle {
   margin-bottom: 0px;
@@ -88,8 +90,8 @@
   padding-right: 5px;
   padding-left: 5px;
 }
-.checkboxdiv > label {
-  margin-right: 50px;
+.checkboxdiv > div label {
+  margin-right: 30px;
 }
 .checkboxdiv > label > input {
   margin-left: 10px;
@@ -101,11 +103,15 @@
   box-shadow: none;
   margin-top: 5px;
 }
-.checkboxdiv {
+
+.checkboxContainer {
   display: flex;
+  justify-content: space-between;
 }
-.checkboxdiv > div {
-  width: 50%;
+
+.checkboxdiv {
+  display: flex;
+  flex-direction: column;
 }
 
 .preview {
@@ -178,6 +184,9 @@
     width: 90%;
     top: 45%;
   }
+  .checkboxContainer {
+    flex-direction: column;
+  }
 }
 
 .customButton {

diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx
@@ -376,50 +376,54 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
                 </div>
               </div>
             )}
-            <div className={styles.checkboxdiv}>
-              <div className={styles.dispflex}>
-                <label htmlFor="allday">{t('allDay')}?</label>
-                <Form.Switch
-                  id="allday"
-                  type="checkbox"
-                  data-testid="updateAllDay"
-                  checked={alldaychecked}
-                  onChange={(): void => setAllDayChecked(!alldaychecked)}
-                />
-              </div>
-              <div className={styles.dispflex}>
-                <label htmlFor="recurring">{t('recurringEvent')}:</label>
-                <Form.Switch
-                  id="recurring"
-                  type="checkbox"
-                  data-testid="updateRecurring"
-                  checked={recurringchecked}
-                  onChange={(): void => setRecurringChecked(!recurringchecked)}
-                />
-              </div>
-            </div>
-            <div className={styles.checkboxdiv}>
-              <div className={styles.dispflex}>
-                <label htmlFor="ispublic">{t('isPublic')}?</label>
-                <Form.Switch
-                  id="ispublic"
-                  type="checkbox"
-                  data-testid="updateIsPublic"
-                  checked={publicchecked}
-                  onChange={(): void => setPublicChecked(!publicchecked)}
-                />
+            <div className={styles.checkboxContainer}>
+              <div className={styles.checkboxdiv}>
+                <div className={styles.dispflex}>
+                  <label htmlFor="allday">{t('allDay')}?</label>
+                  <Form.Switch
+                    id="allday"
+                    type="checkbox"
+                    data-testid="updateAllDay"
+                    checked={alldaychecked}
+                    onChange={(): void => setAllDayChecked(!alldaychecked)}
+                  />
+                </div>
+                <div className={styles.dispflex}>
+                  <label htmlFor="recurring">{t('recurringEvent')}:</label>
+                  <Form.Switch
+                    id="recurring"
+                    type="checkbox"
+                    data-testid="updateRecurring"
+                    checked={recurringchecked}
+                    onChange={(): void =>
+                      setRecurringChecked(!recurringchecked)
+                    }
+                  />
+                </div>
               </div>
-              <div className={styles.dispflex}>
-                <label htmlFor="registrable">{t('isRegistrable')}?</label>
-                <Form.Switch
-                  id="registrable"
-                  type="checkbox"
-                  data-testid="updateRegistrable"
-                  checked={registrablechecked}
-                  onChange={(): void =>
-                    setRegistrableChecked(!registrablechecked)
-                  }
-                />
+              <div className={styles.checkboxdiv}>
+                <div className={styles.dispflex}>
+                  <label htmlFor="ispublic">{t('isPublic')}?</label>
+                  <Form.Switch
+                    id="ispublic"
+                    type="checkbox"
+                    data-testid="updateIsPublic"
+                    checked={publicchecked}
+                    onChange={(): void => setPublicChecked(!publicchecked)}
+                  />
+                </div>
+                <div className={styles.dispflex}>
+                  <label htmlFor="registrable">{t('isRegistrable')}?</label>
+                  <Form.Switch
+                    id="registrable"
+                    type="checkbox"
+                    data-testid="updateRegistrable"
+                    checked={registrablechecked}
+                    onChange={(): void =>
+                      setRegistrableChecked(!registrablechecked)
+                    }
+                  />
+                </div>
               </div>
             </div>
           </Modal.Body>