corrected ui for book nutrients

bcgov · Feb 25, 2025 · f8409c1 · f8409c1
1 parent e36e627
commit f8409c1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/frontend/src/views/ManureAndCompost/NutrientAnalysis/NutrientAnalysis.tsx b/frontend/src/views/ManureAndCompost/NutrientAnalysis/NutrientAnalysis.tsx
@@ -19,6 +19,7 @@ import {
   NutrientContent,
   NutrientInputField,
   NutrientRadioWrapper,
+  NutrientContainer,
 } from './nutrientAnalsysis.styles';
 import { ModalContent } from '@/components/common/Modal/modal.styles';
 import { DropdownWrapper } from '@/components/common/Dropdown/dropdown.styles';
@@ -395,26 +396,26 @@ export default function NutrientAnalysis({ manures }: ManureListProps) {
                 <NutrientContent>
                   <ColumnContainer>
                     <RowContainer>
-                      <ColumnContainer>
-                        <HeaderText>Moisture (%)</HeaderText>
+                      <NutrientContainer>
+                        <HeaderText>Moisture</HeaderText>
                         <ValueText>{analysisForm.Nutrients.Moisture}</ValueText>
-                      </ColumnContainer>
-                      <ColumnContainer>
+                      </NutrientContainer>
+                      <NutrientContainer>
                         <HeaderText>N (%)</HeaderText>
                         <ValueText>{analysisForm.Nutrients.N}</ValueText>
-                      </ColumnContainer>
-                      <ColumnContainer>
+                      </NutrientContainer>
+                      <NutrientContainer>
                         <HeaderText>NH4-N (%)</HeaderText>
                         <ValueText>{analysisForm.Nutrients.NH4N}</ValueText>
-                      </ColumnContainer>
-                      <ColumnContainer>
+                      </NutrientContainer>
+                      <NutrientContainer>
                         <HeaderText>P (%)</HeaderText>
                         <ValueText>{analysisForm.Nutrients.P}</ValueText>
-                      </ColumnContainer>
-                      <ColumnContainer>
+                      </NutrientContainer>
+                      <NutrientContainer>
                         <HeaderText>K (%)</HeaderText>
                         <ValueText>{analysisForm.Nutrients.K}</ValueText>
-                      </ColumnContainer>
+                      </NutrientContainer>
                     </RowContainer>
                   </ColumnContainer>
                 </NutrientContent>

diff --git a/frontend/src/views/ManureAndCompost/NutrientAnalysis/nutrientAnalsysis.styles.ts b/frontend/src/views/ManureAndCompost/NutrientAnalysis/nutrientAnalsysis.styles.ts
@@ -4,6 +4,7 @@
 import styled from '@emotion/styled';
 import { StyledInput } from '@/components/common/InputField/inputField.styles';
 import { RadioButtonWrapper } from '@/components/common/RadioButton/radioButton.styles';
+import { ColumnContainer } from '@/views/FieldAndSoil/Crops/crops.styles';
 
 export const ContentWrapper = styled.div<{ hasAnalysis: boolean }>`
   margin-bottom: ${({ hasAnalysis }) => (hasAnalysis ? '170px' : '0')};
@@ -17,6 +18,13 @@ export const NutrientContent = styled.div`
   width: 5em;
 `;
 
+export const NutrientContainer = styled(ColumnContainer)`
+  display: grid;
+  justify-items: stretch;
+  height: 20px;
+  width: 5em;
+`;
+
 export const NutrientInputField = styled(StyledInput)`
   width: 5em;
   margin: 0.25em;