Make explorer table views more mobile friendly (#11358)

explorer/src/components/AccountDetails.tsx

@@ -90,13 +90,13 @@ function UnknownAccountCard({ account }: { account: Account }) {
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             <Address pubkey={account.pubkey} alignRight />
           </td>
         </tr>
         <tr>
           <td>Balance (SOL)</td>
-          <td className="text-right text-uppercase">
+          <td className="text-lg-right text-uppercase">
             {lamportsToSolString(lamports)}
           </td>
         </tr>
@@ -104,14 +104,14 @@ function UnknownAccountCard({ account }: { account: Account }) {
         {details && (
           <tr>
             <td>Data (Bytes)</td>
-            <td className="text-right">{details.space}</td>
+            <td className="text-lg-right">{details.space}</td>
           </tr>
         )}
 
         {details && (
           <tr>
             <td>Owner</td>
-            <td className="text-right">
+            <td className="text-lg-right">
               <Address pubkey={details.owner} alignRight link />
             </td>
           </tr>
@@ -120,7 +120,9 @@ function UnknownAccountCard({ account }: { account: Account }) {
         {details && (
           <tr>
             <td>Executable</td>
-            <td className="text-right">{details.executable ? "Yes" : "No"}</td>
+            <td className="text-lg-right">
+              {details.executable ? "Yes" : "No"}
+            </td>
           </tr>
         )}
       </TableCardBody>
@@ -281,13 +283,7 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
 
       detailsList.push(
         <tr key={signature}>
-          {index === 0 ? (
-            <td className="w-1">{slot}</td>
-          ) : (
-            <td className="text-muted text-center w-1">
-              <span className="fe fe-more-horizontal" />
-            </td>
-          )}
+          <td className="w-1">{slot}</td>
 
           <td>
             <span className={`badge badge-soft-${statusClass}`}>

explorer/src/components/StatsCard.tsx

@@ -75,31 +75,31 @@ function StatsCardBody() {
     <TableCardBody>
       <tr>
         <td className="w-100">Block</td>
-        <td className="text-right text-monospace">{currentBlock}</td>
+        <td className="text-lg-right text-monospace">{currentBlock}</td>
       </tr>
       <tr>
         <td className="w-100">Block time</td>
-        <td className="text-right text-monospace">{averageBlockTime}</td>
+        <td className="text-lg-right text-monospace">{averageBlockTime}</td>
       </tr>
       <tr>
         <td className="w-100">Epoch</td>
-        <td className="text-right text-monospace">{currentEpoch} </td>
+        <td className="text-lg-right text-monospace">{currentEpoch} </td>
       </tr>
       <tr>
         <td className="w-100">Epoch progress</td>
-        <td className="text-right text-monospace">{epochProgress} </td>
+        <td className="text-lg-right text-monospace">{epochProgress} </td>
       </tr>
       <tr>
         <td className="w-100">Epoch time remaining</td>
-        <td className="text-right text-monospace">{epochTimeRemaining} </td>
+        <td className="text-lg-right text-monospace">{epochTimeRemaining} </td>
       </tr>
       <tr>
         <td className="w-100">Transaction count</td>
-        <td className="text-right text-monospace">{transactionCount} </td>
+        <td className="text-lg-right text-monospace">{transactionCount} </td>
       </tr>
       <tr>
         <td className="w-100">Transactions per second</td>
-        <td className="text-right text-monospace">{averageTps} </td>
+        <td className="text-lg-right text-monospace">{averageTps} </td>
       </tr>
     </TableCardBody>
   );

explorer/src/components/SupplyCard.tsx

@@ -32,19 +32,21 @@ export default function SupplyCard() {
       <TableCardBody>
         <tr>
           <td className="w-100">Total Supply (SOL)</td>
-          <td className="text-right">{lamportsToSolString(supply.total, 0)}</td>
+          <td className="text-lg-right">
+            {lamportsToSolString(supply.total, 0)}
+          </td>
         </tr>
 
         <tr>
           <td className="w-100">Circulating Supply (SOL)</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             {lamportsToSolString(supply.circulating, 0)}
           </td>
         </tr>
 
         <tr>
           <td className="w-100">Non-Circulating Supply (SOL)</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             {lamportsToSolString(supply.nonCirculating, 0)}
           </td>
         </tr>

explorer/src/components/TransactionDetails.tsx

@@ -114,19 +114,19 @@ function StatusCard({ signature }: Props) {
       <TableCardBody>
         <tr>
           <td>Signature</td>
-          <td className="text-right">
-            <Signature signature={signature} />
+          <td className="text-lg-right">
+            <Signature signature={signature} alignRight />
           </td>
         </tr>
 
         <tr>
           <td>Result</td>
-          <td className="text-right">{renderResult()}</td>
+          <td className="text-lg-right">{renderResult()}</td>
         </tr>
 
         <tr>
           <td>Timestamp</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             {info.timestamp !== "unavailable" ? (
               displayTimestamp(info.timestamp * 1000)
             ) : (
@@ -143,12 +143,12 @@ function StatusCard({ signature }: Props) {
 
         <tr>
           <td>Confirmations</td>
-          <td className="text-right text-uppercase">{info.confirmations}</td>
+          <td className="text-lg-right text-uppercase">{info.confirmations}</td>
         </tr>
 
         <tr>
           <td>Block</td>
-          <td className="text-right">{info.slot}</td>
+          <td className="text-lg-right">{info.slot}</td>
         </tr>
 
         {blockhash && (
@@ -162,7 +162,7 @@ function StatusCard({ signature }: Props) {
                 </InfoTooltip>
               )}
             </td>
-            <td className="text-right">
+            <td className="text-lg-right">
               <code>{blockhash}</code>
             </td>
           </tr>
@@ -171,7 +171,7 @@ function StatusCard({ signature }: Props) {
         {fee && (
           <tr>
             <td>Fee (SOL)</td>
-            <td className="text-right">{lamportsToSolString(fee)}</td>
+            <td className="text-lg-right">{lamportsToSolString(fee)}</td>
           </tr>
         )}
       </TableCardBody>

explorer/src/components/account/StakeAccountCards.tsx

@@ -63,20 +63,20 @@ function OverviewCard({
       <TableCardBody>
         <tr>
           <td>Address</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             <Address pubkey={account.pubkey} alignRight />
           </td>
         </tr>
         <tr>
           <td>Balance (SOL)</td>
-          <td className="text-right text-uppercase">
+          <td className="text-lg-right text-uppercase">
             {lamportsToSolString(account.lamports || 0)}
           </td>
         </tr>
         {stakeAccount.meta && (
           <tr>
             <td>Rent Reserve (SOL)</td>
-            <td className="text-right">
+            <td className="text-lg-right">
               {lamportsToSolString(stakeAccount.meta.rentExemptReserve)}
             </td>
           </tr>
@@ -84,7 +84,7 @@ function OverviewCard({
         {!stakeAccount.meta && (
           <tr>
             <td>State</td>
-            <td className="text-right">{stakeAccount.displayState()}</td>
+            <td className="text-lg-right">{stakeAccount.displayState()}</td>
           </tr>
         )}
       </TableCardBody>
@@ -112,21 +112,21 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
       <TableCardBody>
         <tr>
           <td>Status</td>
-          <td className="text-right">{displayStatus()}</td>
+          <td className="text-lg-right">{displayStatus()}</td>
         </tr>
 
         {stake && (
           <>
             <tr>
               <td>Delegated Stake (SOL)</td>
-              <td className="text-right">
+              <td className="text-lg-right">
                 {lamportsToSolString(stake.delegation.stake)}
               </td>
             </tr>
 
             <tr>
               <td>Delegated Vote Address</td>
-              <td className="text-right">
+              <td className="text-lg-right">
                 <Address
                   pubkey={stake.delegation.voterPubkey}
                   alignRight
@@ -137,7 +137,7 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
 
             <tr>
               <td>Activation Epoch</td>
-              <td className="text-right">
+              <td className="text-lg-right">
                 {stake.delegation.isBootstrapStake()
                   ? "-"
                   : stake.delegation.activationEpoch}
@@ -146,7 +146,7 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
 
             <tr>
               <td>Deactivation Epoch</td>
-              <td className="text-right">
+              <td className="text-lg-right">
                 {stake.delegation.isDeactivated()
                   ? stake.delegation.deactivationEpoch
                   : "-"}
@@ -171,14 +171,14 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
       <TableCardBody>
         <tr>
           <td>Stake Authority Address</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             <Address pubkey={meta.authorized.staker} alignRight link />
           </td>
         </tr>
 
         <tr>
           <td>Withdraw Authority Address</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             <Address pubkey={meta.authorized.withdrawer} alignRight link />
           </td>
         </tr>
@@ -186,7 +186,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
         {hasLockup && (
           <tr>
             <td>Lockup Authority Address</td>
-            <td className="text-right">
+            <td className="text-lg-right">
               <Address pubkey={meta.lockup.custodian} alignRight link />
             </td>
           </tr>

explorer/src/components/common/Address.tsx

@@ -30,17 +30,9 @@ export default function Address({ pubkey, alignRight, link }: Props) {
       <span className="fe fe-check-circle"></span>
     );
 
-  const copyButton = (
-    <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
-  );
-
-  return (
-    <div
-      className={`d-flex align-items-center ${
-        alignRight ? "justify-content-end" : ""
-      }`}
-    >
-      {copyButton}
+  const content = (
+    <>
+      <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
       <span className="text-monospace">
         {link ? (
           <Link className="" to={clusterPath(`/accounts/${address}`)}>
@@ -51,6 +43,19 @@ export default function Address({ pubkey, alignRight, link }: Props) {
           displayAddress(address)
         )}
       </span>
-    </div>
+    </>
+  );
+
+  return (
+    <>
+      <div
+        className={`d-none d-lg-flex align-items-center ${
+          alignRight ? "justify-content-end" : ""
+        }`}
+      >
+        {content}
+      </div>
+      <div className="d-flex d-lg-none align-items-center">{content}</div>
+    </>
   );
 }

explorer/src/components/common/Signature.tsx

@@ -4,9 +4,13 @@ import { TransactionSignature } from "@solana/web3.js";
 import { clusterPath } from "utils/url";
 
 type CopyState = "copy" | "copied";
-type Props = { signature: TransactionSignature; link?: boolean };
+type Props = {
+  signature: TransactionSignature;
+  alignRight?: boolean;
+  link?: boolean;
+};
 
-export default function Signature({ signature, link }: Props) {
+export default function Signature({ signature, alignRight, link }: Props) {
   const [state, setState] = useState<CopyState>("copy");
 
   const copyToClipboard = () => navigator.clipboard.writeText(signature);
@@ -28,7 +32,11 @@ export default function Signature({ signature, link }: Props) {
   );
 
   return (
-    <div className="d-flex align-items-center justify-content-end">
+    <div
+      className={`d-flex align-items-center ${
+        alignRight ? "justify-content-end" : ""
+      }`}
+    >
       {copyButton}
       <span className="text-monospace">
         {link ? (

explorer/src/components/instruction/RawDetails.tsx

@@ -17,7 +17,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
     <>
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={ix.programId} alignRight link />
         </td>
       </tr>
@@ -33,7 +33,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
               <span className="badge badge-soft-dark mr-1">Signer</span>
             )}
           </td>
-          <td className="text-right">
+          <td className="text-lg-right">
             <Address pubkey={pubkey} alignRight link />
           </td>
         </tr>
@@ -41,7 +41,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
 
       <tr>
         <td>Instruction Data (Base58)</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Copyable text={data} right>
             <code>{displayData(data)}</code>
           </Copyable>

explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx

@@ -46,35 +46,35 @@ export function AuthorizeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Old Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.newAuthorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Type</td>
-        <td className="text-right">{authorizationType}</td>
+        <td className="text-lg-right">{authorizationType}</td>
       </tr>
     </InstructionCard>
   );

explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx

@@ -33,21 +33,21 @@ export function DeactivateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/stake/DelegateDetailsCard.tsx

@@ -33,28 +33,28 @@ export function DelegateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Delegated Vote Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.votePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/stake/InitializeDetailsCard.tsx

@@ -34,28 +34,28 @@ export function InitializeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorized.staker} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorized.withdrawer} alignRight link />
         </td>
       </tr>
@@ -63,14 +63,14 @@ export function InitializeDetailsCard(props: {
       {params.lockup.epoch > 0 && (
         <tr>
           <td>Lockup Expiry Epoch</td>
-          <td className="text-right">{params.lockup.epoch}</td>
+          <td className="text-lg-right">{params.lockup.epoch}</td>
         </tr>
       )}
 
       {params.lockup.unixTimestamp > 0 && (
         <tr>
           <td>Lockup Expiry Timestamp</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             {new Date(params.lockup.unixTimestamp * 1000).toUTCString()}
           </td>
         </tr>
@@ -79,7 +79,7 @@ export function InitializeDetailsCard(props: {
       {!params.lockup.custodian.equals(SystemProgram.programId) && (
         <tr>
           <td>Lockup Custodian Address</td>
-          <td className="text-right">
+          <td className="text-lg-right">
             <Address pubkey={params.lockup.custodian} alignRight link />
           </td>
         </tr>

explorer/src/components/instruction/stake/SplitDetailsCard.tsx

@@ -29,35 +29,37 @@ export function SplitDetailsCard(props: {
     <InstructionCard ix={ix} index={index} result={result} title="Split Stake">
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Stake Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.splitStakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Split Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
+        <td className="text-lg-right">
+          {lamportsToSolString(params.lamports)}
+        </td>
       </tr>
     </InstructionCard>
   );

explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx

@@ -34,35 +34,37 @@ export function WithdrawDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={StakeProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Stake Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.stakePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.toPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
+        <td className="text-lg-right">
+          {lamportsToSolString(params.lamports)}
+        </td>
       </tr>
     </InstructionCard>
   );

explorer/src/components/instruction/system/AllocateDetailsCard.tsx

@@ -33,21 +33,21 @@ export function AllocateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Allocated Space (Bytes)</td>
-        <td className="text-right">{params.space}</td>
+        <td className="text-lg-right">{params.space}</td>
       </tr>
     </InstructionCard>
   );

explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx

@@ -34,28 +34,28 @@ export function AllocateWithSeedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.basePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Seed</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Copyable right text={params.seed}>
             <code>{params.seed}</code>
           </Copyable>
@@ -64,12 +64,12 @@ export function AllocateWithSeedDetailsCard(props: {
 
       <tr>
         <td>Allocated Space (Bytes)</td>
-        <td className="text-right">{params.space}</td>
+        <td className="text-lg-right">{params.space}</td>
       </tr>
 
       <tr>
         <td>Assigned Owner</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/AssignDetailsCard.tsx

@@ -33,21 +33,21 @@ export function AssignDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Assigned Owner</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx

@@ -34,28 +34,28 @@ export function AssignWithSeedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Account Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.accountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.basePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Seed</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Copyable right text={params.seed}>
             <code>{params.seed}</code>
           </Copyable>
@@ -64,7 +64,7 @@ export function AssignWithSeedDetailsCard(props: {
 
       <tr>
         <td>Assigned Owner</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/CreateDetailsCard.tsx

@@ -34,38 +34,40 @@ export function CreateDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.fromPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.newAccountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Transfer Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
+        <td className="text-lg-right">
+          {lamportsToSolString(params.lamports)}
+        </td>
       </tr>
 
       <tr>
         <td>Allocated Space (Bytes)</td>
-        <td className="text-right">{params.space}</td>
+        <td className="text-lg-right">{params.space}</td>
       </tr>
 
       <tr>
         <td>Assigned Owner</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx

@@ -35,35 +35,35 @@ export function CreateWithSeedDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.fromPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.newAccountPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Base Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.basePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Seed</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Copyable right text={params.seed}>
             <code>{params.seed}</code>
           </Copyable>
@@ -72,17 +72,19 @@ export function CreateWithSeedDetailsCard(props: {
 
       <tr>
         <td>Transfer Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
+        <td className="text-lg-right">
+          {lamportsToSolString(params.lamports)}
+        </td>
       </tr>
 
       <tr>
         <td>Allocated Space (Bytes)</td>
-        <td className="text-right">{params.space}</td>
+        <td className="text-lg-right">{params.space}</td>
       </tr>
 
       <tr>
         <td>Assigned Owner</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.programId} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx

@@ -33,21 +33,21 @@ export function NonceAdvanceDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx

@@ -33,28 +33,28 @@ export function NonceAuthorizeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Old Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>New Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.newAuthorizedPubkey} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx

@@ -33,21 +33,21 @@ export function NonceInitializeDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>

explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx

@@ -34,35 +34,37 @@ export function NonceWithdrawDetailsCard(props: {
     >
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Nonce Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.noncePubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Authority Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.authorizedPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={params.toPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Withdraw Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
+        <td className="text-lg-right">
+          {lamportsToSolString(params.lamports)}
+        </td>
       </tr>
     </InstructionCard>
   );

explorer/src/components/instruction/system/TransferDetailsCard.tsx

@@ -29,28 +29,30 @@ export function TransferDetailsCard(props: {
     <InstructionCard ix={ix} index={index} result={result} title="Transfer">
       <tr>
         <td>Program</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={SystemProgram.programId} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>From Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={transfer.fromPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>To Address</td>
-        <td className="text-right">
+        <td className="text-lg-right">
           <Address pubkey={transfer.toPubkey} alignRight link />
         </td>
       </tr>
 
       <tr>
         <td>Transfer Amount (SOL)</td>
-        <td className="text-right">{lamportsToSolString(transfer.lamports)}</td>
+        <td className="text-lg-right">
+          {lamportsToSolString(transfer.lamports)}
+        </td>
       </tr>
     </InstructionCard>
   );