Fix/stylings

src/components/AreaCoordinates/AreaCoordinates.styled.tsx

@@ -5,6 +5,13 @@ import { theme } from '../../tokens/theme';
 
 export const StyledDialog = styled(Dialog)`
   width: fit-content;
+  max-width: 90vw;
+  max-height: 90vh;
+
+  @media (min-width: 700px) {
+    max-height: 90vh;
+    overflow-x: scroll;
+  }
 `;
 
 export const ContentSplitter = styled.div`
@@ -19,7 +26,9 @@ export const Selects = styled.div`
 
   row-gap: ${spacings.XXX_LARGE};
 
-  min-width: 450px;
+  @media (min-width: 750px) {
+    min-width: 450px;
+  }
 `;
 
 export const CoordinateFields = styled.div`

src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts

@@ -3,8 +3,17 @@ import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
 
 const StyledDialog = styled(Dialog)`
-  min-width: 600px;
   overflow-y: scroll;
+  width: fit-content;
+  max-width: 90vw;
+  max-height: 90vh;
+
+  @media (min-width: 650px) {
+    min-width: 600px;
+
+    max-height: 90vh;
+    overflow-x: scroll;
+  }
 `;
 
 const StyledDialogCustomContent = styled(Dialog.CustomContent)`

src/features/ModelTable/ModelTable.styled.ts

@@ -2,13 +2,21 @@ import styled from 'styled-components';
 import { spacings } from '../../tokens/spacings';
 
 export const Table = styled.div`
-  overflow-x: auto;
   padding-bottom: ${spacings.MEDIUM};
   max-width: 1750px;
-
   > div {
+    height: 100%;
+    overflow: hidden;
     > table {
       min-width: 90% !important;
+
+      > thead {
+        > tr {
+          > th {
+            vertical-align: middle !important;
+          }
+        }
+      }
     }
     > div {
       margin-top: 2rem;

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx

@@ -18,7 +18,7 @@ export const DataCell = styled(Table.Cell)`
   border: solid 0.5px ${theme.light.ui.background.medium};
   width: 150px;
   white-space: nowrap;
-  font-family: Equinor Mono;
+  font-family: cell_numeric_monospaced;
 
   > div {
     display: flex;

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts

@@ -2,10 +2,12 @@ import { Dialog } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../../../../tokens/spacings';
 
+import { theme } from '../../../../../../tokens/theme';
+
 export const StyledDialog = styled(Dialog)`
   width: fit-content;
-  min-width: 500px;
-  min-height: 500px;
+  max-width: 90vw;
+  max-height: 90vh;
 `;
 
 export const Content = styled(Dialog.CustomContent)`
@@ -16,3 +18,36 @@ export const Content = styled(Dialog.CustomContent)`
 `;
 
 export { StyledDialog as Dialog };
+
+export const ImageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  border-style: solid;
+  border-width: 1px;
+  border-color: ${theme.light.ui.background.medium};
+
+  > h5 {
+    font-weight: normal;
+    padding: ${spacings.SMALL};
+  }
+
+  > .image {
+    width: fit-content;
+    max-width: 80vw;
+    max-height: 70vh;
+    padding: ${spacings.SMALL};
+
+    @media (max-width: 1200px) {
+      width: fit-content;
+      max-width: 70vw;
+      max-height: 60vh;
+    }
+    @media (max-width: 800px) {
+      width: fit-content;
+      max-width: 60vw;
+      max-height: 50vh;
+    }
+  }
+`;

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx

@@ -1,7 +1,6 @@
-import { Button, Dialog } from '@equinor/eds-core-react';
+import { Button, Dialog, Typography } from '@equinor/eds-core-react';
 import { useQuery } from '@tanstack/react-query';
 import { getVariogramImage } from '../../../../../../api/custom/getImageById';
-import { ImageView } from '../../../../../../components/ImageView/ImageView';
 import * as Styled from './ImageResult.styled';
 
 export const ImageResult = ({
@@ -20,28 +19,22 @@ export const ImageResult = ({
   });
 
   return (
-    <>
-      <Styled.Dialog open={open} isDismissable>
-        <Dialog.Header>
-          <Dialog.Title>Result image</Dialog.Title>
-        </Dialog.Header>
-        <Styled.Content>
-          {isLoading && <>Loading ...</>}
-          {data && (
-            <ImageView
-              text="Case results"
-              img={data ? data : ''}
-              altText="Case results"
-            ></ImageView>
-          )}
-        </Styled.Content>
+    <Styled.Dialog open={open} isDismissable>
+      <Styled.Content>
+        {isLoading && <>Loading ...</>}
+        {data && (
+          <Styled.ImageWrapper>
+            <img className="image" alt="Case results" src={data ? data : ''} />
+            <Typography variant="h5">Case results</Typography>
+          </Styled.ImageWrapper>
+        )}
+      </Styled.Content>
 
-        <Dialog.Actions>
-          <Button variant="ghost" onClick={() => setOpen(!open)}>
-            Close
-          </Button>
-        </Dialog.Actions>
-      </Styled.Dialog>
-    </>
+      <Dialog.Actions>
+        <Button variant="ghost" onClick={() => setOpen(!open)}>
+          Close
+        </Button>
+      </Dialog.Actions>
+    </Styled.Dialog>
   );
 };

src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts

@@ -37,7 +37,7 @@ export const Quality = styled.span`
   display: flex;
   flex-direction: column;
   align-items: end;
-  font-family: Equinor Mono;
+  font-family: cell_numeric_monospaced;
 `;
 
 export { StyledDialog as Dialog };