style: adjust padding and layout in Navbar, SearcherBar, and Root components

Author: ErwanDecoster

src/components/navbar/NavBar.tsx

@@ -17,7 +17,7 @@ export function Navbar() {
   };
 
   return (
-    <div className="flex items-center justify-between pt-6 lg:pt-3">
+    <div className="flex items-center justify-between py-6 lg:py-3">
       <ChainLink to="/" className="-m-2 flex items-center gap-2 p-2 font-mono">
         <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
         <span className="hidden sm:block">iExec Explorer</span>

src/modules/SearcherBar.tsx

@@ -9,7 +9,7 @@ export function SearcherBar({ className }: { className?: string }) {
   const { isConnected, address: userAddress } = useUserStore();
 
   return (
-    <div className={cn('m-auto w-full max-w-2xl', className)}>
+    <div className={cn('m-auto w-full', className)}>
       <div className="relative w-full">
         <Input
           className={cn(
@@ -20,12 +20,13 @@ export function SearcherBar({ className }: { className?: string }) {
         />
         <Search
           size="18"
-          className="absolute top-1/2 left-4 -translate-y-1/2 sm:left-6"
+          className="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 sm:left-6"
         />
         {isConnected && (
           <Button
             variant="outline"
             className="bg-input hover:bg-secondary absolute top-1/2 right-4 hidden -translate-y-1/2 sm:flex"
+            asChild
           >
             <ChainLink to={`/address/${userAddress}`}>My activity</ChainLink>
           </Button>
@@ -34,7 +35,8 @@ export function SearcherBar({ className }: { className?: string }) {
       {isConnected && (
         <Button
           variant="outline"
-          className="mx-auto mt-4 flex w-auto sm:hidden"
+          className="mx-auto mt-4 flex w-fit sm:hidden"
+          asChild
         >
           <ChainLink to={`/address/${userAddress}`}>My activity</ChainLink>
         </Button>

src/routes/$chainSlug/_layout/index.tsx

@@ -17,8 +17,11 @@ function Index() {
   const currentChain = SUPPORTED_CHAINS.find((chain) => chain.id === chainId);
 
   return (
-    <div className="mt-8 flex flex-col gap-10 sm:gap-20">
-      <div className="radial-bg sm:before:bg-grey-800 border-secondary relative z-0 mx-auto w-full max-w-[1408px] overflow-hidden rounded-2xl pt-10 sm:h-80 sm:border sm:px-12 sm:pt-20">
+    <div className="flex flex-col gap-10 pt-10 sm:mt-6 sm:gap-20 md:mt-10">
+      <div className="radial-bg sm:before:bg-grey-800 border-secondary relative z-0 mx-auto w-full max-w-[1408px] overflow-hidden sm:rounded-2xl sm:border sm:p-16 sm:px-12">
+        <h1 className="mb-2 text-lg font-extrabold md:text-2xl">
+          The iExec Protocol Explorer
+        </h1>
         <SearcherBar />
         <div className="absolute inset-0 -z-10 hidden blur-2xl sm:block sm:blur-[100px] lg:blur-[150px]">
           <div

src/routes/__root.tsx

@@ -11,7 +11,7 @@ export const Route = createRootRoute({
 
 function Root() {
   return (
-    <div className="mx-auto mb-20 w-full px-6 md:px-10 lg:px-20">
+    <div className="mx-auto mb-20 w-full px-4 md:px-10 lg:px-20">
       <ChainSyncManager />
       <Navbar />
       <UnsupportedChain />