Fix response vars (#675)

* fixed design response vars in tx details

Author: xJeneKx

public/views/modals/tx-details.html

@@ -257,12 +257,13 @@ <h4 class="title m0" translate>This transaction was sent to an autonomous agent<
       </li>
     </ul>
 
-    <h4 ng-show="btx.formattedResponseVars" class="title m0" translate>Response variables</h4>
-    <div ng-show="btx.formattedResponseVars" class="size-14 m0 tx-details">
-		<div style="display: grid;grid-template-columns: auto 1fr;">
-			<div ng-repeat="(_key,value) in btx.formattedResponseVars" class="line-b p10 tx-grid">{{ value }}</div>
-		</div>
-    </div>
+	  <h4 ng-show="btx.formattedResponseVars" class="title m0" translate>Response variables</h4>
+	  <ul ng-show="btx.formattedResponseVars" class="no-bullet size-14 m0 tx-details">
+		  <li ng-repeat="(key,value) in btx.formattedResponseVars" class="line-b p10 row collapse" style="display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-end;">
+			  <div class="text-gray enable_text_select" style="word-wrap: break-word; flex: 1; width: 100%"><span>{{key}}</span></div>
+			  <div class="enable_text_select" ng-class="[value.isJson ? 'tx-grid_json' : 'right text-right']" style="word-wrap: break-word">{{value.v}}</div>
+		  </li>
+	  </ul>
   </div>
 
 </div>

src/css/main.css

@@ -2305,12 +2305,7 @@ not screen and (min-resolution: 192dpi) {
 	display: block;
 }
 
-.tx-grid {
-	word-wrap: break-word;
+.tx-grid_json {
 	white-space: pre-wrap;
-}
-
-.tx-grid:nth-child(odd) {
-	max-width: 144px;
 	width: 100%;
 }

src/js/controllers/walletHome.js

@@ -3115,26 +3115,25 @@ angular.module('copayApp.controllers')
         }
 
 		function formatResponseVars(vars) {
-			const _vars = [];
+			const _vars = {};
 
 			for (let key in vars) {
 				let _key = key;
-				let value = vars[key];
+				let value = { isJson: false, v: vars[key] };
 				if (key.length > 14) {
 					// _key = key.split('_').join('\n_');
 				}
 
 				try {
 					const v = JSON.parse(vars[key]);
 					if (v && typeof v === 'object') {
-						value = JSON.stringify(v, null, 2);
+						value = { isJson: true, v: JSON.stringify(v, null, 2) };
 					}
 				} catch (e) {
 					// nothing
 				}
 
-				_vars.push(_key);
-				_vars.push(value);
+				_vars[_key] = value;
 			}	
 
 			return _vars;