diff --git a/src/data-workspace/entry-form.js b/src/data-workspace/entry-form.js index 5862d37cd..387a8011a 100644 --- a/src/data-workspace/entry-form.js +++ b/src/data-workspace/entry-form.js @@ -1,5 +1,6 @@ import i18n from '@dhis2/d2-i18n' import { NoticeBox } from '@dhis2/ui' +import cx from 'classnames' import PropTypes from 'prop-types' import React from 'react' import { useFormState } from 'react-final-form' @@ -12,7 +13,10 @@ import { FORM_TYPES } from './constants.js' import { CustomForm } from './custom-form/index.js' import { DefaultForm } from './default-form.js' import FilterField from './filter-field.js' +import { getDisplayOptions } from './section-form/displayOptions.js' import { SectionForm } from './section-form/index.js' +import { SanitizedText } from './section-form/sanitized-text.js' +import styles from './section-form/section.module.css' const lockedNoticeBoxMessages = { [LockedStates.LOCKED_DATA_INPUT_PERIOD]: i18n.t( @@ -47,6 +51,7 @@ export const EntryForm = React.memo(function EntryForm({ dataSet }) { const formType = dataSet.formType const Component = formTypeToComponent[formType] + const displayOptions = getDisplayOptions(dataSet) return ( <> @@ -63,6 +68,28 @@ export const EntryForm = React.memo(function EntryForm({ dataSet }) { /> )} +
+ {displayOptions.customText?.header && ( + + {displayOptions.customText?.header} + + )} + {displayOptions.customText?.subheader && ( + + {displayOptions.customText?.subheader} + + )} +
) diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js index 64a28df25..fb29f1690 100644 --- a/src/data-workspace/section-form/section-form.js +++ b/src/data-workspace/section-form/section-form.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types' import React from 'react' import { useSectionFilter } from '../../shared/index.js' import { getDisplayOptions } from './displayOptions.js' -import { SanitizedText } from './sanitized-text.js' import { SectionFormSection } from './section.js' import styles from './section.module.css' @@ -16,49 +15,23 @@ export const SectionForm = ({ dataSet, globalFilterText }) => { const displayOptions = getDisplayOptions(dataSet) - return ( - <> -
- {displayOptions.customText?.header && ( - - {displayOptions.customText?.header} - - )} - {displayOptions.customText?.subheader && ( - - {displayOptions.customText?.subheader} - - )} -
- {dataSet.renderAsTabs ? ( - - ) : ( - filteredSections.map((s) => ( - - )) - )} - + return dataSet.renderAsTabs ? ( + + ) : ( + filteredSections.map((s) => ( + + )) ) } diff --git a/src/data-workspace/section-form/section.module.css b/src/data-workspace/section-form/section.module.css index 2ffe48f6d..83cbec734 100644 --- a/src/data-workspace/section-form/section.module.css +++ b/src/data-workspace/section-form/section.module.css @@ -96,17 +96,17 @@ font-size: 1.125rem; line-height: 1.3; color: var(--colors-grey900); - max-width: 1040px; + max-inline-size: 1040px; } .sectionsSubtitle { margin: 0; font-size: 0.875em; line-height: 1.3; color: var(--colors-grey800); - max-width: 1040px; + max-inline-size: 1040px; } .sectionsCustomText { - width: 100%; + inline-size: 100%; display: flex; flex-direction: column; margin: 0 0 var(--spacers-dp4) 0;