From acfe89f6349dbe0438a47cb8732c331c35463d2a Mon Sep 17 00:00:00 2001
From: Eddasol <esole@equinor.com>
Date: Wed, 5 Feb 2025 13:58:52 +0100
Subject: [PATCH] Fix inspection report for mobile

---
 .../InspectionReportPage/InspectionStyles.tsx     | 15 +++++++--------
 .../Pages/InspectionReportPage/InspectionView.tsx |  5 ++++-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx
index 7f7dfa0c..c20e6cae 100644
--- a/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx
+++ b/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx
@@ -2,13 +2,15 @@ import { Button, Card, Dialog } from '@equinor/eds-core-react'
 import { tokens } from '@equinor/eds-tokens'
 import { styled } from 'styled-components'
 
+export const HiddenOnSmallScreen = styled.div`
+    @media (max-width: 600px) {
+        display: none;
+    }
+`
+
 export const StyledInspection = styled.img<{ $otherContentHeight?: string }>`
     max-height: calc(80vh - ${(props) => props.$otherContentHeight});
     max-width: 100%;
-
-    @media (max-width: 600px) {
-        width: 95vw;
-    }
 `
 
 export const StyledInspectionImage = styled.img`
@@ -21,10 +23,6 @@ export const StyledDialog = styled(Dialog)`
     display: flex;
     width: 100%;
     max-height: 80vh;
-
-    @media (max-width: 600px) {
-        display: none;
-    }
 `
 export const StyledCloseButton = styled(Button)`
     width: 24px;
@@ -47,6 +45,7 @@ export const StyledDialogHeader = styled.div`
 
 export const StyledBottomContent = styled.div`
     display: flex;
+    flex-wrap: wrap;
     padding: 16px;
     gap: 16px;
     justify-content: space-between;
diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx
index f740a907..5be22b55 100644
--- a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx
+++ b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx
@@ -6,6 +6,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { formatDateTime } from 'utils/StringFormatting'
 import { useInspectionsContext } from 'components/Contexts/InspectionsContext'
 import {
+    HiddenOnSmallScreen,
     StyledBottomContent,
     StyledCloseButton,
     StyledDialog,
@@ -94,7 +95,9 @@ export const InspectionDialogView = ({ selectedTask, tasks }: InspectionDialogVi
                             )}
                         </StyledBottomContent>
                     </div>
-                    <InspectionOverviewDialogView tasks={tasks} />
+                    <HiddenOnSmallScreen>
+                        <InspectionOverviewDialogView tasks={tasks} />
+                    </HiddenOnSmallScreen>
                 </StyledDialogInspectionView>
             </StyledDialogContent>
         </StyledDialog>