From f8c5584be7ed8e3312eaf27bb3d48f8c09a99134 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Wed, 16 Mar 2022 20:54:32 +0100
Subject: [PATCH] Apply coinbase style to blocks list tooltip

---
 .../blocks-list/blocks-list.component.html         |  2 +-
 .../blocks-list/blocks-list.component.scss         | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index cb301e992..e71ad7817 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -30,7 +30,7 @@
                   onError="this.src = './resources/mining-pools/default.svg'">
                 <span class="pool-name">{{ block.extras.pool.name }}</span>
               </a>
-              <span class="tooltiptext">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
+              <span class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
             </div>
           </td>
           <td class="timestamp" *ngIf="!widget">
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss
index 3ea6e42f9..354c403af 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -34,8 +34,9 @@ td {
 }
 .pool.widget {
   width: 40%;
+  padding-left: 30px;
   @media (max-width: 576px) {
-    padding-left: 30px;
+    padding-left: 40px;
     width: 60%;
   }
 }
@@ -130,14 +131,12 @@ td {
 
 .tooltip-custom .tooltiptext {
   visibility: hidden;
-  background-color: black;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
   position: absolute;
   z-index: 1;
-  // width: 120px;
   top: -40px;
   left: 0;
 }
@@ -145,4 +144,13 @@ td {
 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip-custom:hover .tooltiptext {
   visibility: visible;
+}
+
+.scriptmessage {
+  overflow: hidden;
+	display: inline-block;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	max-width: 50vw;
+  text-align: left;
 }
\ No newline at end of file