From c4c9c86794b05d81fddff77c6c4f50795550b02a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= <barbara.chaves@vizzuality.com>
Date: Wed, 30 Oct 2024 10:42:55 +0100
Subject: [PATCH] Add sections pages fixed

---
 app/assets/stylesheets/tpi/_bubble-chart.scss  |  3 +--
 .../stylesheets/tpi/_nested-dropdown.scss      |  1 +
 app/assets/stylesheets/tpi/_selector.scss      |  4 ++++
 .../tpi/charts/companies_accordion.scss        |  4 ++--
 app/assets/stylesheets/tpi/pages/company.scss  | 18 ++++++++++++++++--
 app/assets/stylesheets/tpi/pages/sector.scss   |  1 -
 .../components/tpi/charts/bubble/Chart.js      |  4 ++--
 app/views/tpi/companies/show.html.erb          |  2 +-
 8 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/tpi/_bubble-chart.scss b/app/assets/stylesheets/tpi/_bubble-chart.scss
index 72ac7593c..486ee0786 100644
--- a/app/assets/stylesheets/tpi/_bubble-chart.scss
+++ b/app/assets/stylesheets/tpi/_bubble-chart.scss
@@ -20,7 +20,6 @@ $legend-image-width: 60px;
   width: 100%;
   /* CSS GRID */
   display: grid;
-  grid-row-gap: 4px;
   align-items: center;
 
   &--sectors {
@@ -214,7 +213,7 @@ $legend-image-width: 60px;
 .bubble-chart__level {
   border-right: calc(#{$tape-height / 2}) dotted $tape-color;
   position: relative;
-  height: 20%;
+  height: 60%;
 
 }
 
diff --git a/app/assets/stylesheets/tpi/_nested-dropdown.scss b/app/assets/stylesheets/tpi/_nested-dropdown.scss
index ae10a5794..9a073a86a 100644
--- a/app/assets/stylesheets/tpi/_nested-dropdown.scss
+++ b/app/assets/stylesheets/tpi/_nested-dropdown.scss
@@ -34,6 +34,7 @@
   &__title-header {
     display: flex;
     flex-direction: column;
+    font-size: 16px;
 
     small {
       margin-top: -7px;
diff --git a/app/assets/stylesheets/tpi/_selector.scss b/app/assets/stylesheets/tpi/_selector.scss
index 91c6255da..be0c3b949 100644
--- a/app/assets/stylesheets/tpi/_selector.scss
+++ b/app/assets/stylesheets/tpi/_selector.scss
@@ -12,6 +12,10 @@
       justify-content: space-between;
       cursor: pointer;
 
+      .selector__input {
+        border: 0;
+      }
+
       .selector__value {
         width: 100%;
         margin-right: 16px;
diff --git a/app/assets/stylesheets/tpi/charts/companies_accordion.scss b/app/assets/stylesheets/tpi/charts/companies_accordion.scss
index 3713a8f9e..47947987d 100644
--- a/app/assets/stylesheets/tpi/charts/companies_accordion.scss
+++ b/app/assets/stylesheets/tpi/charts/companies_accordion.scss
@@ -83,10 +83,10 @@ $tpi-level-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #9747FF;
       width: 100%;
       font-size: $size-5;
       border-radius: 0;
-      height: 30px;
+      height: 40px;
 
       &:focus {
-        height: 30px;
+        height: 40px;
       }
     }
   }
diff --git a/app/assets/stylesheets/tpi/pages/company.scss b/app/assets/stylesheets/tpi/pages/company.scss
index b5615106f..58267c76c 100644
--- a/app/assets/stylesheets/tpi/pages/company.scss
+++ b/app/assets/stylesheets/tpi/pages/company.scss
@@ -2,6 +2,14 @@
   .change-view {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
+  
+    .buttons {
+      justify-content: end;
+      @include until($desktop) {
+        // flex-direction: column;
+        justify-content: center;
+      }
+    }
   }
 
   .companies-header {
@@ -15,12 +23,15 @@
       color: white;
       line-height: 40px;
       margin-right: 10px;
+      @include until($desktop) {
+        margin-right: 0;
+      }
     }
 
     @include until($desktop) {
-      padding: 0 0.75rem;
+      padding-inline: 0 !important;
       font-size: $size-7;
-      height: 60px;
+      height: auto;
       font-family: $font-family-regular;
     }
   }
@@ -35,6 +46,9 @@
 
   .summary-boxes {
     margin-top: 1.5rem;
+    @include until($desktop) {
+      margin-top: 0;
+    }
   }
 
   .summary-box {
diff --git a/app/assets/stylesheets/tpi/pages/sector.scss b/app/assets/stylesheets/tpi/pages/sector.scss
index 065f50c91..59fcffd4f 100644
--- a/app/assets/stylesheets/tpi/pages/sector.scss
+++ b/app/assets/stylesheets/tpi/pages/sector.scss
@@ -32,7 +32,6 @@ $tape-color: rgba(25, 25, 25, 0.1);
       padding-inline: 0 !important;
       font-size: $size-7;
       height: auto;
-      padding-top: 40px;
       font-family: $font-family-regular;
       
     }
diff --git a/app/javascript/components/tpi/charts/bubble/Chart.js b/app/javascript/components/tpi/charts/bubble/Chart.js
index 7a16db5e0..16127caf5 100644
--- a/app/javascript/components/tpi/charts/bubble/Chart.js
+++ b/app/javascript/components/tpi/charts/bubble/Chart.js
@@ -109,7 +109,7 @@ const BubbleChart = ({ levels, sectors }) => {
 
   const levelsSignature = levels && Object.keys(levels[Object.keys(levels)[0]]);
 
-  const GRID_HEIGHT = parsedData.length * SINGLE_CELL_SVG_HEIGHT + 150;
+  const GRID_HEIGHT = parsedData.length * SINGLE_CELL_SVG_HEIGHT + 120;
 
   return (
     <div className="is-hidden-touch">
@@ -170,7 +170,7 @@ const BubbleChart = ({ levels, sectors }) => {
                   x1="1"
                   y1="0.984375"
                   x2="1"
-                  y2="1050"
+                  y2={GRID_HEIGHT}
                   stroke="#D8D8D8"
                   strokeLinecap="round"
                   strokeLinejoin="round"
diff --git a/app/views/tpi/companies/show.html.erb b/app/views/tpi/companies/show.html.erb
index e5a111126..62652fd3a 100644
--- a/app/views/tpi/companies/show.html.erb
+++ b/app/views/tpi/companies/show.html.erb
@@ -31,7 +31,7 @@
 
   <% if @company.cp_alignment_region.present? %>
     <section class="container change-view">
-      <div class="buttons has-addons" style="justify-content: flex-end;">
+      <div class="buttons has-addons">
         <%= link_to "Global benchmarks", {view: nil}, class: "button #{!regional_view ? 'is-primary' : 'is-secondary'}" %>
         <%= link_to "Regional benchmarks", {view: 'regional'}, class: "button #{regional_view ? 'is-primary' : 'is-secondary'}" %>
       </div>