Skip to content

Commit

Permalink
Improve DApp and Tx History display responsiveness
Browse files Browse the repository at this point in the history
Redesigned the layout of DApp list and transaction history components to use a grid system.  This improves responsiveness, particularly on smaller screens, and provides a more consistent user experience across different devices. The change also slightly reduces the maximum height of the DApp list to better accommodate the grid layout.
muffafa committed Oct 28, 2024
1 parent d353525 commit 1bed4e6
Showing 2 changed files with 2 additions and 4 deletions.
4 changes: 1 addition & 3 deletions tyche-frontend/src/components/Content/DAppList.jsx
Original file line number Diff line number Diff line change
@@ -22,9 +22,7 @@ function DAppList({ network }) {
Decentralized Apps
</p>
<div className="px-[23px] py-[43px] bg-tycheLightGray shadow rounded-[20px]">
<div
className={`space-y-4 overflow-y-auto max-h-[309px] min-h-[309px]`}
>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 gap-4 overflow-y-auto max-h-[290px] min-h-[290px]">
{dApps.map((dapp, index) => (
<DAppCard key={index} dapp={dapp} />
))}
2 changes: 1 addition & 1 deletion tyche-frontend/src/components/Content/TxHistory.jsx
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ function TxHistory({ transactions, currentNetwork, currentAddress }) {
</button>
</div>
<div className="flex-grow overflow-y-auto min-h-[420px] max-h-[420px]">
<div className="space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 gap-4">
{transactions.map((tx, index) => {
const txId = tx.attributes?.hash || `tx-${index}`;
const transactionTime = tx.attributes?.mined_at || null;

0 comments on commit 1bed4e6

Please sign in to comment.