From b1c0f950a89acc474dec7832054abd0bed9d23d9 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Thu, 21 Sep 2023 09:40:53 +0200
Subject: [PATCH] chore: fixed and improved responsive styling

---
 .../ModelMetadataView/ModelMetadataView.tsx      | 16 ++++++++++++++++
 src/features/ModelView/ModelView.styled.tsx      | 11 ++++++-----
 src/pages/ModelPages/Model/Model.styled.tsx      |  1 +
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
index f18248e9..6caef1a8 100644
--- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
+++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
@@ -35,6 +36,21 @@ export const ModelMetadataView = () => {
         <p>
           {model.description}
           <br />
+          <p>
+            ** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
+            bibendum ex at venenatis gravida. Sed id tempor dui. Nunc a posuere
+            ligula. Pellentesque pulvinar varius neque nec molestie. Aliquam
+            erat volutpat. Nunc pulvinar varius scelerisque. Suspendisse
+            iaculis, elit id fringilla semper, justo felis luctus felis, et
+            malesuada augue sapien a sem. Donec varius, sapien quis varius
+            blandit, justo ex pellentesque nisl, eu placerat magna nisi et odio.
+            Donec laoreet est quam, id fringilla magna semper in. Duis non massa
+            euismod, ultrices tortor et, ultricies ante. Vivamus quis dignissim
+            sem. Quisque purus dui, euismod eu lacus sed, mollis sagittis arcu.
+            Curabitur vitae mauris ornare, elementum massa suscipit, congue leo.
+            Sed fermentum imperdiet dapibus. Aliquam non ligula in felis laoreet
+            suscipit. **
+          </p>
         </p>
       )}
       <div>
diff --git a/src/features/ModelView/ModelView.styled.tsx b/src/features/ModelView/ModelView.styled.tsx
index 44156242..ec2c8c9c 100644
--- a/src/features/ModelView/ModelView.styled.tsx
+++ b/src/features/ModelView/ModelView.styled.tsx
@@ -20,6 +20,7 @@ export const InnerMetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.XXX_LARGE};
+  width: 80%;
 
   .edit-metadata-button {
     margin-top: ${spacings.MEDIUM_SMALL};
@@ -31,7 +32,7 @@ export const InnerMetadataWrapper = styled.div`
 
     > div {
       > table {
-        width: 480px;
+        width: 85%;
 
         > tbody {
           > tr {
@@ -39,7 +40,7 @@ export const InnerMetadataWrapper = styled.div`
             }
 
             > .table-first-col {
-              width: 80px;
+              width: 20%;
               padding-right: ${spacings.X_LARGE};
             }
           }
@@ -51,10 +52,10 @@ export const InnerMetadataWrapper = styled.div`
   .source-view {
     width: 100%;
     min-width: 256px;
-    max-width: 640px;
+    max-width: 100%;
 
     > table {
-      width: 480px;
+      width: 85%;
 
       > thead,
       tbody {
@@ -63,7 +64,7 @@ export const InnerMetadataWrapper = styled.div`
           }
 
           > .table-first-col {
-            width: 376px;
+            width: 80%;
             padding-right: ${spacings.X_LARGE};
           }
         }
diff --git a/src/pages/ModelPages/Model/Model.styled.tsx b/src/pages/ModelPages/Model/Model.styled.tsx
index 8c6a0f48..93888ec4 100644
--- a/src/pages/ModelPages/Model/Model.styled.tsx
+++ b/src/pages/ModelPages/Model/Model.styled.tsx
@@ -6,6 +6,7 @@ export const Wrapper = styled.div`
   flex-direction: row;
   position: relative;
   width: 100%;
+  height: 100%;
 `
 
 export const SidebarWrapper = styled.div`