Responsiveness fixes for footer and search bar spinner

src/components/nav/Footer.tsx

@@ -1,4 +1,4 @@
-// Mostly copied from https://github.com/hyperlane-xyz/hyperlane-website/blob/main/src/components/nav/Footer.tsx
+// Partly copied from https://github.com/hyperlane-xyz/hyperlane-website/blob/main/src/components/nav/Footer.tsx
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -45,12 +45,12 @@ export function Footer() {
         />
       </div>
       <div className="px-8 py-5 bg-pink-500">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row gap-10 items-center justify-between">
           <div className="flex items-center justify-center">
-            <div className="ml-2 h-20 w-20">
+            <div className="ml-2 w-16 sm:w-20 h-16 sm:h-20">
               <HyperlaneLogo fill={Color.White} />
             </div>
-            <div className="text-2xl font-medium ml-6 space-y-1 ">
+            <div className="text-xl sm:text-2xl font-medium ml-6 space-y-1 ">
               <div>Go Interchain</div>
               <div>With Hyperlane</div>
             </div>
@@ -63,50 +63,48 @@ export function Footer() {
             </div>
           </div> */}
           </div>
-          <div className="max-w-2xl">
-            <nav className="flex text-lg font-medium">
-              <ul className={`${styles.linkCol} mr-14`}>
-                {footerLinks1.map((item) => (
-                  <li className="" key={item.title}>
-                    <Link
-                      className={styles.linkItem}
-                      target={item.external ? '_blank' : '_self'}
-                      href={item.url}
-                    >
-                      <div className="">{item.title}</div>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-              <ul className={`${styles.linkCol}  mr-14`}>
-                {footerLinks2.map((item) => (
-                  <li key={item.title}>
-                    <Link
-                      className={styles.linkItem}
-                      target={item.external ? '_blank' : '_self'}
-                      href={item.url}
-                    >
-                      <div className="">{item.title}</div>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-              <ul className={`${styles.linkCol}`}>
-                {footerLinks3.map((item) => (
-                  <li key={item.title}>
-                    <Link
-                      className={styles.linkItem}
-                      target={item.external ? '_blank' : '_self'}
-                      href={item.url}
-                    >
-                      {item?.icon && <div className="mr-4 w-6">{item?.icon}</div>}
-                      <div className="">{item.title}</div>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          </div>
+          <nav className="flex text-lg font-medium">
+            <ul className={`${styles.linkCol} mr-14`}>
+              {footerLinks1.map((item) => (
+                <li className="" key={item.title}>
+                  <Link
+                    className={styles.linkItem}
+                    target={item.external ? '_blank' : '_self'}
+                    href={item.url}
+                  >
+                    <div className="">{item.title}</div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+            <ul className={`${styles.linkCol}  mr-14`}>
+              {footerLinks2.map((item) => (
+                <li key={item.title}>
+                  <Link
+                    className={styles.linkItem}
+                    target={item.external ? '_blank' : '_self'}
+                    href={item.url}
+                  >
+                    <div className="">{item.title}</div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+            <ul className={`${styles.linkCol}`}>
+              {footerLinks3.map((item) => (
+                <li key={item.title}>
+                  <Link
+                    className={styles.linkItem}
+                    target={item.external ? '_blank' : '_self'}
+                    href={item.url}
+                  >
+                    {item?.icon && <div className="mr-4 w-6">{item?.icon}</div>}
+                    <div className="">{item.title}</div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
         </div>
       </div>
     </footer>

src/components/search/SearchBar.tsx

@@ -29,7 +29,11 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro
         className="p-1 sm:px-4 md:px-5 flex-1 h-10 sm:h-12 font-light rounded-full placeholder:text-gray-600 focus:outline-none"
       />
       <div className="h-10 sm:h-12 w-10 sm:w-12 flex items-center justify-center rounded-full bg-pink-500">
-        {isFetching && <Spinner classes="scale-[30%] mr-2.5 invert" />}
+        {isFetching && (
+          <div className="scale-[30%] sm:scale-[35%]">
+            <Spinner classes="invert" />
+          </div>
+        )}
         {!isFetching && !value && <Image src={SearchIcon} width={20} height={20} alt="" />}
         {!isFetching && value && (
           <IconButton

src/features/messages/cards/IsmDetailsCard.tsx

@@ -27,7 +27,7 @@ export function IsmDetailsCard({ ismDetails, blur }: Props) {
           />
         </div>
       </div>
-      <p className="text-sm">
+      <p className="text-sm font-light">
         Interchain Security Modules define the rules for verifying messages before delivery.{' '}
         <a
           href={`${links.docs}/docs/protocol/sovereign-consensus`}