From d188025ba9e9ad84a6aad6a1e6c5a7fbb5607480 Mon Sep 17 00:00:00 2001
From: Jason Guo <33064781+Xaroz@users.noreply.github.com>
Date: Mon, 16 Dec 2024 12:20:34 -0600
Subject: [PATCH] fix: status icon not showing on mobile (#153)

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)
---
 src/features/messages/MessageTable.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/features/messages/MessageTable.tsx b/src/features/messages/MessageTable.tsx
index e4afc59..06598f7 100644
--- a/src/features/messages/MessageTable.tsx
+++ b/src/features/messages/MessageTable.tsx
@@ -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}
@@ -111,8 +111,8 @@ export function MessageSummaryRow({ message, mp }: { message: MessageStub; mp: M
               className="pt-px"
             />
           </span>
-        </LinkCell>
-      )}
+        )}
+      </LinkCell>
     </>
   );
 }