Update BlockHashLink for mobile

src/app/components/Blocks/BlockLink.tsx

@@ -7,6 +7,7 @@ import { RouteUtils } from '../../utils/route-utils'
 import { TrimLinkLabel } from '../TrimLinkLabel'
 import { SearchScope } from '../../../types/searchScope'
 import { useScreenSize } from '../../hooks/useScreensize'
+import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
 
 export const BlockLink: FC<{ scope: SearchScope; height: number }> = ({ scope, height }) => (
   <Typography variant="mono">
@@ -23,15 +24,34 @@ export const BlockHashLink: FC<{
   alwaysTrim?: boolean
 }> = ({ scope, hash, height, alwaysTrim }) => {
   const { isTablet } = useScreenSize()
-  return (
-    <Typography variant="mono">
-      {isTablet || alwaysTrim ? (
-        <TrimLinkLabel label={hash} to={RouteUtils.getBlockRoute(scope, height)} />
-      ) : (
-        <Link component={RouterLink} to={RouteUtils.getBlockRoute(scope, height)}>
+  const to = RouteUtils.getBlockRoute(scope, height)
+
+  if (alwaysTrim) {
+    // Table view
+    return (
+      <Typography variant="mono">
+        <TrimLinkLabel label={hash} to={to} />
+      </Typography>
+    )
+  }
+
+  if (!isTablet) {
+    // Desktop view
+    return (
+      <Typography variant="mono">
+        <Link component={RouterLink} to={to}>
           {hash}
         </Link>
-      )}
+      </Typography>
+    )
+  }
+
+  // Mobile view
+  return (
+    <Typography variant="mono" sx={{ maxWidth: '100%', overflowX: 'hidden' }}>
+      <Link component={RouterLink} to={to}>
+        <AdaptiveTrimmer text={hash} strategy="middle" />
+      </Link>
     </Typography>
   )
 }