FIX: top level padding for all (main)/ components

penumbra-zone · Aug 30, 2024 · cdb8586 · cdb8586
1 parent 34f1171
commit cdb8586
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}