Chore/image view component

src/features/ModelView/ModelImageView/ModelImageView.styled.tsx → src/components/ImageView/ImageView.styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import { spacings } from '../../../tokens/spacings'
-import { theme } from '../../../tokens/theme'
+import { spacings } from '../../tokens/spacings'
+import { theme } from '../../tokens/theme'
 
 export const ImageWrapper = styled.div`
   display: flex;
@@ -12,24 +12,17 @@ export const ImageWrapper = styled.div`
   border-color: ${theme.light.ui.background.medium};
 
   max-width: 100%;
-  height: 100%;
+
+  height: fit-content;
 
   > h5 {
     font-weight: normal;
     margin: 0;
     padding: ${spacings.SMALL};
   }
 
-  > .metadata-image {
+  > .image {
     max-width: 100%;
     padding: ${spacings.SMALL};
   }
-
-  @media (max-width: 1350px) {
-    max-width: 100%;
-
-    > .metadata-image {
-      max-width: 100%;
-    }
-  }
 `

src/components/ImageView/ImageView.tsx

@@ -0,0 +1,18 @@
+import * as Styled from './ImageView.styled'
+
+export const ImageView = ({
+  text,
+  img,
+  altText,
+}: {
+  text: string
+  img: string
+  altText: string
+}) => {
+  return (
+    <Styled.ImageWrapper>
+      <img className="image" alt={altText} src={img} />
+      <h5>{text}</h5>
+    </Styled.ImageWrapper>
+  )
+}

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>

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};
           }
         }

src/features/ModelView/ModelView.tsx

@@ -1,7 +1,8 @@
-import { ModelImageView } from '../../features/ModelView/ModelImageView/ModelImageView'
+import { ImageView } from '../../components/ImageView/ImageView'
 import { ModelMetadataView } from '../../features/ModelView/ModelMetadataView/ModelMetadataView'
 import { ModelSourceView } from '../../features/ModelView/ModelSourceView/ModelSourceView'
 import * as Styled from './ModelView.styled'
+import Img from './image.png'
 
 export const ModelView = () => {
   return (
@@ -10,7 +11,11 @@ export const ModelView = () => {
         <ModelMetadataView />
         <ModelSourceView />
       </Styled.InnerMetadataWrapper>
-      <ModelImageView />
+      <ImageView
+        text="Model placeholder image"
+        img={Img}
+        altText="Model placeholder image"
+      />
     </Styled.MetadataWrapper>
   )
 }

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`