chore: fixed and improved responsive styling

equinor · Sep 21, 2023 · db5cf2b · db5cf2b
1 parent d829600
commit db5cf2b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git 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
@@ -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,15 +32,15 @@ export const InnerMetadataWrapper = styled.div`
 
     > div {
       > table {
-        width: 480px;
+        width: 85%;
 
         > tbody {
           > tr {
             > .table-row {
             }
 
             > .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
@@ -6,6 +6,7 @@ export const Wrapper = styled.div`
   flex-direction: row;
   position: relative;
   width: 100%;
+  height: 100%;
 `
 
 export const SidebarWrapper = styled.div`