From d50d63d710b183ffb9de2edf00ed983cb51a7e4a Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Fri, 7 Oct 2022 10:35:44 +0200
Subject: [PATCH] UI adjustments

---
 caimira/apps/calculator/static/css/form.css         | 2 +-
 caimira/apps/static/css/style.css                   | 4 ++++
 caimira/apps/templates/base/calculator.form.html.j2 | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/caimira/apps/calculator/static/css/form.css b/caimira/apps/calculator/static/css/form.css
index dd08db56..2cb5fbee 100644
--- a/caimira/apps/calculator/static/css/form.css
+++ b/caimira/apps/calculator/static/css/form.css
@@ -66,7 +66,7 @@
   content: attr(data-tooltip);
   padding: 10px 18px;
   min-width: 50px;
-  max-width: 220px;
+  max-width: 200px;
   width: max-content;
   width: -moz-max-content;
   border-radius: 6px;
diff --git a/caimira/apps/static/css/style.css b/caimira/apps/static/css/style.css
index fa7d0d11..4f5d97c1 100644
--- a/caimira/apps/static/css/style.css
+++ b/caimira/apps/static/css/style.css
@@ -276,6 +276,10 @@ footer img {
     display: inline!important;
   }
 
+  #event_data_tooltip:before{
+    max-width: 350px!important;
+  }
+
 }
 
 @media (max-width: 40em) {
diff --git a/caimira/apps/templates/base/calculator.form.html.j2 b/caimira/apps/templates/base/calculator.form.html.j2
index 6698b0bf..b1dc9534 100644
--- a/caimira/apps/templates/base/calculator.form.html.j2
+++ b/caimira/apps/templates/base/calculator.form.html.j2
@@ -303,7 +303,7 @@
 
     <!-- Event Options -->
     <b>Event data:</b>
-    <div data-tooltip="The total no. of occupants in the room. 
+    <div id="event_data_tooltip" data-tooltip="The total no. of occupants in the room. 
     Deterministic exposure: add no. occupants that are infected.
     Probabilistic exposure: event at a given time & location (e.g. meeting or conference), considering the incidence rate in that area.">
         <span class="tooltip_text">?</span>
@@ -337,7 +337,7 @@
       </div>
       <div class="form-group row">
         <div class="col-sm-4"><label class="col-form-label">New confirmed cases (weekly):</label></div>
-        <div class="col-sm-6 pl-0 align-self-center"><input type="number" step="any" id="geographic_cases" class="non_zero form-control" name="geographic_cases" placeholder="Cases (#7-day rolling average)" min="0"></div>
+        <div class="col-sm-6 pl-0 align-self-center"><input type="number" step="any" id="geographic_cases" class="non_zero form-control" name="geographic_cases" placeholder="Cases (#7-day rolling avg)" min="0"></div>
       </div>
       <div class="form-group row">
       <div class="col-sm-4"><label class="col-form-label">Confidence level:</label></div>