changes to allow max screen width on renderer

packages/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentFieldWrapper.tsx

@@ -80,7 +80,8 @@ function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
       data-test="q-item-attachment-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -119,7 +119,8 @@ function BooleanItem(props: BaseItemProps) {
       data-test="q-item-boolean-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx

@@ -126,7 +126,8 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
       data-test="q-item-choice-autocomplete-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx

@@ -113,7 +113,8 @@ function ChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
       data-test="q-item-choice-checkbox-answer-option-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -120,7 +120,8 @@ function ChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
       data-test="q-item-choice-checkbox-answer-value-set-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionView.tsx

@@ -77,7 +77,8 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
       data-test="q-item-choice-radio-answer-option-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={onFocusLinkId}>
+      onClick={onFocusLinkId}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -111,7 +111,8 @@ function ChoiceRadioAnswerValueSetItem(props: BaseItemProps) {
       data-test="q-item-choice-radio-answer-value-set-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionView.tsx

@@ -89,7 +89,8 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
       data-test="q-item-choice-select-answer-option-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={onFocusLinkId}>
+      onClick={onFocusLinkId}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -124,7 +124,8 @@ function ChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-select-answer-value-set-box"
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateItem.tsx

@@ -125,7 +125,8 @@ function CustomDateItem(props: BaseItemProps) {
       data-test="q-item-date-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx

@@ -210,7 +210,8 @@ function CustomDateTimeItem(props: BaseItemProps) {
       data-test="q-item-datetime-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -143,7 +143,8 @@ function DecimalItem(props: BaseItemProps) {
       data-test="q-item-decimal-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -127,7 +127,8 @@ function IntegerItem(props: BaseItemProps) {
       data-test="q-item-integer-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceAutocompleteItem.tsx

@@ -193,7 +193,8 @@ function OpenChoiceAutocompleteItem(props: BaseItemProps) {
       data-test="q-item-open-choice-autocomplete-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerOptionItem.tsx

@@ -180,7 +180,8 @@ function OpenChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
       data-test="q-item-open-choice-checkbox-answer-option-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerValueSetItem.tsx

@@ -187,7 +187,8 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
       data-test="q-item-open-choice-checkbox-answer-value-set-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerOptionItem.tsx

@@ -154,7 +154,8 @@ function OpenChoiceRadioAnswerOptionItem(props: BaseItemProps) {
       data-test="q-item-open-choice-radio-answer-option-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetItem.tsx

@@ -162,7 +162,8 @@ function OpenChoiceRadioAnswerValueSetItem(props: BaseItemProps) {
       data-test="q-item-open-choice-radio-answer-option-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerOptionItem.tsx

@@ -127,7 +127,8 @@ function OpenChoiceSelectAnswerOptionItem(props: BaseItemProps) {
       data-test="q-item-open-choice-select-answer-option-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetItem.tsx

@@ -145,7 +145,8 @@ function OpenChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
       data-test="q-item-open-choice-select-answer-value-set-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/QuantityItem/QuantityItem.tsx

@@ -242,7 +242,8 @@ function QuantityItem(props: BaseItemProps) {
       data-test="q-item-quantity-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -25,14 +25,17 @@ import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import AddItemButton from './AddItemButton';
 import { TransitionGroup } from 'react-transition-group';
-import RepeatField from './RepeatField';
 import Collapse from '@mui/material/Collapse';
 import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
 import { generateExistingRepeatId, generateNewRepeatId } from '../../../utils/repeatId';
 import ItemLabel from '../ItemParts/ItemLabel';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import SingleItem from '../SingleItem/SingleItem';
+import RemoveItemButton from './RemoveItemButton';
 
 interface RepeatItemProps extends PropsWithQrItemChangeHandler, PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
@@ -96,38 +99,53 @@ function RepeatItem(props: RepeatItemProps) {
       data-linkid={qItem.linkId}
       data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid
-        qItem={qItem}
-        readOnly={readOnly}
-        labelChildren={<ItemLabel qItem={qItem} readOnly={readOnly} />}
-        fieldChildren={
-          <TransitionGroup>
-            {repeatAnswers.map((answer, index) => {
-              const repeatAnswerQrItem = createEmptyQrItem(qItem, answer?.id);
-              if (answer) {
-                repeatAnswerQrItem.answer = [answer];
-              }
-
-              return (
-                <Collapse
-                  key={answer?.id ?? generateExistingRepeatId(qItem.linkId, index)}
-                  timeout={200}>
-                  <RepeatField
+      <TransitionGroup>
+        {repeatAnswers.map((answer, index) => {
+          const repeatAnswerQrItem = createEmptyQrItem(qItem, answer?.id);
+          if (answer) {
+            repeatAnswerQrItem.answer = [answer];
+          }
+
+          return (
+            <Collapse
+              key={answer?.id ?? generateExistingRepeatId(qItem.linkId, index)}
+              timeout={200}>
+              <Stack
+                direction="row"
+                alignItems="center"
+                justifyContent="space-between"
+                sx={{ mb: 1 }}>
+                <Box sx={{ flexGrow: 1, maxWidth: (theme) => theme.breakpoints.values.lg }}>
+                  <ItemFieldGrid
                     qItem={qItem}
-                    qrItem={repeatAnswerQrItem}
-                    answer={answer}
-                    numOfRepeatAnswers={repeatAnswers.length}
-                    groupCardElevation={groupCardElevation}
-                    parentIsReadOnly={parentIsReadOnly}
-                    onRemoveAnswer={() => handleRemoveItem(index)}
-                    onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+                    readOnly={readOnly}
+                    labelChildren={
+                      index === 0 ? <ItemLabel qItem={qItem} readOnly={readOnly} /> : undefined
+                    }
+                    fieldChildren={
+                      <SingleItem
+                        qItem={qItem}
+                        qrItem={repeatAnswerQrItem}
+                        isRepeated={qItem.repeats ?? false}
+                        isTabled={false}
+                        groupCardElevation={groupCardElevation}
+                        parentIsReadOnly={parentIsReadOnly}
+                        onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+                      />
+                    }
                   />
-                </Collapse>
-              );
-            })}
-          </TransitionGroup>
-        }
-      />
+                </Box>
+                <RemoveItemButton
+                  answer={answer}
+                  numOfRepeatAnswers={repeatAnswers.length}
+                  readOnly={readOnly}
+                  onRemoveAnswer={() => handleRemoveItem(index)}
+                />
+              </Stack>
+            </Collapse>
+          );
+        })}
+      </TransitionGroup>
 
       <AddItemButton repeatAnswers={repeatAnswers} readOnly={readOnly} onAddItem={handleAddItem} />
     </FullWidthFormComponentBox>

packages/smart-forms-renderer/src/components/FormComponents/SliderItem/SliderItem.tsx

@@ -102,7 +102,8 @@ function SliderItem(props: BaseItemProps) {
       data-test="q-item-slider-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}

packages/smart-forms-renderer/src/components/FormComponents/StringItem/StringItem.tsx

@@ -124,7 +124,8 @@ function StringItem(props: BaseItemProps) {
       data-test="q-item-string-box"
       data-linkid={qItem.linkId}
       data-label={qItem.text}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
+      onClick={() => onFocusLinkId(qItem.linkId)}
+      sx={{ maxWidth: (theme) => theme.breakpoints.values.lg }}>
       <ItemFieldGrid
         qItem={qItem}
         readOnly={readOnly}