Contain inspection image in dialog

equinor · Jan 29, 2025 · 94e72d6 · 94e72d6
1 parent 6f26595
commit 94e72d6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx
@@ -2,10 +2,9 @@ import { Button, Card, Dialog } from '@equinor/eds-core-react'
 import { tokens } from '@equinor/eds-tokens'
 import { styled } from 'styled-components'
 
-export const StyledInspection = styled.img`
-    flex: 1 0 0;
-    align-self: stretch;
-    width: 80vh;
+export const StyledInspection = styled.img<{ $otherContentHeight?: string }>`
+    max-height: calc(80vh - ${(props) => props.$otherContentHeight});
+    max-width: 100%;
 
     @media (max-width: 600px) {
         width: 95vw;

diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx
@@ -48,7 +48,7 @@ export const InspectionDialogView = ({ selectedTask, tasks }: InspectionDialogVi
                         </StyledDialogHeader>
                         <StyledDialogInspectionView>
                             <div>
-                                <StyledInspection src={data} />
+                                <StyledInspection $otherContentHeight={'174px'} src={data} />
                                 <StyledBottomContent>
                                     <StyledInfoContent>
                                         <Typography variant="caption">{TranslateText('Installation') + ':'}</Typography>