From 9466c975ab8fd7c15bf2c479d46cf6ecb7a3e538 Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Wed, 18 Dec 2024 18:44:12 +0545 Subject: [PATCH] Fix position of Rating dropdown in PER form --- .../AreaInput/ComponentInput/index.tsx | 12 ++++++------ .../AreaInput/ComponentInput/styles.module.css | 15 +++++++++------ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx index c10f50b642..314db0693c 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 557d5bbe99..7aeb5be4ac 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 {