From 0dc255edf9b668e5727f53752b454ed1012e3e14 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Thu, 6 May 2021 09:00:33 -0300
Subject: [PATCH] Fix OP_RETURN css width.

---
 .../transactions-list.component.html          | 10 +++----
 .../transactions-list.component.scss          | 30 +++++++++++--------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index e28c93a5a..533c389c3 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -36,7 +36,7 @@
                 </td>
                 <td>
                   <div [ngSwitch]="true">
-                    <ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii"><span i18n="transactions-list.coinbase">Coinbase</span><ng-template [ngIf]="network !== 'liquid'">&nbsp;<span i18n="transactions-list.newly-generated-coins">(Newly Generated Coins)</span></ng-template></a><br><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
+                    <ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii"><span i18n="transactions-list.coinbase">Coinbase</span><ng-template [ngIf]="network !== 'liquid'">&nbsp;<span i18n="transactions-list.newly-generated-coins">(Newly Generated Coins)</span></ng-template></a><br /><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
                     <ng-container *ngSwitchCase="vin.is_pegin">
                       <span i18n="transactions-list.peg-in">Peg-in</span>
                     </ng-container>
@@ -225,15 +225,15 @@
 
   </div>
 
-  <br>
+  <br />
 
 </ng-container>
 
 <ng-template #assetBox let-item>
   {{ item.value / 100000000 | number: '1.0-' + assetsMinimal[item.asset][3] }} {{ assetsMinimal[item.asset][1] }}
-  <br>
+  <br />
   {{ assetsMinimal[item.asset][0] }}
-  <br>
+  <br />
   <a [routerLink]="['/asset/' | relativeUrl, item.asset]">{{ item.asset | shortenString : 13 }}</a>
-  <br><br>
+  <br /><br />
 </ng-template>
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index a70072ac3..f2dcce3b8 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -63,20 +63,30 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	vertical-align: middle;
-	width: 100%;
 	max-width: 50px;
-	@media (min-width: 768px) {
-		max-width: 200px;
+	width: 100%;
+	@media (min-width: 376px) {
+		max-width: 90px;
+	}
+	@media (min-width: 476px) {
+		max-width: 120px;
+	}
+	@media (min-width: 576px) {
+		max-width: 260px;
+	}
+	@media (min-width: 992px) {
+		max-width: 170px;
 	}
 }
 
 .scriptmessage.longer {
-	max-width: 500px;
-	@media (min-width: 375px) {
-		max-width: 200px !important;
+	display: inline-block;
+	max-width: 250px;
+	width: 100%;
+	@media (min-width: 576px) {
+		max-width: 300px;
 	}
 }
-
 .mobile-bottomcol {
 	margin-top: 15px;
 	@media (min-width: 992px) {
@@ -109,12 +119,6 @@
 	}
 }
 
-.longer {
-	max-width: 100% !important;
-    width: 200px;
-    display: inline-block;
-}
-
 .row{
 	flex-direction: column;
 	@media (min-width: 992px) {