From cdb858628fdc562147cc09aaa0e097d66f531ec4 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Fri, 30 Aug 2024 00:57:54 -0500
Subject: [PATCH] FIX: top level padding for all (main)/ components

---
 apps/web/src/app/(main)/block/[ht]/page.tsx          | 8 +++-----
 apps/web/src/app/(main)/blocks/page.tsx              | 8 +++-----
 apps/web/src/app/(main)/ibc/channel/[id]/page.tsx    | 9 +++------
 apps/web/src/app/(main)/ibc/channels/page.tsx        | 8 +++-----
 apps/web/src/app/(main)/ibc/client/[id]/page.tsx     | 8 +++-----
 apps/web/src/app/(main)/ibc/clients/page.tsx         | 8 +++-----
 apps/web/src/app/(main)/ibc/connection/[id]/page.tsx | 8 +++-----
 apps/web/src/app/(main)/ibc/connections/page.tsx     | 8 +++-----
 apps/web/src/app/(main)/layout.tsx                   | 2 +-
 apps/web/src/app/(main)/search/[query]/page.tsx      | 2 +-
 apps/web/src/app/(main)/transaction/[hash]/page.tsx  | 8 +++-----
 apps/web/src/app/(main)/transactions/page.tsx        | 8 +++-----
 12 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/apps/web/src/app/(main)/block/[ht]/page.tsx b/apps/web/src/app/(main)/block/[ht]/page.tsx
index 4080ab6..70ef625 100644
--- a/apps/web/src/app/(main)/block/[ht]/page.tsx
+++ b/apps/web/src/app/(main)/block/[ht]/page.tsx
@@ -28,12 +28,10 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">Block Summary</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">Block Summary</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        <div className="w-full">
           <Block {...{ endpoint, queryName, ht }} />
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/blocks/page.tsx b/apps/web/src/app/(main)/blocks/page.tsx
index a144e57..b762ecb 100644
--- a/apps/web/src/app/(main)/blocks/page.tsx
+++ b/apps/web/src/app/(main)/blocks/page.tsx
@@ -27,13 +27,11 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">Recent Blocks</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">Recent Blocks</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <BlocksTable
-          className="sm:w-11/12 w-full"
+          className="w-full"
           queryName={queryName}
           defaultQueryOptions={defaultQueryOptions}
           endpoint={endpoint}
diff --git a/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx b/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
index 40414fc..fdf0ba9 100644
--- a/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
@@ -26,13 +26,10 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 pb-8 items-center ">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">IBC Channel</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">IBC Channel</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        {/* TODO: don't forget to remove this extra pb-8 once Channel is cleaned up. */}
-        <div className="sm:w-11/12 w-full">
+        <div className="w-full">
           <Channel {...{endpoint, queryName, channelId}}/>
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/ibc/channels/page.tsx b/apps/web/src/app/(main)/ibc/channels/page.tsx
index fdd819f..66b3e7d 100644
--- a/apps/web/src/app/(main)/ibc/channels/page.tsx
+++ b/apps/web/src/app/(main)/ibc/channels/page.tsx
@@ -25,13 +25,11 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">IBC Channels</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">IBC Channels</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ChannelsTable
-          className="sm:w-11/12 w-full"
+          className="w-full"
           queryName={queryName}
           defaultQueryOptions={defaultQueryOptions}
           endpoint={endpoint}
diff --git a/apps/web/src/app/(main)/ibc/client/[id]/page.tsx b/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
index 5eae53f..585156b 100644
--- a/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
@@ -26,12 +26,10 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center ">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">IBC Client</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">IBC Client</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full pb-8">
+        <div className="w-full">
           <Client {...{endpoint, queryName, clientId}}/>
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/ibc/clients/page.tsx b/apps/web/src/app/(main)/ibc/clients/page.tsx
index 0c48328..f3a949a 100644
--- a/apps/web/src/app/(main)/ibc/clients/page.tsx
+++ b/apps/web/src/app/(main)/ibc/clients/page.tsx
@@ -25,13 +25,11 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">IBC Clients</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">IBC Clients</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ClientsTable
-          className="sm:w-11/12 w-full"
+          className="w-full"
           queryName={queryName}
           defaultQueryOptions={defaultQueryOptions}
           endpoint={endpoint}
diff --git a/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx b/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
index b41662e..e093113 100644
--- a/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
@@ -27,12 +27,10 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">IBC Connection</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">IBC Connection</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full pb-8">
+        <div className="w-full">
           <Connection {...{endpoint, queryName, connectionId}}/>
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/ibc/connections/page.tsx b/apps/web/src/app/(main)/ibc/connections/page.tsx
index e4c2903..9dc6981 100644
--- a/apps/web/src/app/(main)/ibc/connections/page.tsx
+++ b/apps/web/src/app/(main)/ibc/connections/page.tsx
@@ -25,13 +25,11 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center">
-      <div className="flex w-full justify-start items-center">
-        <h1 className="text-lg font-medium">IBC Connections</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">IBC Connections</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ConnectionsTable
-          className="sm:w-11/12 w-full"
+          className="w-full"
           queryName={queryName}
           defaultQueryOptions={defaultQueryOptions}
           endpoint={endpoint}
diff --git a/apps/web/src/app/(main)/layout.tsx b/apps/web/src/app/(main)/layout.tsx
index c62b555..40d10bb 100644
--- a/apps/web/src/app/(main)/layout.tsx
+++ b/apps/web/src/app/(main)/layout.tsx
@@ -4,7 +4,7 @@ export default function MainLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="bg-primary/60 pt-8 rounded-lg border">
+    <div className="bg-primary/60 px-3 py-4 sm:p-8 rounded-lg border">
       {children}
     </div>
   );
diff --git a/apps/web/src/app/(main)/search/[query]/page.tsx b/apps/web/src/app/(main)/search/[query]/page.tsx
index 2bd0a95..b021865 100644
--- a/apps/web/src/app/(main)/search/[query]/page.tsx
+++ b/apps/web/src/app/(main)/search/[query]/page.tsx
@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col px-6 pb-8 gap-5 sm:p-8" key={query}>
+    <div className="flex flex-col gap-5" key={query}>
       <h1 className="text-lg font-medium">Search results</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <SearchResultsTable className="w-full" query={query}/>
diff --git a/apps/web/src/app/(main)/transaction/[hash]/page.tsx b/apps/web/src/app/(main)/transaction/[hash]/page.tsx
index d6d6725..bc6e5a5 100644
--- a/apps/web/src/app/(main)/transaction/[hash]/page.tsx
+++ b/apps/web/src/app/(main)/transaction/[hash]/page.tsx
@@ -28,12 +28,10 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center ">
-      <div className="sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">Transaction Summary</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">Transaction Summary</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        <div className="w-full">
           <Transaction {...{endpoint, queryName, hash}}/>
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/transactions/page.tsx b/apps/web/src/app/(main)/transactions/page.tsx
index a817035..5299c70 100644
--- a/apps/web/src/app/(main)/transactions/page.tsx
+++ b/apps/web/src/app/(main)/transactions/page.tsx
@@ -28,13 +28,11 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 px-6 items-center">
-      <div className="flex flex-col sm:w-11/12 w-full">
-        <h1 className="text-lg font-medium">Recent Transactions</h1>
-      </div>
+    <div className="flex flex-col gap-5">
+      <h1 className="text-lg font-medium">Recent Transactions</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <TransactionsTable
-          className="sm:w-11/12 w-full"
+          className="w-full"
           queryName={queryName}
           defaultQueryOptions={defaultQueryOptions}
           endpoint={endpoint}