equinor · o-jorgensen · Jan 9, 2025
diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx
@@ -4,14 +4,17 @@ import { spacings } from '../../../../tokens/spacings';
 export const CaseResultView = styled.div`
   display: flex;
   flex-direction: column;
-
-  row-gap: ${spacings.XXX_LARGE};
-  padding: ${spacings.LARGE};
+  align-items: flex-start;
+  row-gap: ${spacings.X_LARGE};
+  padding: ${spacings.X_LARGE};
 `;
 
 export const CaseResultList = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${spacings.X_LARGE};
-  width: fit-content;
+  display: grid;
+  grid-template-columns: 1fr repeat(5, auto);
+  grid-row-gap: ${spacings.X_LARGE};
+
+  > * {
+    grid-column: 1 / -1;
+  }
 `;
diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts
@@ -1,10 +1,8 @@
 import styled from 'styled-components';
-import { spacings } from '../../../../../tokens/spacings';
 import { theme } from '../../../../../tokens/theme';
 
 export const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  column-gap: ${spacings.LARGE};
-  border: solid 0.5px ${theme.light.ui.background.medium};
+  display: grid;
+  grid-template-columns: subgrid;
+  border: solid 1px ${theme.light.ui.background.medium};
 `;
diff --git a/...seResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx b/...seResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx
@@ -4,35 +4,37 @@ import styled from 'styled-components';
 import { theme } from '../../../../../../tokens/theme';
 
 const StyledTable = styled(Table)`
-  width: 100%;
-  max-width: 800px;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+
+  tr:last-child td {
+    border-bottom: 0;
+  }
 `;
+
 export const ColumnCell = styled(Table.Cell)`
   background: ${theme.light.ui.background.light};
-  border: solid 0.5px ${theme.light.ui.background.medium};
+  font-weight: 700;
+  border-right: 1px solid ${theme.light.ui.background.medium};
   white-space: nowrap;
 `;
 
 export const DataCell = styled(Table.Cell)`
   text-align: right;
-  border: solid 0.5px ${theme.light.ui.background.medium};
-  width: 150px;
   white-space: nowrap;
 
+  &:not(:last-child) {
+    border-right: 1px solid ${theme.light.ui.background.medium};
+  }
+
   > div {
-    display: flex;
     justify-content: right;
   }
 `;
 
 export const InfoCell = styled(Table.Cell)`
   text-align: right;
-  border: solid 0.5px ${theme.light.ui.background.medium};
-  width: 20%;
-  > div {
-    display: flex;
-    justify-content: right;
-  }
+  border-right: 1px solid ${theme.light.ui.background.medium};
 `;
 
 export { StyledTable as Table };
diff --git a/...atures/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.styled.ts b/...atures/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.styled.ts
@@ -1,60 +1,76 @@
 import styled from 'styled-components';
+import { theme } from '../../../../../../tokens/theme';
 import { spacings } from '../../../../../../tokens/spacings';
 
 export const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: ${spacings.MEDIUM_SMALL} 0 ${spacings.MEDIUM_SMALL} ${spacings.LARGE};
-  row-gap: ${spacings.MEDIUM_SMALL};
-`;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-auto-rows: auto;
+  grid-column: 1 / 6;
+  align-items: end;
+  padding: ${spacings.MEDIUM_SMALL} ${spacings.LARGE};
+  border-right: 1px solid ${theme.light.ui.background.medium};
 
-export const ResultHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-`;
+  > * {
+    grid-column: 1 / -1;
+  }
 
-export const MetadataWrapperDiv = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  > hr {
+    grid-row: 2 / 3;
+  }
 `;
 
-export const MetadataDiv = styled.div`
-  align-items: start;
-  padding-right: ${spacings.MEDIUM};
-  > label {
-    margin: 0;
+export const ResultHeader = styled.div`
+  display: grid;
+  grid-row: 1 / 2;
+  grid-template-columns: 1fr auto;
+  grid-column-gap: ${spacings.MEDIUM};
+  white-space: nowrap;
+
+  .actions {
+    display: flex;
+    column-gap: ${spacings.MEDIUM};
+    align-items: center;
   }
 `;
 
 export const CoordinateDiv = styled.div`
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-row: 3 / 4;
 `;
 
 export const RowElement = styled.div`
   white-space: nowrap;
   > label {
-    margin: 0;
+    margin-inline-start: 0;
   }
-`;
 
-export const Divider = styled.div`
-  width: 100%;
-`;
+  &.area {
+    padding-inline-end: ${spacings.MEDIUM};
+    min-width: 220px;
+    width: fit-content;
+  }
 
-export const VerticalDivider = styled.div`
-  width: 0px;
-  height: 100%;
-  margin: 0 ${spacings.MEDIUM};
-  border: 0.5px solid #e0e0e0;
+  &:not(.area) {
+    padding-inline: ${spacings.MEDIUM};
+    border-left: 1px solid ${theme.light.ui.background.medium};
+
+    &:last-child {
+      padding-inline-end: 0;
+    }
+  }
+
+  .value {
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
 `;
 
-export const CenterElements = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+export const VerticalDivider = styled.div`
+  background-color: ${theme.light.ui.background.medium};
+  margin-left: ${spacings.SMALL};
+  margin-right: calc(${spacings.SMALL} - 1px);
+  width: 1px;
 `;
diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.tsx
@@ -66,11 +66,30 @@ export const ResultArea = ({
     }
   };
 
+  /* Make numbers nice to read
+   * This code was sponsored by artificial intelligence :P
+   */
+  const formatter = new Intl.NumberFormat('en-US', {
+    useGrouping: true,
+  }).format;
+  const formatNumber = (num: number): string =>
+    formatter(num).replace(/,/g, ' ');
+
+  const formattedXLength = () => {
+    const value = xLength();
+    return value ? formatNumber(value) : undefined;
+  };
+
+  const formattedYLength = () => {
+    const value = yLength();
+    return value ? formatNumber(value) : undefined;
+  };
+
   const area = () => {
     const x = xLength();
     const y = yLength();
 
-    if (x && y) return x * y + ' m^2';
+    if (x && y) return formatNumber(x * y) + ' m²';
   };
 
   const updateStatus = (checked: boolean) => {
@@ -94,58 +113,56 @@ export const ResultArea = ({
             computeMethod={computeMethod}
             modelArea={modelArea}
           />
-          <Styled.CenterElements>
+          <div className="actions">
             <Button variant="outlined" onClick={toggleOpen}>
               <Icon data={barChart} title={'Open plot for case results.'} />
               Show plot
             </Button>
 
-            <Label style={{ paddingTop: '0.5rem' }} label="Status"></Label>
             <Switch
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 updateStatus(e.target.checked);
               }}
               checked={checkedStatus()}
-              label={data.status}
+              label="Published"
               disabled={!isOwner}
             ></Switch>
-          </Styled.CenterElements>
+          </div>
         </Styled.ResultHeader>
 
-        <Styled.Divider>
-          <Divider color="medium" variant="medium" size="1" />
-        </Styled.Divider>
+        <Divider variant="small" style={{ width: '100%' }} />
+
         <Styled.CoordinateDiv>
-          <Styled.RowElement>
+          <Styled.RowElement className="area">
             <Label label="Area size"></Label>
-            <Typography>{area() ? area() : '-'}</Typography>
+            <Typography className="value">{area() ? area() : '-'}</Typography>
           </Styled.RowElement>
-          <Styled.VerticalDivider />
           <Styled.RowElement>
             <Label label="X start"></Label>
-            <Typography>
-              {modelArea === 'Whole model' ? '-' : xCoordinate?.x + ' m'}
+            <Typography className="value">
+              {modelArea === 'Whole model'
+                ? '-'
+                : formatNumber(xCoordinate?.x) + ' m'}
             </Typography>
           </Styled.RowElement>
-          <Styled.VerticalDivider />
           <Styled.RowElement>
             <Label label="X length"></Label>
-            <Typography>
-              {modelArea === 'Whole model' ? '-' : xLength() + ' m'}
+            <Typography className="value">
+              {modelArea === 'Whole model' ? '-' : formattedXLength() + ' m'}
             </Typography>
           </Styled.RowElement>
-          <Styled.VerticalDivider />
           <Styled.RowElement>
             <Label label="Y start"></Label>
-            <Typography>
-              {modelArea === 'Whole model' ? '-' : yCoordinate?.x + ' m'}
+            <Typography className="value">
+              {modelArea === 'Whole model'
+                ? '-'
+                : formatNumber(yCoordinate?.x) + ' m'}
             </Typography>
           </Styled.RowElement>
-          <Styled.VerticalDivider />
           <Styled.RowElement>
             <Label label="Y length"></Label>
-            <Typography>
-              {modelArea === 'Whole model' ? '-' : yLength() + ' m'}
+            <Typography className="value">
+              {modelArea === 'Whole model' ? '-' : formattedYLength() + ' m'}
             </Typography>
           </Styled.RowElement>
         </Styled.CoordinateDiv>

diff --git a/...aseResultView/ObjectCaseResult/ResultArea/ResultCaseMetadata/ResultCaseMetadata.styled.ts b/...aseResultView/ObjectCaseResult/ResultArea/ResultCaseMetadata/ResultCaseMetadata.styled.ts
@@ -4,20 +4,12 @@ import { spacings } from '../../../../../../../tokens/spacings';
 export const MetadataWrapperDiv = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: center;
+  column-gap: ${spacings.LARGE};
+  align-items: flex-end;
 `;
 
 export const MetadataDiv = styled.div`
-  align-items: start;
-  padding-right: ${spacings.MEDIUM};
   > label {
-    margin: 0;
+    margin-inline-start: 0;
   }
 `;
-
-export const VerticalDivider = styled.div`
-  width: 0px;
-  height: 100%;
-  margin: 0 ${spacings.MEDIUM};
-  border: 0.5px solid #e0e0e0;
-`;
diff --git a/...sult/CaseResultView/ObjectCaseResult/ResultArea/ResultCaseMetadata/ResultCaseMetadata.tsx b/...sult/CaseResultView/ObjectCaseResult/ResultArea/ResultCaseMetadata/ResultCaseMetadata.tsx
@@ -14,7 +14,6 @@ export const ResultCaseMetadata = ({
         <Label label="Object type"></Label>
         <Typography variant="h5"> {computeMethod}</Typography>
       </Styled.MetadataDiv>
-      <Styled.VerticalDivider />
       <Styled.MetadataDiv>
         <Label label="Area"></Label>
         <Typography variant="h5"> {modelArea}</Typography>