fix: checkbox label styles for small screen

fccn · Nov 6, 2024 · df89f7b · df89f7b
1 parent 7e415f4
commit df89f7b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "build": "make build",
     "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",

diff --git a/src/components/modal-tos/ModalToS.jsx b/src/components/modal-tos/ModalToS.jsx
@@ -6,6 +6,7 @@ import { FormattedMessage, getLocale, injectIntl } from '@edx/frontend-platform/
 import {
   Button, Form, Hyperlink, ModalDialog, useToggle, useCheckboxSetValues,
   ActionRow,
+  useWindowSize,
 } from '@openedx/paragon';
 
 import { getUserTOSPreference, updateUserTOSPreference } from './data/api';
@@ -23,7 +24,8 @@ const createTOSLink = (chunks, url) => (
 const ModalToS = () => {
   const [tosPreference, setTosPreference] = useState(undefined);
   const [isOpen, open, close] = useToggle(false);
-
+  const { width } = useWindowSize();
+  const checkboxLabelStyle = (width < 768) ? 'd-inline-block' : null;
   const {
     MODAL_UPDATE_TERMS_OF_SERVICE,
     PRIVACY_POLICY_URL,
@@ -108,7 +110,7 @@ const ModalToS = () => {
           >
             {dataAuthorization
               && (
-                <Form.Checkbox value="dataAuthorization">
+                <Form.Checkbox value="dataAuthorization" labelClassName={checkboxLabelStyle}>
                   <FormattedMessage
                     id="modalToS.dataAuthorization.checkbox.label"
                     description="The label for the data authorization checkbox inside the TOS modal."
@@ -121,7 +123,7 @@ const ModalToS = () => {
               )}
             {termsOfService
               && (
-                <Form.Checkbox value="termsOfService">
+                <Form.Checkbox value="termsOfService" labelClassName={checkboxLabelStyle}>
                   <FormattedMessage
                     id="modalToS.termsOfService.checkbox.label"
                     description="The label for the terms of service checkbox inside the TOS modal."
@@ -135,7 +137,7 @@ const ModalToS = () => {
               )}
             {honorCode
               && (
-                <Form.Checkbox value="honorCode">
+                <Form.Checkbox value="honorCode" labelClassName={checkboxLabelStyle}>
                   <FormattedMessage
                     id="modalToS.honorCode.checkbox.label"
                     description="The label for the honor code checkbox inside the TOS modal."