Improve mobile responsiveness for message summary

src/components/icons/ChainIcon.tsx

@@ -35,6 +35,7 @@ function _ChainIcon({
   size?: number;
 }) {
   const imageSrc = (chainId && CHAIN_TO_ICON[chainId]) || QuestionMark;
+
   return (
     <div
       style={{ width: `${size}px`, height: `${size}px` }}
@@ -44,8 +45,8 @@ function _ChainIcon({
       <Image
         src={imageSrc}
         alt={`chain-${chainId}`}
-        width={size / 2.2}
-        height={size / 2.2}
+        width={Math.floor(size / 2.2)}
+        height={Math.floor(size / 2.2)}
       />
     </div>
   );

src/components/icons/ChainToChain.tsx

@@ -2,22 +2,31 @@ import Image from 'next/future/image';
 import { memo } from 'react';
 
 import ArrowRightIcon from '../../images/icons/arrow-right-short.svg';
+import { useIsMobile } from '../../styles/mediaQueries';
 
 import { ChainIcon } from './ChainIcon';
 
 function _ChainToChain({
   originChainId,
   destinationChainId,
-  size,
+  size = 44,
+  arrowSize = 32,
 }: {
   originChainId: number;
   destinationChainId: number;
   size?: number;
+  arrowSize?: number;
 }) {
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    size = Math.floor(size * 0.8);
+    arrowSize = Math.floor(arrowSize * 0.8);
+  }
+
   return (
     <div className="flex items-center justify-center sm:space-x-1 md:space-x-2">
       <ChainIcon chainId={originChainId} size={size} />
-      <Image src={ArrowRightIcon} width={32} height={32} />
+      <Image src={ArrowRightIcon} width={arrowSize} height={arrowSize} />
       <ChainIcon chainId={destinationChainId} size={size} />
     </div>
   );

src/features/search/MessageSearch.tsx

@@ -106,13 +106,13 @@ export function MessageSearch() {
           <h2 className="text-gray-500 black-shadow">
             {!hasInput ? 'Latest Messages' : 'Search Results'}
           </h2>
-          <div className="flex items-center space-x-2 md:space-x-3">
+          <div className="flex items-center space-x-1 sm:space-x-2 md:space-x-3">
             <div className="w-px h-8 bg-gray-100"></div>
             <Image
               src={FunnelIcon}
               width={22}
               height={22}
-              className="opacity-50"
+              className="hidden sm:block opacity-50"
             />
             <SelectField
               classes="w-24 md:w-32"

src/features/search/MessageSummary.tsx

@@ -28,7 +28,7 @@ export function MessageSummary({ message }: { message: MessageStub }) {
 
   return (
     <Link href={`/message/${id}`}>
-      <a className="flex items-center justify-between space-x-5 sm:space-x-12 md:space-x-16">
+      <a className="flex items-center justify-between space-x-4 xs:space-x-9 sm:space-x-12 md:space-x-16">
         <ChainToChain
           originChainId={originChainId}
           destinationChainId={destinationChainId}
@@ -46,7 +46,7 @@ export function MessageSummary({ message }: { message: MessageStub }) {
               {shortenAddress(recipient) || 'Invalid Address'}
             </div>
           </div>
-          <div className={styles.valueContainer + ' w-28'}>
+          <div className={styles.valueContainer + ' sm:w-28'}>
             <div className={styles.label}>Time sent</div>
             <div className={styles.value}>
               {getHumanReadableTimeString(timestamp)}

src/styles/mediaQueries.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+
+interface WindowSize {
+  width?: number;
+  height?: number;
+}
+
+// From https://usehooks.com/useWindowSize/
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    const handleResize = () => {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+}
+
+export function isWindowSizeMobile(windowWidth: number | undefined) {
+  return !!(windowWidth && windowWidth < 768);
+}
+
+export function isWindowSizeSmallMobile(windowWidth: number | undefined) {
+  return !!(windowWidth && windowWidth < 360);
+}
+
+export function useIsMobile() {
+  const windowSize = useWindowSize();
+  return isWindowSizeMobile(windowSize.width);
+}

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
-const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
@@ -10,6 +11,10 @@ module.exports = {
       serif: ['Garamond', 'serif'],
       mono: ['Courier New', 'monospace'],
     },
+    screens: {
+      xs: '480px',
+      ...defaultTheme.screens,
+    },
     extend: {
       colors: {
         black: '#010101',
@@ -62,7 +67,7 @@ module.exports = {
         },
       },
       fontSize: {
-        'md': '0.95rem'
+        md: '0.95rem',
       },
       spacing: {
         88: '22rem',
@@ -81,7 +86,7 @@ module.exports = {
       },
       blur: {
         xs: '3px',
-      }
+      },
     },
   },
   plugins: [],