From 99321f362d0db58e7af1735d6263fcda534b6f50 Mon Sep 17 00:00:00 2001
From: KillariDev <killari@gmail.com>
Date: Thu, 12 Dec 2024 11:08:15 +0200
Subject: [PATCH] show gas fee line better

---
 app/ts/components/pages/ConfirmTransaction.tsx               | 2 +-
 app/ts/components/simulationExplaining/SimulationSummary.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/ts/components/pages/ConfirmTransaction.tsx b/app/ts/components/pages/ConfirmTransaction.tsx
index 8e097975..51b1b3f6 100644
--- a/app/ts/components/pages/ConfirmTransaction.tsx
+++ b/app/ts/components/pages/ConfirmTransaction.tsx
@@ -242,7 +242,7 @@ function TransactionCard(param: TransactionCardParams) {
 					renameAddressCallBack = { param.renameAddressCallBack }
 				/>
 
-				<span class = 'log-table' style = 'margin-top: 10px; grid-template-columns: 33.33% 33.33% 33.33%;'>
+				<span class = 'log-table' style = 'margin-top: 10px; grid-template-columns: max-content auto auto; grid-column-gap: 5px;'>
 					<div class = 'log-cell'>
 						<span class = 'log-table' style = { { display: 'inline-flex'} }>
 							<GasFee tx = { simTx } rpcNetwork = { simulationAndVisualisationResults.rpcNetwork } />
diff --git a/app/ts/components/simulationExplaining/SimulationSummary.tsx b/app/ts/components/simulationExplaining/SimulationSummary.tsx
index 0522cb32..a291d6ce 100644
--- a/app/ts/components/simulationExplaining/SimulationSummary.tsx
+++ b/app/ts/components/simulationExplaining/SimulationSummary.tsx
@@ -621,7 +621,7 @@ export function TransactionHeaderForFailedToSimulate({ website } : { website: We
 }
 
 export function TransactionCreated({ created } : { created: EthereumTimestamp }) {
-	return <p style = 'color: var(--subtitle-text-color); text-align: right; display: inline'>
+	return <p style = 'color: var(--subtitle-text-color); text-align: right; display: inline; text-overflow: ellipsis; overflow: hidden;'>
 		{ 'Created ' }
 		<SomeTimeAgo priorTimestamp = { created } diffToText = { humanReadableDateDeltaLessDetailed }/>
 	</p>
@@ -633,7 +633,7 @@ export function SimulatedInBlockNumber({ simulationBlockNumber, currentBlockNumb
 		contentDisplayOverride = { `Simulated in block number ${ simulationBlockNumber }` }
 		copyMessage = 'Block number copied!'
 	>
-		<p style = 'color: var(--subtitle-text-color); text-align: right; display: inline'>
+		<p style = 'color: var(--subtitle-text-color); text-align: right; display: inline; text-overflow: ellipsis; overflow: hidden;'>
 			{ 'Simulated ' }
 			<span style = { `font-weight: bold; font-family: monospace; color: ${
 				simulationBlockNumber === currentBlockNumber && (rpcConnectionStatus.value?.isConnected || rpcConnectionStatus === undefined) ? 'var(--positive-color)' :