fix(transaction): align in transaction parameter (#146)

* fix(transaction): align in transaction parameter * fix(transaction): no margin left if on the mobile device
Magickbase · Nov 15, 2023 · 883a52c · 883a52c
1 parent 993e330
commit 883a52c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/pages/Transaction/TransactionComp/TransactionOverview.tsx b/src/pages/Transaction/TransactionComp/TransactionOverview.tsx
@@ -24,6 +24,9 @@ import {
   TransactionInfoContentPanel,
   TransactionOverviewPanel,
   TransactionInfoItemPanel,
+  TransactionInfoContentContainer,
+  TransactionInfoContentTitle,
+  TransactionInfoContentTag,
 } from './styled'
 import { useLatestBlockNumber } from '../../../services/ExplorerService'
 import { Transaction } from '../../../models/Transaction'
@@ -62,7 +65,7 @@ const TransactionInfoItem = ({
   tag?: ReactNode
 }) => (
   <TransactionInfoContentItem>
-    <div className="transaction__info__content_title">
+    <TransactionInfoContentTitle>
       {title ? (
         <>
           <span>{title}</span>
@@ -72,9 +75,9 @@ const TransactionInfoItem = ({
       ) : (
         ''
       )}
-    </div>
-    <div className="transaction__info__content_container monospace">
-      <div className="transaction__info__content_value">
+    </TransactionInfoContentTitle>
+    <TransactionInfoContentContainer className="monospace">
+      <div className="">
         {linkUrl ? (
           <Link to={linkUrl} className="monospace">
             {value}
@@ -84,8 +87,8 @@ const TransactionInfoItem = ({
         )}
         {valueTooltip && <HelpTip title={valueTooltip} />}
       </div>
-      {tag && <div className="transaction__info__content__tag">{tag}</div>}
-    </div>
+      {tag && <TransactionInfoContentTag>{tag}</TransactionInfoContentTag>}
+    </TransactionInfoContentContainer>
   </TransactionInfoContentItem>
 )
 

diff --git a/src/pages/Transaction/TransactionComp/styled.tsx b/src/pages/Transaction/TransactionComp/styled.tsx
@@ -104,7 +104,6 @@ export const TransactionInfoItemPanel = styled.div`
   }
 
   .transactionInfoValue {
-    margin-left: 10px;
     margin-top: 5px;
     max-height: 250px;
     font-size: 16px;
@@ -121,6 +120,28 @@ export const TransactionInfoContentPanel = styled.div`
   margin: 15px 0;
 `
 
+export const TransactionInfoContentTitle = styled.div`
+  flex: 0 0 auto;
+  width: 160px;
+`
+
+export const TransactionInfoContentContainer = styled.div`
+  display: flex;
+
+  @media (max-width: 1150px) {
+    display: block;
+  }
+`
+
+export const TransactionInfoContentTag = styled.div`
+  margin-left: 10px;
+  margin-top: 3px;
+
+  @media (max-width: 1150px) {
+    margin-left: 0;
+  }
+`
+
 export const TransactionInfoContentItem = styled.div`
   display: flex;
   margin: 5px 0;