Improve mobile homepage layout

Author: buberdds

src/app/components/PageLayout/Header.tsx

@@ -30,7 +30,7 @@ export const Header: FC<HeaderProps> = ({ sticky = true }) => {
         },
       )}
     >
-      <div className="px-6">
+      <div className="px-2 md:px-6">
         <div className="grid grid-cols-12">
           <div className="col-span-6 xl:col-span-3 flex items-center">
             <HomePageLink showText={!sticky || (!scrolled && !isMobile)} />

src/app/pages/HomePage/Ecosystem.tsx

@@ -13,10 +13,10 @@ export const Ecosystem: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4 md:gap-6">
       <Typography variant="h3"> {t('home.ecosystem.title')}</Typography>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-4 md:mb-6">
         <ErrorBoundary light fallbackContent={<SapphireFallbackCard />}>
           <SapphireCard />
         </ErrorBoundary>

src/app/pages/HomePage/EcosystemCard.tsx

@@ -77,7 +77,7 @@ export const EcosystemCard: FC<EcosystemCardProps> = ({
       <CardContent className="flex-1 flex items-end">
         {isLoading && <Skeleton className="h-14 w-full" />}
         {!isLoading && (
-          <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4 font-medium">
+          <div className="w-full grid grid-cols-2 gap-4 font-medium">
             <div>{t('home.blockNumber')}</div>
             <div className="text-right text-primary">
               {latestBlock !== undefined && latestBlock !== null ? latestBlock.toLocaleString() : '-'}

src/app/pages/HomePage/HomeSearch.tsx

@@ -16,7 +16,7 @@ export const HomeSearch: FC = () => {
     <div
       id="search"
       style={{ backgroundImage: `url(${SearchBg})` }}
-      className="py-12 px-8 md:p-24 bg-[#DFDEF5] bg-cover bg-center bg-no-repeat rounded-md mb-6"
+      className="py-12 px-4 md:px-8 md:p-24 bg-[#DFDEF5] bg-cover bg-center bg-no-repeat rounded-md mb-4 md:mb-6"
     >
       <Typography
         variant="h2"

src/app/pages/HomePage/index.tsx

@@ -19,10 +19,10 @@ export const HomePage: FC = () => {
       <BuildBanner />
       <NetworkOfflineBanner wantedNetwork={network} />
       <Header sticky={false} />
-      <div className="flex flex-col px-6">
+      <div className="flex flex-col px-2 md:px-6">
         <HomeSearch />
         <Ecosystem />
-        <div className="flex gap-6 flex-col md:flex-row">
+        <div className="flex gap-4 md:gap-6 flex-col md:flex-row">
           <LatestBlocks />
           {/* TODO: Clean up commit when API supports all layers */}
           <TotalTransactions chartContainerHeight={280} scope={{ network: 'mainnet', layer: 'sapphire' }} />