From 9a027af98ed675f6d617d573a5fe6e663eb7cc4b Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Wed, 28 Aug 2024 11:58:10 -0500
Subject: [PATCH 1/6] TwitterEmbed component with @penumbra-zone timeline

---
 apps/web/src/app/(index)/page.tsx          | 10 ++-
 apps/web/src/app/layout.tsx                |  2 +-
 apps/web/src/components/Embedded/index.tsx | 76 ++++++++++++++++++++++
 3 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/components/Embedded/index.tsx

diff --git a/apps/web/src/app/(index)/page.tsx b/apps/web/src/app/(index)/page.tsx
index 4c1f39c..154db2a 100644
--- a/apps/web/src/app/(index)/page.tsx
+++ b/apps/web/src/app/(index)/page.tsx
@@ -16,6 +16,7 @@ import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { PreviewTable } from "@/components/PreviewTable";
 import { getBlocks } from "@/components/BlocksTable/getBlocks";
 import { getTransactions } from "@/components/TransactionsTable/getTransactions";
+import { TwitterEmbed } from "@/components/Embedded";
 
 
 interface CardProps {
@@ -87,7 +88,8 @@ export default function Home() {
               queryName={transactionsQuery}
               pageIndex={0}
               endpoint={transactionEndpoint}
-              errorMessage={errorMessage}/>
+              errorMessage={errorMessage}
+            />
           </HydrationBoundary>
         }
       />
@@ -103,7 +105,8 @@ export default function Home() {
               queryName={blocksQuery}
               pageIndex={0}
               endpoint={blocksEndpoint}
-              errorMessage={errorMessage}/>
+              errorMessage={errorMessage}
+            />
           </HydrationBoundary>
         }
       />
@@ -146,6 +149,9 @@ export default function Home() {
         className="w-[380px]"
         disabled={true}
       />
+      <div className="flex w-full items-center justify-center">
+        <TwitterEmbed className="w-full sm:w-1/2"/>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index e564a4e..8a97ea6 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
   description: "A block explorer for Penumbra.",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
diff --git a/apps/web/src/components/Embedded/index.tsx b/apps/web/src/components/Embedded/index.tsx
new file mode 100644
index 0000000..7db00ab
--- /dev/null
+++ b/apps/web/src/components/Embedded/index.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import Script from "next/script";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { FC, useEffect, useState } from "react";
+import { Skeleton } from "../ui/skeleton";
+
+export const TwitterEmbed: FC<{ className?: string }> = ({ className }) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    // This useEffect is basically a hack to allow somekind of UI indication that an element is being loaded.
+    // Complete and totally inadequate hack to cope with the fact that twitter is a zombie social media company.
+    // The timeline embed is completely broken and does not respect requests to limit the total number of posts loaded.
+    // As a result, this embed adds an additional ***~20mb*** to the page load. This is why we delay it.
+    function checkIframeLoaded() {
+      // Get a handle to the iframe element
+      const iframeDiv = document.getElementsByClassName("twitter-timeline-rendered");
+      if (iframeDiv === undefined || iframeDiv.length === 0 ) {
+        // Nothing loaded yet, wait.
+        window.setTimeout(checkIframeLoaded, 1000);
+      } else {
+        // console.log(iframeDiv);
+        // Check if the iframe element itself is loaded yet
+        const iframeDoc = document.getElementById("twitter-widget-0");
+        if (iframeDoc === undefined) {
+          window.setTimeout(checkIframeLoaded, 1000);
+        } else {
+          // Completely arbitrary. Seems to work OK on simulated low band 4g connections.
+          window.setTimeout(() => setLoaded(true), 5000);
+          return;
+        }
+      }
+    }
+    checkIframeLoaded();
+  }, []);
+
+  return (
+    <Card className={cn("bg-card/60", className)}>
+      <CardHeader className="flex justify-center">
+        <CardTitle className="text-lg font-medium">
+          <span className="font-mono font-bold">@penumbrazone</span> on Twitter
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-2 h-[320px]">
+        <div className="grid grid-cols-1 grid-rows-1">
+          <div className="col-span-1 row-span-1 col-start-1 row-start-1">
+            <Link
+              id="twitter-tl"
+              className={cn("twitter-timeline")}
+              data-tweet-limit={5}
+              data-limit="5"
+              data-height="300"
+              data-chrome="noheader"
+              href="https://twitter.com/penumbrazone?ref_src=twsrc%5Etfw"
+            />
+          </div>
+          <div className="col-span-1 row-span-1 col-start-1 row-start-1">
+            { !loaded ? <Skeleton className={cn("w-full h-[300px] opacity-85")}/> : null}
+          </div>
+        <Script
+          async
+          src="https://platform.twitter.com/widgets.js"
+          strategy="lazyOnload"
+          data-tweet-limit="5"
+          data-limit="5"
+          data-height="300"
+          data-chrome="noheader"
+        />
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

From 64dd3cfbbfd7985c74c467d892cc11b3566f0e62 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Wed, 28 Aug 2024 12:04:50 -0500
Subject: [PATCH 2/6] remove div after loading so content is interactive

---
 apps/web/src/components/Embedded/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/Embedded/index.tsx b/apps/web/src/components/Embedded/index.tsx
index 7db00ab..2dc3b41 100644
--- a/apps/web/src/components/Embedded/index.tsx
+++ b/apps/web/src/components/Embedded/index.tsx
@@ -57,9 +57,11 @@ export const TwitterEmbed: FC<{ className?: string }> = ({ className }) => {
               href="https://twitter.com/penumbrazone?ref_src=twsrc%5Etfw"
             />
           </div>
-          <div className="col-span-1 row-span-1 col-start-1 row-start-1">
-            { !loaded ? <Skeleton className={cn("w-full h-[300px] opacity-85")}/> : null}
-          </div>
+          { !loaded ? (
+            <div className="col-span-1 row-span-1 col-start-1 row-start-1">
+              <Skeleton className={cn("w-full h-[300px] opacity-85")}/>
+            </div>
+          ) : null}
         <Script
           async
           src="https://platform.twitter.com/widgets.js"

From e8adbb6348f366efe9b3e9eb82d3350c32bd04d6 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Wed, 28 Aug 2024 12:06:02 -0500
Subject: [PATCH 3/6] CHORE: remove async from layout

---
 apps/web/src/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 8a97ea6..e564a4e 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
   description: "A block explorer for Penumbra.",
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;

From 535c991c4444dbb433bda6bcd221f18379d28e12 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Thu, 29 Aug 2024 23:35:53 -0500
Subject: [PATCH 4/6] fixed mobile stylings across main tables. reverted button
 styling for ghost vs outline.

---
 apps/web/src/app/(index)/page.tsx                   | 6 +++---
 apps/web/src/app/(main)/blocks/page.tsx             | 2 +-
 apps/web/src/app/(main)/ibc/channels/page.tsx       | 2 +-
 apps/web/src/app/(main)/ibc/clients/page.tsx        | 2 +-
 apps/web/src/app/(main)/ibc/connections/page.tsx    | 6 ++++--
 apps/web/src/app/(main)/transactions/page.tsx       | 4 ++--
 apps/web/src/components/Embedded/index.tsx          | 9 +++++----
 apps/web/src/components/ibc/connections/columns.tsx | 2 +-
 apps/web/src/components/ui/button.tsx               | 4 ++--
 apps/web/src/components/ui/paginated-data-table.tsx | 9 ++++++---
 10 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/(index)/page.tsx b/apps/web/src/app/(index)/page.tsx
index 154db2a..5f16265 100644
--- a/apps/web/src/app/(index)/page.tsx
+++ b/apps/web/src/app/(index)/page.tsx
@@ -36,7 +36,7 @@ const LandingCard: FC<CardProps> = ({ heading, children, className, buttonText,
       </CardHeader>
       <CardContent className="flex flex-col gap-1 items-center">
         {children}
-        <Button className="w-full" variant={ disabled ? "outline" : "default"} disabled={disabled} asChild={!disabled}>
+        <Button className="w-full" variant={ disabled ? "ghost" : "outline"} disabled={disabled} asChild={!disabled}>
           <Link href={buttonLink}>{buttonText}</Link>
         </Button>
       </CardContent>
@@ -80,7 +80,7 @@ export default function Home() {
         heading="Transactions"
         buttonLink="/transactions"
         buttonText="Explore Transactions"
-        className="basis-[45%] w-full max-w-screen-sm"
+        className="sm:basis-[45%] w-full max-w-screen-sm"
         children={
           <HydrationBoundary state={dehydrate(queryClient)}>
             <PreviewTable
@@ -97,7 +97,7 @@ export default function Home() {
         heading="Blocks"
         buttonLink="/blocks"
         buttonText="Explore Blocks"
-        className="basis-[50%] w-full max-w-screen-sm"
+        className="sm:basis-[50%] w-full max-w-screen-sm"
         children={
           <HydrationBoundary state={dehydrate(queryClient)}>
             <PreviewTable
diff --git a/apps/web/src/app/(main)/blocks/page.tsx b/apps/web/src/app/(main)/blocks/page.tsx
index c19666b..a144e57 100644
--- a/apps/web/src/app/(main)/blocks/page.tsx
+++ b/apps/web/src/app/(main)/blocks/page.tsx
@@ -27,7 +27,7 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <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>
diff --git a/apps/web/src/app/(main)/ibc/channels/page.tsx b/apps/web/src/app/(main)/ibc/channels/page.tsx
index 17655a6..fdd819f 100644
--- a/apps/web/src/app/(main)/ibc/channels/page.tsx
+++ b/apps/web/src/app/(main)/ibc/channels/page.tsx
@@ -25,7 +25,7 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <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>
diff --git a/apps/web/src/app/(main)/ibc/clients/page.tsx b/apps/web/src/app/(main)/ibc/clients/page.tsx
index a4d3900..0c48328 100644
--- a/apps/web/src/app/(main)/ibc/clients/page.tsx
+++ b/apps/web/src/app/(main)/ibc/clients/page.tsx
@@ -25,7 +25,7 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <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>
diff --git a/apps/web/src/app/(main)/ibc/connections/page.tsx b/apps/web/src/app/(main)/ibc/connections/page.tsx
index c46d25f..e4c2903 100644
--- a/apps/web/src/app/(main)/ibc/connections/page.tsx
+++ b/apps/web/src/app/(main)/ibc/connections/page.tsx
@@ -25,8 +25,10 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 items-center pt-5">
-      <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
+    <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>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ConnectionsTable
           className="sm:w-11/12 w-full"
diff --git a/apps/web/src/app/(main)/transactions/page.tsx b/apps/web/src/app/(main)/transactions/page.tsx
index 252183b..a817035 100644
--- a/apps/web/src/app/(main)/transactions/page.tsx
+++ b/apps/web/src/app/(main)/transactions/page.tsx
@@ -28,8 +28,8 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
-      <div className="sm:w-11/12 w-full">
+    <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>
       <HydrationBoundary state={dehydrate(queryClient)}>
diff --git a/apps/web/src/components/Embedded/index.tsx b/apps/web/src/components/Embedded/index.tsx
index 2dc3b41..1711e60 100644
--- a/apps/web/src/components/Embedded/index.tsx
+++ b/apps/web/src/components/Embedded/index.tsx
@@ -41,19 +41,20 @@ export const TwitterEmbed: FC<{ className?: string }> = ({ className }) => {
     <Card className={cn("bg-card/60", className)}>
       <CardHeader className="flex justify-center">
         <CardTitle className="text-lg font-medium">
-          <span className="font-mono font-bold">@penumbrazone</span> on Twitter
+          Recent Updates
         </CardTitle>
       </CardHeader>
-      <CardContent className="p-2 h-[320px]">
+      <CardContent className="h-[320px]">
         <div className="grid grid-cols-1 grid-rows-1">
           <div className="col-span-1 row-span-1 col-start-1 row-start-1">
             <Link
               id="twitter-tl"
               className={cn("twitter-timeline")}
               data-tweet-limit={5}
-              data-limit="5"
+              // data-limit="5"
               data-height="300"
-              data-chrome="noheader"
+              // data-chrome="noheader"
+              // data-chrome="noborders"
               href="https://twitter.com/penumbrazone?ref_src=twsrc%5Etfw"
             />
           </div>
diff --git a/apps/web/src/components/ibc/connections/columns.tsx b/apps/web/src/components/ibc/connections/columns.tsx
index 20a3ef4..caafc28 100644
--- a/apps/web/src/components/ibc/connections/columns.tsx
+++ b/apps/web/src/components/ibc/connections/columns.tsx
@@ -10,7 +10,7 @@ export type ConnectionsColumns = Record<number, {
 export const columns : Array<ColumnDef<ConnectionsColumns>> = [
   {
     accessorKey: "connection_id",
-    header: () => <div className="text-sm">Channel ID</div>,
+    header: () => <div className="text-sm">Connection ID</div>,
     cell: ({ getValue }) => {
       const connectionId = getValue() as string;
       return <Link href={`/ibc/connection/${connectionId}`} className="text-link text-sm"><pre>{connectionId}</pre></Link>;
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 287a627..1d48316 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -5,11 +5,11 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "border inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-accent/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
diff --git a/apps/web/src/components/ui/paginated-data-table.tsx b/apps/web/src/components/ui/paginated-data-table.tsx
index 6350342..aef06e5 100644
--- a/apps/web/src/components/ui/paginated-data-table.tsx
+++ b/apps/web/src/components/ui/paginated-data-table.tsx
@@ -1,6 +1,7 @@
 import { ColumnDef, Table as TableT, flexRender } from "@tanstack/react-table";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./Table";
 import { Button } from "./button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 interface PaginatedDataTableProps<TData, TValue> {
   table: TableT<TData>,
@@ -56,14 +57,15 @@ export function PaginatedDataTable<TData, TValue> ({ table, columns } : Paginate
         </TableBody>
       </Table>
     </div>
-    <div className="flex items-center justify-end space-x-2 py-4">
+    <div className="flex items-center justify-center sm:justify-end py-4">
       <Button
         variant="ghost"
         size="sm"
         onClick={() => {table.previousPage()}}
         disabled={!table.getCanPreviousPage()}
       >
-        Previous
+        <ChevronLeft className="w-4 h-4 mr-[1px] mt-[-1px]"/>
+        <span className="align-middle">Previous</span>
       </Button>
       <Button
         variant="ghost"
@@ -71,7 +73,8 @@ export function PaginatedDataTable<TData, TValue> ({ table, columns } : Paginate
         onClick={() => {table.nextPage()}}
         disabled={!table.getCanNextPage()}
       >
-        Next
+        <span>Next</span>
+        <ChevronRight className="w-4 h-4 ml-[1px] mt-[-1px]"/>
       </Button>
     </div>
    </div>

From 0207bc717bec2a4af4696232301b8b86ac91553d Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Fri, 30 Aug 2024 00:19:48 -0500
Subject: [PATCH 5/6] fixed heading font weight across pages, fixed px on ibc
 data and block/tx pages, fixed search styles.

---
 apps/web/src/app/(main)/block/[ht]/page.tsx    |  2 +-
 .../src/app/(main)/ibc/channel/[id]/page.tsx   |  4 ++--
 .../src/app/(main)/ibc/client/[id]/page.tsx    |  2 +-
 .../app/(main)/ibc/connection/[id]/page.tsx    |  2 +-
 .../web/src/app/(main)/search/[query]/page.tsx |  4 ++--
 .../src/app/(main)/transaction/[hash]/page.tsx |  2 +-
 .../src/components/ABCIEventsTable/columns.tsx |  2 +-
 apps/web/src/components/Block/index.tsx        |  6 +++---
 apps/web/src/components/Transaction/index.tsx  |  8 ++++----
 .../src/components/TransactionView/index.tsx   |  2 +-
 apps/web/src/components/ibc/Channel/index.tsx  | 18 +++++++++---------
 apps/web/src/components/ibc/Client/index.tsx   | 12 ++++++------
 12 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/app/(main)/block/[ht]/page.tsx b/apps/web/src/app/(main)/block/[ht]/page.tsx
index f1ee2b3..4080ab6 100644
--- a/apps/web/src/app/(main)/block/[ht]/page.tsx
+++ b/apps/web/src/app/(main)/block/[ht]/page.tsx
@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <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>
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 2c9389a..40414fc 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,13 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center ">
+    <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>
       <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 pb-8">
+        <div className="sm:w-11/12 w-full">
           <Channel {...{endpoint, queryName, channelId}}/>
         </div>
       </HydrationBoundary>
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 c5bc7a9..5eae53f 100644
--- a/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
@@ -26,7 +26,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center ">
+    <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>
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 0ea9b85..b41662e 100644
--- a/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
@@ -27,7 +27,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <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>
diff --git a/apps/web/src/app/(main)/search/[query]/page.tsx b/apps/web/src/app/(main)/search/[query]/page.tsx
index 814a234..2bd0a95 100644
--- a/apps/web/src/app/(main)/search/[query]/page.tsx
+++ b/apps/web/src/app/(main)/search/[query]/page.tsx
@@ -28,8 +28,8 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 sm:p-8" key={query}>
-      <h1 className="sm:text-2xl font-bold">Search results</h1>
+    <div className="flex flex-col px-6 pb-8 gap-5 sm:p-8" key={query}>
+      <h1 className="text-lg font-medium">Search results</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <SearchResultsTable className="w-full" query={query}/>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/transaction/[hash]/page.tsx b/apps/web/src/app/(main)/transaction/[hash]/page.tsx
index 1c0896a..d6d6725 100644
--- a/apps/web/src/app/(main)/transaction/[hash]/page.tsx
+++ b/apps/web/src/app/(main)/transaction/[hash]/page.tsx
@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center ">
+    <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>
diff --git a/apps/web/src/components/ABCIEventsTable/columns.tsx b/apps/web/src/components/ABCIEventsTable/columns.tsx
index ff31897..91fc15a 100644
--- a/apps/web/src/components/ABCIEventsTable/columns.tsx
+++ b/apps/web/src/components/ABCIEventsTable/columns.tsx
@@ -10,7 +10,7 @@ export const makeColumns = ( header: string ) => {
   const columns : Array<ColumnDef<ABCIEventsColumns>> = [
     {
       id: "type",
-      header: () => <div className="break-all text-sm text-foreground">{header}</div>,
+      header: () => <div className="text-sm text-foreground overflow-scroll">{header}</div>,
       columns: [
         {
           accessorKey: "key",
diff --git a/apps/web/src/components/Block/index.tsx b/apps/web/src/components/Block/index.tsx
index 1b915e0..9fff1b3 100644
--- a/apps/web/src/components/Block/index.tsx
+++ b/apps/web/src/components/Block/index.tsx
@@ -24,15 +24,15 @@ export const Block : FC<BlockProps> = ({ endpoint, queryName, ht }) => {
   return (
     <div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Block Height</p>
+        <p className="sm:w-1/6 w-full font-medium">Block Height</p>
         <pre className="sm:w-0 w-full">{ht}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="w-1/6 font-semibold">Timestamp</p>
+        <p className="w-1/6 font-medium">Timestamp</p>
         <pre className="sm:w-0 w-full">{created_at}</pre>
       </div>
       <div className="flex justify-start flex-wrap w-full">
-        <p className="sm:w-1/6 w-full font-bold">Transactions</p>
+        <p className="sm:w-1/6 w-full font-medium">Transactions</p>
         {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
         {tx_hashes.length !== 0 ? (
           tx_hashes.map((hash, i) => (
diff --git a/apps/web/src/components/Transaction/index.tsx b/apps/web/src/components/Transaction/index.tsx
index 79c2b80..e18f086 100644
--- a/apps/web/src/components/Transaction/index.tsx
+++ b/apps/web/src/components/Transaction/index.tsx
@@ -23,7 +23,7 @@ export const Transaction : FC<TransactionProps> = ({ endpoint, queryName, hash }
   return (
     <div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full sm:text-lg font-semibold">Hash</p>
+        <p className="sm:w-1/6 w-full sm:text-lg font-medium">Hash</p>
         {/* TODO: this width on smaller screens is pretty arbitrary and there's a few instances of this now through the codebase. revisit and implement as consistent tailwind variables. */}
         {/* TODO: also at the point where JS should be used for copying to clipboard which mitigates most text overflow issues and opens up stylings for improvement. */}
         <pre className="sm:w-5/6 w-[300px] sm:text-lg break-all whitespace-pre-wrap">
@@ -31,7 +31,7 @@ export const Transaction : FC<TransactionProps> = ({ endpoint, queryName, hash }
         </pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full sm:text-lg font-semibold">Block Height</p>
+        <p className="sm:w-1/6 w-full sm:text-lg font-medium">Block Height</p>
         <Link href={`/block/${txResult.height}`}>
           <pre className="underline sm:w-0 sm:text-lg w-full">
             {txResult.height.toString()}
@@ -39,11 +39,11 @@ export const Transaction : FC<TransactionProps> = ({ endpoint, queryName, hash }
         </Link>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full sm:text-lg font-semibold">Timestamp</p>
+        <p className="sm:w-1/6 w-full sm:text-lg font-medium">Timestamp</p>
         <pre className="sm:w-0 w-full sm:text-lg">{txResult.created_at}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 sm:shrink-0 w-full sm:text-lg font-semibold">
+        <p className="sm:w-1/6 sm:shrink-0 w-full sm:text-lg font-medium">
           Transaction Data
         </p>
         <pre className="sm:w-5/6 w-full break-all whitespace-pre-wrap text-xs p-1 bg-slate-100">
diff --git a/apps/web/src/components/TransactionView/index.tsx b/apps/web/src/components/TransactionView/index.tsx
index a587fa1..5bd1f73 100644
--- a/apps/web/src/components/TransactionView/index.tsx
+++ b/apps/web/src/components/TransactionView/index.tsx
@@ -42,7 +42,7 @@ export const TransactionView : FC<TransactionViewProps> = ({ tx }) => {
   const txView = makeTransactionView(Transaction.fromJson(tx, { typeRegistry: ibcRegistry }));
   return (
     <FlexRow className="flex-wrap justify-start w-full">
-      <p className="font-semibold sm:text-lg">Transaction View</p>
+      <p className="font-medium sm:text-lg">Transaction View</p>
       {txView.bodyView ? <TransactionBodyView bodyView={txView.bodyView}/> : "None"}
       {txView.bindingSig ? <BindingSig label="Binding Signature" value={txView.bindingSig.inner}/> : null}
       {txView.anchor ? <MerkleRoot label="Anchor" value={txView.anchor.inner}/> : null}
diff --git a/apps/web/src/components/ibc/Channel/index.tsx b/apps/web/src/components/ibc/Channel/index.tsx
index e823555..f132cb2 100644
--- a/apps/web/src/components/ibc/Channel/index.tsx
+++ b/apps/web/src/components/ibc/Channel/index.tsx
@@ -22,38 +22,38 @@ export const Channel : FC<ChannelProps> = ({ endpoint, queryName, channelId }) =
   });
 
   return (
-    <div className="flex flex-col justify-start gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Channel ID</p>
+        <p className="sm:w-1/6 w-full font-medium">Channel ID</p>
         <pre className="sm:w-0 w-full">{channelId}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Client ID</p>
+        <p className="sm:w-1/6 w-full font-medium">Client ID</p>
         <Link
           href={`/ibc/client/${data.clientId}`}
-          className="underline sm:w-0 w-full"
+          className="sm:w-0 w-full text-link"
         >
           <pre>{data.clientId}</pre>
         </Link>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Counterparty Height</p>
+        <p className="sm:w-1/6 w-full font-medium">Counterparty Height</p>
         <pre className="sm:w-0 w-full">{data.consensusHeight}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Connection IDs</p>
+        <p className="sm:w-1/6 w-full font-medium">Connection IDs</p>
         <Link
           href={`/ibc/connection/${data.connectionId}`}
-          className="underline sm:w-0 w-full"
+          className="sm:w-0 w-full text-link"
         >
           <pre>{data.connectionId}</pre>
         </Link>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Recent Transactions</p>
+        <p className="sm:w-1/6 w-full font-medium">Recent Transactions</p>
         <div className="sm:w-5/6 w-full">
           {data.recentTxs.map((hash, i) => (
-            <Link href={`/transaction/${hash}`} key={i} className="underline">
+            <Link href={`/transaction/${hash}`} key={i} className="text-link">
               <pre className="sm:font-base font-sm overflow-hidden overflow-ellipsis">
                 {hash}
               </pre>
diff --git a/apps/web/src/components/ibc/Client/index.tsx b/apps/web/src/components/ibc/Client/index.tsx
index 41dd1f2..4be5093 100644
--- a/apps/web/src/components/ibc/Client/index.tsx
+++ b/apps/web/src/components/ibc/Client/index.tsx
@@ -34,21 +34,21 @@ export const Client : FC<ClientProps> = ({ endpoint, queryName, clientId }) => {
   // const header = events.find(({ key }) => key === "header")?.value ?? "NONE";
 
   return (
-    <div className="flex flex-col justify-start gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Client ID</p>
+        <p className="sm:w-1/6 w-full font-medium">Client ID</p>
         <pre className="sm:w-0 w-full">{client_id}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Client Type</p>
+        <p className="sm:w-1/6 w-full font-medium">Client Type</p>
         <pre className="sm:w-0 w-full">{clientType}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Counterparty Height</p>
+        <p className="sm:w-1/6 w-full font-medium">Counterparty Height</p>
         <pre className="sm:w-0 w-full">{consensusHeight}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Connection IDs</p>
+        <p className="sm:w-1/6 w-full font-medium">Connection IDs</p>
         <Link
           href={`/ibc/connection/${connectionId}`}
           className="underline sm:w-0 w-full"
@@ -57,7 +57,7 @@ export const Client : FC<ClientProps> = ({ endpoint, queryName, clientId }) => {
         </Link>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Channel IDs</p>
+        <p className="sm:w-1/6 w-full font-medium">Channel IDs</p>
         <div className="">
           {channels.map((channelId, i) => (
             <Link

From 9851ba9c9e17a74cd1e70f334d01183adf067344 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Fri, 30 Aug 2024 00:20:05 -0500
Subject: [PATCH 6/6] fixed breadcrumb on search page

---
 apps/web/src/components/Navbar/index.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/Navbar/index.tsx b/apps/web/src/components/Navbar/index.tsx
index 45b0411..dd90dd2 100644
--- a/apps/web/src/components/Navbar/index.tsx
+++ b/apps/web/src/components/Navbar/index.tsx
@@ -71,13 +71,15 @@ const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => {
   const isIbc = segments.length >= 2 ? isIbcPath(segments) : false;
   const isBlockOrTx = segments.length === 2 && segments[0] === "block" || segments[0] === "transaction";
   const isTable = isTablePath(segments);
+  const isSearch = segments.length === 2 && segments[0] === "search";
 
-  // Handle case of /{transactions|blocks} and /ibc/{clients|channels|connections}
-  if (isTable) {
+  console.log("building breadcrumb...", isSearch);
+  // Handle case of /{transactions|blocks}, /ibc/{clients|channels|connections}, /search
+  if (isTable || isSearch) {
     // /{transactions|blocks|clients|channels|connections}
     const parent = isIbc ? segments[1] : segments[0];
     const _href = isIbc ? `/ibc/${parent}` : `/${parent}`;
-    const linkText = isIbc ? `IBC ${capitalize(parent)}` : `Recent ${capitalize(parent)}`;
+    const linkText = isIbc ? `IBC ${capitalize(parent)}` : isSearch ? `${capitalize(parent)}` : `Recent ${capitalize(parent)}`;
 
     return (
       <Breadcrumb>
@@ -105,7 +107,7 @@ const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => {
     const tableRef = isIbc ? `/ibc/${parentTable}` : `/${parentTable}`;
     const _href = isIbc ? `/ibc/${parent}/${slug}` : `/${parent}/${slug}`;
     // Same prefixing but for the "current" breadcrumb
-    const linkText = isIbc ? `IBC ${capitalize(parent)} Summary` : `${capitalize(parent)} Summary`;
+    const linkText = `${capitalize(parent)} Summary`;
 
     return (
       <Breadcrumb>