Fix OP_RETURN truncated text. (#502)

* Fix OP_RETURN truncated text.

* Fix scriptmessage width on desktop media queries

frontend/src/app/bisq/bisq-address/bisq-address.component.scss

@@ -65,28 +65,10 @@ h1 {
 	}
 }
 
-.scriptmessage {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	@media (min-width: 576px) {
-		max-width: 200px;
-	}
-}
-
-.scriptmessage.longer {
-	max-width: 500px;
-}
-
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;
 	}
-	.scriptmessage.longer {
-		max-width: 200px !important;
-	}
-
 	.details-table td:first-child {
 		white-space: pre-wrap;
 	}

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss

@@ -76,28 +76,10 @@ h1 {
 	}
 }
 
-.scriptmessage {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	@media (min-width: 576px) {
-		max-width: 200px;
-	}
-}
-
-.scriptmessage.longer {
-	max-width: 500px;
-}
-
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;
 	}
-	.scriptmessage.longer {
-		max-width: 200px !important;
-	}
-
 	.details-table td:first-child {
 		white-space: pre-wrap;
 	}

frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss

@@ -59,28 +59,10 @@
   background-color:#6c757d;
 }
 
-.scriptmessage {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	@media (min-width: 576px) {
-		max-width: 200px;
-	}
-}
-
-.scriptmessage.longer {
-	max-width: 500px;
-}
-
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;
 	}
-	.scriptmessage.longer {
-		max-width: 200px !important;
-	}
-
 	.details-table td:first-child {
 		white-space: pre-wrap;
 	}

frontend/src/app/components/address/address.component.scss

@@ -58,28 +58,10 @@ h1 {
 	}
 }
 
-.scriptmessage {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	@media (min-width: 576px) {
-		max-width: 200px;
-	}
-}
-
-.scriptmessage.longer {
-	max-width: 500px;
-}
-
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;
 	}
-	.scriptmessage.longer {
-		max-width: 200px !important;
-	}
-
 	.details-table td:first-child {
 		white-space: pre-wrap;
 	}

frontend/src/app/components/block/block.component.scss

@@ -64,29 +64,10 @@ h1 {
 		flex-direction: row;
 	}
 }
-
-.scriptmessage {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	@media (min-width: 576px) {
-		max-width: 200px;
-	}
-}
-
-.scriptmessage.longer {
-	max-width: 500px;
-}
-
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;
 	}
-	.scriptmessage.longer {
-		max-width: 200px !important;
-	}
-
 	.details-table td:first-child {
 		white-space: pre-wrap;
 	}

frontend/src/app/components/transaction/transaction.component.scss

@@ -47,12 +47,6 @@ h1{
 	  text-align: left;
 	  width: 100%;
 	}
-  }
-
-@media (max-width: 767.98px) {
-	.mobile-bottomcol {
-		margin-top: 15px;
-	}
 }
 
 .td-width {
@@ -81,8 +75,6 @@ h1{
 }
 
 .btn {
-	// float: right;
-	// margin-bottom: 0px;
 	margin-top: 5px;
 }
 
@@ -97,27 +89,10 @@ h1{
 	}
 }
 
-.scriptmessage {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	@media (min-width: 576px) {
-		max-width: 200px;
-	}
-}
-
-.scriptmessage.longer {
-	max-width: 500px;
-}
-
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;
 	}
-	.scriptmessage.longer {
-		max-width: 200px !important;
-	}
 
 	.details-table td:first-child {
 		white-space: pre-wrap;
@@ -146,7 +121,3 @@ h1{
 		}
 	}
 }
-// .container-buttons{
-// 	width: 100%;
-// 	display: inline-block;
-// }

frontend/src/app/components/transactions-list/transactions-list.component.scss

@@ -59,34 +59,6 @@
   	background-color:#6c757d;
 }
 
-.scriptmessage {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	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 {
-	display: inline-block;
-	max-width: 250px;
-	width: 100%;
-	@media (min-width: 576px) {
-		max-width: 300px;
-	}
-}
 .mobile-bottomcol {
 	margin-top: 15px;
 	@media (min-width: 992px) {

frontend/src/styles.scss

@@ -549,3 +549,57 @@ th {
         direction: rtl;
     }
 }
+
+
+.scriptmessage {
+	overflow: hidden;
+	display: inline-block;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	max-width: 50px;
+	width: 100%;
+  text-align: center;
+	@media (min-width: 376px) {
+		max-width: 90px;
+	}
+	@media (min-width: 476px) {
+		max-width: 180px;
+	}
+	@media (min-width: 576px) {
+		max-width: 260px;
+	}
+	@media (min-width: 768px) {
+    max-width: 400px;
+	}
+	@media (min-width: 850px) {
+    max-width: 522px;
+	}
+	@media (min-width: 992px) {
+		max-width: 190px;
+	}
+	@media (min-width: 1200px) {
+		max-width: 250px;
+	}
+}
+
+.scriptmessage.longer {
+	max-width: 230px;
+	@media (min-width: 376px) {
+		max-width: 290px;
+	}
+	@media (min-width: 476px) {
+		max-width: 380px;
+	}
+	@media (min-width: 576px) {
+		max-width: 470px;
+	}
+	@media (min-width: 768px) {
+    max-width: 850px;
+	}
+	@media (min-width: 992px) {
+		max-width: 410px;
+	}
+	@media (min-width: 1200px) {
+		max-width: 480px;
+	}
+}