diff --git a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx index c10f50b64..314db0693 100644 --- a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx +++ b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx @@ -187,14 +187,14 @@ function ComponentInput(props: Props) { )} key={component.id} heading={getComponentTitle(component)} - childrenContainerClassName={styles.questionList} - headerDescription={component.description} headingClassName={styles.heading} withInternalPadding withoutWrapInHeading spacing="comfortable" headingDescriptionContainerClassName={styles.statusSelectionContainer} - /> + > + {component.description} + ); } @@ -203,10 +203,10 @@ function ComponentInput(props: Props) { className={_cs(styles.componentInput, className)} key={component.id} heading={getComponentTitle(component)} - childrenContainerClassName={styles.questionList} withHeaderBorder headerDescription={component.description} - headingDescriptionContainerClassName={styles.statusSelectionContainer} + headingClassName={styles.heading} + headingContainerClassName={styles.headingContainer} headingDescription={( diff --git a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/styles.module.css b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/styles.module.css index 557d5bbe9..7aeb5be4a 100644 --- a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/styles.module.css +++ b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/styles.module.css @@ -1,14 +1,17 @@ .component-input { + .heading-container { + @media screen and (max-width: 50rem) { + flex-wrap: wrap; + } + } + .heading { flex-grow: 1; } - .status-selection-container { - display: flex; - - .status-selection { - width: 20rem; - } + .status-selection { + width: 100%; + max-width: 20rem; } .description {