From b342c30ee329fe10700cecfff87f7483b9c870f3 Mon Sep 17 00:00:00 2001
From: Angelika Schneider <aruppel@gmx.de>
Date: Wed, 8 Jan 2025 11:22:59 +0100
Subject: [PATCH] Fix assessment result view and add ML icon (#225)

* Add env variables subsection

* Ensure targets is always an array to prevent TypeError

* Add icon for machine learning

* update icon ml

* Fix assessment result details window

* ++
---
 src/lib/components/DiscoveryGraph.svelte      |  1 +
 .../(app)/cloud/[id]/assessments/+page.svelte | 42 +++++++++++++++----
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/DiscoveryGraph.svelte b/src/lib/components/DiscoveryGraph.svelte
index a687aca..35ce661 100644
--- a/src/lib/components/DiscoveryGraph.svelte
+++ b/src/lib/components/DiscoveryGraph.svelte
@@ -7,6 +7,7 @@
 	import {
 		Beaker,
 		BuildingLibrary,
+		ChartPie,
 		CircleStack,
 		Cloud,
 		CodeBracket,
diff --git a/src/routes/(app)/cloud/[id]/assessments/+page.svelte b/src/routes/(app)/cloud/[id]/assessments/+page.svelte
index a3c35e2..39e1f75 100644
--- a/src/routes/(app)/cloud/[id]/assessments/+page.svelte
+++ b/src/routes/(app)/cloud/[id]/assessments/+page.svelte
@@ -70,6 +70,34 @@
 	}
 </script>
 
+<style>
+	.text-wrap {
+			white-space: pre-wrap; /* Beibehaltung von Zeilenumbrüchen und Umbruch von langen Zeilen */
+			word-wrap: break-word; /* Ermöglicht den Umbruch in langen Wörtern */
+			overflow-wrap: break-word; /* Für zusätzliche Browserkompatibilität */
+	}
+	.modal-background {
+        position: fixed; /* Fixiert das Modal in der Ansicht */
+        top: 0;
+        left: 0;
+        right: 0; /* Füllt die gesamte Breite */
+        bottom: 0; /* Füllt die gesamte Höhe */
+        display: flex; /* Flexbox benutzen */
+        align-items: center; /* Vertikal zentrieren */
+        justify-content: center; /* Horizontal zentrieren */
+        background-color: rgba(0, 0, 0, 0.5); /* Dunkler Hintergrund für das Modal */
+    }
+
+    .modal-content {
+        /* max-width: 600px; Maximale Breite des Modals */
+        width: 70%; /* Breite des Modals */
+        background: white; /* Hintergrundfarbe des Modals */
+        border-radius: 8px; /* Abgerundete Ecken */
+        padding: 20px; /* Innenabstand */
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für das Modal */
+    }
+</style>
+
 {#if data.resources.length == 0}
 	<StarterHint type="assessment results" icon={QueueList}>
 		<span slot="component">Clouditor Assessment component</span>
@@ -130,15 +158,11 @@
 						{#each currentData as assessment}
 							{#if showModalId == assessment.id}
 								<tr>
-									<div
-										class=" inset-0 flex max-w-80 items-center justify-center bg-gray-100 bg-opacity-75"
-									>
-										<div class="rounded bg-white p-6 shadow-lg">
-											<pre class="overflow-y-auto rounded bg-gray-100 p-4">{JSON.stringify(
-													assessment,
-													null,
-													5
-												)}</pre>
+									<div class="modal-background"	>
+										<div class="modal-content">
+											<pre class="overflow-y-auto rounded bg-gray-100 p-4 text-wrap">
+												{JSON.stringify(assessment,null,5)}
+											</pre>
 											<Button on:click={closeModal} class="mt-2">Close</Button>
 										</div>
 									</div>