From df89f7b213d8811d7d4fecc9c754479178d5c5a1 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Mon, 4 Nov 2024 10:36:53 +1100
Subject: [PATCH] fix: checkbox label styles for small screen

---
 package.json                          |  2 +-
 src/components/modal-tos/ModalToS.jsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 92d2d7d61..37fb0bcc0 100644
--- 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
index 91069df35..0390e4b30 100644
--- 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."