From 37363581711d89416996d712cc326c747edf634a Mon Sep 17 00:00:00 2001
From: Tiago Baptista <92083272+tiagobcx@users.noreply.github.com>
Date: Mon, 27 Nov 2023 13:52:17 +0000
Subject: [PATCH] report html with responsive layout (#617)

---
 internal/wrappers/results-summary.go | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/internal/wrappers/results-summary.go b/internal/wrappers/results-summary.go
index 83ea89a7a..230166ab4 100644
--- a/internal/wrappers/results-summary.go
+++ b/internal/wrappers/results-summary.go
@@ -243,7 +243,7 @@ const summaryTemplateHeader = `{{define "SummaryTemplate"}}
             position: relative;
             top: 0;
             width: 100%;
-						margin-top: 10rem
+			margin-top: 10rem;
         }
 
         .progress {
@@ -271,7 +271,7 @@ const summaryTemplateHeader = `{{define "SummaryTemplate"}}
 
 
         .top-row .element {
-            margin: 0 3rem 2rem;
+            margin: 0 1rem 2rem;
         }
 
         .top-row .risk-level-tile .value {
@@ -297,6 +297,7 @@ const summaryTemplateHeader = `{{define "SummaryTemplate"}}
         .top-row .risk-level-tile.high {
             background: #f1605d;
             color: #fcfdff;
+            justify-content: center;
         }
 
 		.top-row .risk-level-tile.medium {
@@ -362,7 +363,6 @@ const summaryTemplateHeader = `{{define "SummaryTemplate"}}
         .top-row {
             -ms-flex-pack: justify;
             -webkit-box-pack: justify;
-            align-items: center;
             display: flex;
             justify-content: space-evenly;
             padding: 20px;
@@ -496,6 +496,7 @@ const summaryTemplateHeader = `{{define "SummaryTemplate"}}
 		  	border: 1px solid #ddd;
 		  	padding: 8px;
 			font-size: 14px;
+            width: 25%;
 		}
 
 		#policy tr{
@@ -523,6 +524,17 @@ const summaryTemplateHeader = `{{define "SummaryTemplate"}}
 			font-size: 15px;
 			font-weight: 700;
 		}
+        @media only screen and (max-width: 1100px) {
+            .top-row  {
+            	display: block;
+            }
+            .element.risk-level-tile.high{
+                width: 100%;
+            }
+            .element{
+                width: 100% !important;
+            }
+        }
     </style>
     <script>
         window.addEventListener('load', function () {