Merge pull request #1458 from peach280/responsiveness

Responsiveness
I-TECH-UW · Feb 5, 2025 · 6bfad08 · 6bfad08
2 parents 23d097a + 52851e3
commit 6bfad08
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/frontend/src/components/nonconform/common/NCECorrectiveAction.jsx b/frontend/src/components/nonconform/common/NCECorrectiveAction.jsx
@@ -233,15 +233,15 @@ export const NCECorrectiveAction = () => {
     <div>
       {notificationVisible && <AlertDialog />}
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4}>
           <h2>
             <FormattedMessage id={`nonconform.corrective.title`} />
           </h2>
         </Column>
-        <Column lg={16} md={10} sm={8}>
+        <Column lg={16} md={8} sm={4}>
           <Form>
             <Grid fullWidth={true}>
-              <Column lg={4} md={8}>
+              <Column lg={4} md={4} sm={2}>
                 <Select
                   id="type"
                   labelText={intl.formatMessage({
@@ -265,7 +265,7 @@ export const NCECorrectiveAction = () => {
                   ))}
                 </Select>
               </Column>
-              <Column lg={4}>
+              <Column lg={4} md={4} sm={2}>
                 <TextInput
                   labelText={intl.formatMessage({
                     id: "testcalculation.label.textValue",
@@ -281,10 +281,11 @@ export const NCECorrectiveAction = () => {
                 />
               </Column>
 
-              <Column lg={16}>
+              <Column lg={16} md={8} sm={4}>
                 <br />
               </Column>
-              <Column lg={16}>
+
+              <Column lg={16} md={8} sm={4}>
                 <Button
                   type="button"
                   data-testid="nce-search-button"
@@ -304,14 +305,14 @@ export const NCECorrectiveAction = () => {
             </Section>
           </Form>
         </Column>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4}>
           <br />
         </Column>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4}>
           {tData && (
             <div>
               <Grid>
-                <Column lg={16} md={16} sm={16}>
+                <Column lg={16} md={8} sm={4}>
                   <Table style={{ marginTop: "1em" }}>
                     <TableHead>
                       <TableRow>

diff --git a/frontend/src/components/nonconform/common/ViewNonConforming.jsx b/frontend/src/components/nonconform/common/ViewNonConforming.jsx
@@ -262,15 +262,15 @@ export const ViewNonConformingEvent = () => {
     <>
       {notificationVisible === true ? <AlertDialog /> : ""}
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4}>
           <h2>
             <FormattedMessage id={`nonconform.view.report`} />
           </h2>
         </Column>
-        <Column lg={16} md={10} sm={8}>
+        <Column lg={16} md={8} sm={4}>
           <Form>
             <Grid fullWidth={true}>
-              <Column lg={4} md={8}>
+              <Column lg={4} md={4} sm={2}>
                 <Select
                   id="type"
                   labelText={intl.formatMessage({
@@ -294,7 +294,7 @@ export const ViewNonConformingEvent = () => {
                   ))}
                 </Select>
               </Column>
-              <Column lg={4}>
+              <Column lg={4} md={4} sm={2}>
                 <TextInput
                   labelText={intl.formatMessage({
                     id: "testcalculation.label.textValue",
@@ -309,10 +309,11 @@ export const ViewNonConformingEvent = () => {
                   id={`field.name`}
                 />
               </Column>
-              <Column lg={16}>
+              <Column lg={16} md={8} sm={4}>
                 <br></br>
               </Column>
-              <Column lg={16}>
+
+              <Column lg={16} md={8} sm={4}>
                 <Button
                   type="button"
                   data-testid="nce-search-button"