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

---
 src/components/modal-tos/ModalToS.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/modal-tos/ModalToS.jsx b/src/components/modal-tos/ModalToS.jsx
index 91069df35..becca9d79 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."