Skip to content

Commit

Permalink
fix: status icon not showing on mobile (#153)
Browse files Browse the repository at this point in the history
Fixed an issue that caused the icons to not show for mobile screens

- The culprit is the `absolute` position on the icon span, that anchors
to the main table `relative` (Kinda weird that it worked before). All
the icons would absolute position to the center of the table
- Removed `absolute` position on the icon, added a small width to the
`LinkCell` so that it can display the icon


![IMG_6387](https://github.com/user-attachments/assets/14da56f5-d321-47f1-a36c-a43870429eed)
  • Loading branch information
Xaroz authored Dec 16, 2024
1 parent 6c12183 commit d188025
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions src/features/messages/MessageTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,12 @@ export function MessageSummaryRow({ message, mp }: { message: MessageStub; mp: M
>
{shortenAddress(origin.hash)}
</LinkCell>
<LinkCell id={msgId} base64={base64} aClasses={styles.valueTruncated} tdClasses="pr-5">
<LinkCell id={msgId} base64={base64} aClasses={styles.valueTruncated}>
{getHumanReadableTimeString(origin.timestamp)}
</LinkCell>
{statusIcon && (
<LinkCell id={msgId} base64={base64} tdClasses="w-0">
<span className="absolute right-3 top-1/2 -translate-y-1/2 transform">
<LinkCell id={msgId} base64={base64} tdClasses="w-8">
{statusIcon && (
<span>
<Image
src={statusIcon}
width={18}
Expand All @@ -111,8 +111,8 @@ export function MessageSummaryRow({ message, mp }: { message: MessageStub; mp: M
className="pt-px"
/>
</span>
</LinkCell>
)}
)}
</LinkCell>
</>
);
}
Expand Down

0 comments on commit d188025

Please sign in to comment.