From 6931428d8f6bc20916c4536ba0942c8787816b88 Mon Sep 17 00:00:00 2001
From: Nelson Jovel <memoryman51@hotmail.com>
Date: Wed, 15 Dec 2021 18:22:43 +0100
Subject: [PATCH] Make measure name responsive

---
 app/assets/stylesheets/overview.scss        | 24 ++++++++++++++++++++
 app/views/overview/_variance_chart.html.erb | 25 ++++++++++++---------
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/overview.scss b/app/assets/stylesheets/overview.scss
index 1dd316bb..22cd45f4 100644
--- a/app/assets/stylesheets/overview.scss
+++ b/app/assets/stylesheets/overview.scss
@@ -92,3 +92,27 @@
   border-radius: 50%;
   width: 20px;
 }
+
+@media only screen and (min-width: 768px){
+.measure-row-label {
+  width: 170px;
+}
+  }
+@media only screen and (min-width: 1000px){
+.measure-row-label {
+  width: 200px;
+}
+
+}
+@media only screen and (min-width: 1200px){
+.measure-row-label {
+  width: 250px;
+}
+
+}
+@media only screen and (min-width: 1400px){
+.measure-row-label {
+  width: 500px;
+}
+
+}
diff --git a/app/views/overview/_variance_chart.html.erb b/app/views/overview/_variance_chart.html.erb
index 39831b66..ef1ef85a 100644
--- a/app/views/overview/_variance_chart.html.erb
+++ b/app/views/overview/_variance_chart.html.erb
@@ -66,28 +66,31 @@
     <svg id=measure-row-limited-availability-indicator x="0" y="<%= heading_gutter %>">
       <% displayed_presenters.each_with_index do |presenter, index| %>
         <% if presenter.show_partial_data_indicator? %>
-          <use xlink:href="/fontawesome-free/sprites/solid.svg#circle-exclamation" width="<%= partial_data_indicator_size %>"
+          <foreignObject
+            width="<%= partial_data_indicator_size %>"
             height="<%= partial_data_indicator_size %>"
-            data-bs-toggle="popover" data-bs-placement="right"
-            data-bs-content="The following sources are not included in this measure due to insufficient data: <%= presenter.partial_data_sources.join(' and ') %>."
             x="<%= partial_data_indicator_size / 2 %>"
             y="<%= index * measure_row_height + measure_row_height / 2  - partial_data_indicator_size / 2 %>">
-          </use>
+            <i class="fas fa-exclamation-circle"
+              data-bs-toggle="popover" data-bs-placement="right"
+              data-bs-content="The following sources are not included in this measure due to insufficient data: <%= presenter.partial_data_sources.join(' and ') %>." ></i>
+          </foreignObject>
         <% end %>
       <% end %>
     </svg>
 
     <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
       <% displayed_presenters.each_with_index do |presenter, index| %>
-        <text
-          class="font-cabin"
+        <foreignObject
           x="<%= availability_indicator_percentage %>%"
-          y="<%= index * measure_row_height + measure_row_height / 2 %>"
+          y="<%= index * measure_row_height + measure_row_height / 4 %>"
           dominant-baseline="middle"
-          data-variance-row-label
-        >
-          <%= presenter.measure_name %>
-        </text>
+          width="550"
+          height="200">
+          <p class="measure-row-label" xmlns="http://www.w3.org/1999/xhtml">
+            <%= presenter.measure_name %>
+          </p>
+        </foreignObject>
       <% end %>
 
       <% if displayed_presenters.none? %>