From 601517c840915fec45aa36cc5195f373f503baef Mon Sep 17 00:00:00 2001
From: Nora Kristiansen <106915799+NoraKri@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:16:44 +0100
Subject: [PATCH] scale SVG to fit but not exceed container

---
 www/src/App.css                       |  5 ++++-
 www/src/components/diagram/Pandid.tsx | 13 +++++++++++--
 www/src/components/editor/Editor.tsx  |  2 ++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/www/src/App.css b/www/src/App.css
index b75a94c..76e4351 100644
--- a/www/src/App.css
+++ b/www/src/App.css
@@ -1,7 +1,10 @@
 body,
 html {
-    width: 100%;
+    width: 100vw;
+    height: 100vh;
     margin: 0;
+    padding: 0;
+    overflow: hidden;
 }
 
 html,
diff --git a/www/src/components/diagram/Pandid.tsx b/www/src/components/diagram/Pandid.tsx
index c4e9082..5eb9f98 100644
--- a/www/src/components/diagram/Pandid.tsx
+++ b/www/src/components/diagram/Pandid.tsx
@@ -11,6 +11,12 @@ import PandidContext from "../../context/PandidContext.ts";
 import PipeSystem from "./piping/PipeSystem.tsx";
 import { cleanTripleStore } from "../../utils/Triplestore.ts";
 import { useCommissioningPackageContext } from "../../hooks/useCommissioningPackageContext.tsx";
+import styled from "styled-components";
+
+const SVGContainer = styled.div`
+  width: 100%;
+  height: 100%;
+`;
 
 export default function Pandid() {
   const context = useCommissioningPackageContext();
@@ -61,7 +67,7 @@ export default function Pandid() {
   }, [xmlData]);
 
   return (
-    <>
+    <SVGContainer>
       {xmlData && (
         <PandidContext.Provider
           value={{
@@ -70,6 +76,9 @@ export default function Pandid() {
         >
           <svg
             viewBox={`${xmlData.PlantModel.Drawing.Extent.Min.X} ${xmlData.PlantModel.Drawing.Extent.Min.Y} ${xmlData.PlantModel.Drawing.Extent.Max.X} ${xmlData.PlantModel.Drawing.Extent.Max.Y}`}
+            width={"100%"}
+            height={"100%"}
+            preserveAspectRatio={"xMidyMid meet"}
           >
             {equipments &&
               equipments.map((equipment: EquipmentProps, index: number) => (
@@ -103,6 +112,6 @@ export default function Pandid() {
           </svg>
         </PandidContext.Provider>
       )}
-    </>
+    </SVGContainer>
   );
 }
diff --git a/www/src/components/editor/Editor.tsx b/www/src/components/editor/Editor.tsx
index 3e2328a..ee8dabf 100644
--- a/www/src/components/editor/Editor.tsx
+++ b/www/src/components/editor/Editor.tsx
@@ -17,6 +17,8 @@ const EditorContainer = styled.div`
 const SideBarAndPandid = styled.div`
   display: flex;
   flex-direction: row;
+  height: 100%;
+  width: 100%;
 `;
 
 export default function Editor() {