style: Updated styling of Browse models

src/App.styled.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 const StyledOutletWrapper = styled.section`
-  height: calc(100% - 200px);
+  height: calc(100% - 128px);
   overflow: scroll;
 `
 export { StyledOutletWrapper as OutletWrapper }

src/components/Table.styled.ts

@@ -9,9 +9,5 @@ export const StyledDiv = styled.div`
     > table {
       width: auto !important;
     }
-
-    > div {
-      max-width: none !important;
-    }
   }
 `

src/components/Table.tsx

@@ -15,7 +15,7 @@ export const Table = () => {
         enablePagination
         emptyMessage="Empty :("
         rows={models.data.data}
-        pageSize={15}
+        pageSize={5}
         columns={[
           {
             accessorKey: 'analogueModelId',

src/pages/Browse/Browse.styled.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import { spacings } from '../../tokens/spacings'
+
+export const BrowseWrapper = styled.div`
+  column-gap: ${spacings.X_LARGE};
+  padding: ${spacings.XXX_LARGE} ${spacings.X_LARGE};
+
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.X_LARGE};
+
+  > .btn-div {
+    > button {
+      width: 136px;
+      margin-right: 50px;
+    }
+  }
+`

src/pages/Browse/Browse.tsx

@@ -1,8 +1,9 @@
-import { Button, Snackbar } from '@equinor/eds-core-react'
+import { Button, Snackbar, Typography } from '@equinor/eds-core-react'
 import { useState } from 'react'
 import { Table } from '../../components/Table'
 import { AddModelDialog } from '../../features/AddModelDialog/AddModelDialog'
 import { useAnalogueModels } from '../../hooks/useAnalogueModels'
+import * as Styled from './Browse.styled'
 
 enum UploadProcess {
   STARTED = 'We are uploading your new model. Please keep this browser tab open.',
@@ -51,13 +52,16 @@ export const Browse = () => {
 
   return (
     <>
-      <div>
-        <Button href="/model/bf2171bc-2f5e-44a1-f6e0-08dbb5ed15e2/details">
-          model
-        </Button>
-      </div>
-      <Button onClick={toggleDialog}>Add new model</Button>
-      <Table />
+      <Styled.BrowseWrapper>
+        <Typography variant="h1">Browse all models</Typography>
+        <div className="btn-div">
+          <Button onClick={toggleDialog}>Add new model</Button>
+          <Button href="/model/bf2171bc-2f5e-44a1-f6e0-08dbb5ed15e2/details">
+            Model view - Hardkodet
+          </Button>
+        </div>
+        <Table />
+      </Styled.BrowseWrapper>
       <AddModelDialog
         isOpen={isAddModelDialog}
         confirm={uploadModel}