Playground: Improved sidebar search params suspense fallback, Fix ConnectEmbed width on mobile (#7784)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing layout responsiveness and improving the rendering of sidebar components by integrating full path management, along with some styling adjustments.

### Detailed summary
- Added `className="!max-w-full"` to various components for responsive design.
- Wrapped `StyledConnectEmbed` in a div with overflow and padding.
- Changed heading and paragraph styles in `APIHeader`.
- Introduced `FullPathSuspense` for managing full path rendering.
- Modified `NavLink` to accept `fullPath` prop.
- Updated sidebar components to use `fullPath` for link matching.
- Removed unnecessary `Suspense` wrappers from sidebar rendering functions.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Introduced a component that enables rendering content based on the full current URL path, including query parameters.

* **Refactor**
  * Updated sidebar and navigation components to receive the current path as a prop, simplifying active link determination and layout logic.
  * Consolidated suspense handling for sidebar components to a single top-level boundary.

* **Style**
  * Improved visual layout and spacing for embedded components and page headers.
  * Enhanced responsiveness and maximum width handling for embedded connect components.

* **Documentation**
  * Updated type names and component signatures for improved clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx

@@ -185,7 +185,7 @@ export function RightSection(props: {
             // TODO: should show the expanded connected modal here instead
             connectButton
           ) : (
-            <div className="relative">
+            <div className="relative overflow-hidden">
               <ConnectEmbed
                 accountAbstraction={
                   connectOptions.enableAccountAbstraction
@@ -197,7 +197,7 @@ export function RightSection(props: {
                 }
                 auth={connectOptions.enableAuth ? playgroundAuth : undefined}
                 autoConnect={false}
-                className="shadow-xl"
+                className="shadow-xl !max-w-full"
                 client={THIRDWEB_CLIENT}
                 header={{
                   title: connectOptions.modalTitle,

apps/playground-web/src/app/wallets/sign-in/embed/page.tsx

@@ -51,7 +51,11 @@ return (
 );
 };`}
       lang="tsx"
-      preview={<StyledConnectEmbed />}
+      preview={
+        <div className="overflow-hidden max-w-full px-3">
+          <StyledConnectEmbed />
+        </div>
+      }
     />
   );
 }

apps/playground-web/src/components/blocks/APIHeader.tsx

@@ -26,10 +26,10 @@ export function PageHeader(props: {
             </div>
           </div>
 
-          <h1 className="mb-0.5 font-semibold text-3xl tracking-tight">
+          <h1 className="mb-1 font-bold text-3xl tracking-tight">
             {props.title}
           </h1>
-          <p className="text-sm md:text-base text-muted-foreground max-w-4xl">
+          <p className="text-sm md:text-base text-balance text-muted-foreground max-w-5xl">
             {props.description}
           </p>
         </div>

apps/playground-web/src/components/blocks/full-path-suspense.tsx

@@ -0,0 +1,23 @@
+import { usePathname } from "next/navigation";
+import { Suspense } from "react";
+import { useFullPath } from "@/hooks/full-path";
+
+export function FullPathSuspense(props: {
+  render: (fullPath: string) => React.ReactNode;
+}) {
+  // use pathname to render the fallback
+  const pathname = usePathname();
+  return (
+    <Suspense fallback={props.render(pathname)}>
+      <WithFullPath render={props.render} />
+    </Suspense>
+  );
+}
+
+function WithFullPath(props: {
+  render: (fullPath: string) => React.ReactNode;
+}) {
+  // use pathname + search params to render the final result
+  const fullPath = useFullPath();
+  return props.render(fullPath);
+}

apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx

@@ -2,7 +2,7 @@
 
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
-import { Suspense, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Collapsible,
   CollapsibleContent,
@@ -29,9 +29,9 @@ import {
   useSidebar,
 } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
-import { useFullPath } from "../../hooks/full-path";
 import { ThirdwebIcon } from "../../icons/ThirdwebMiniLogo";
 import { ThemeToggle } from "../ThemeToggle";
+import { FullPathSuspense } from "./full-path-suspense";
 
 type ShadcnSidebarBaseLink = {
   href: string;
@@ -58,12 +58,27 @@ export type ShadcnSidebarLink =
       links: ShadcnSidebarLink[];
     };
 
-export function FullWidthSidebarLayout(props: {
+type FullWidthSidebarLayoutProps = {
   contentSidebarLinks: ShadcnSidebarLink[];
   footerSidebarLinks?: ShadcnSidebarLink[];
   children: React.ReactNode;
   className?: string;
-}) {
+  fullPath: string;
+};
+
+export function FullWidthSidebarLayout(
+  props: Omit<FullWidthSidebarLayoutProps, "fullPath">,
+) {
+  return (
+    <FullPathSuspense
+      render={(fullPath) => (
+        <FullWidthSidebarLayoutInner {...props} fullPath={fullPath} />
+      )}
+    />
+  );
+}
+
+function FullWidthSidebarLayoutInner(props: FullWidthSidebarLayoutProps) {
   const { contentSidebarLinks, children, footerSidebarLinks } = props;
   const sidebar = useSidebar();
 
@@ -99,12 +114,18 @@ export function FullWidthSidebarLayout(props: {
         <SidebarSeparator />
 
         <SidebarContent className="p-2 no-scrollbar">
-          <RenderSidebarMenu links={contentSidebarLinks} />
+          <RenderSidebarMenu
+            links={contentSidebarLinks}
+            fullPath={props.fullPath}
+          />
         </SidebarContent>
 
         {footerSidebarLinks && (
           <SidebarFooter className="pb-3 pt-0">
-            <RenderSidebarMenu links={footerSidebarLinks} />
+            <RenderSidebarMenu
+              links={footerSidebarLinks}
+              fullPath={props.fullPath}
+            />
             <ThemeToggle />
           </SidebarFooter>
         )}
@@ -128,6 +149,7 @@ export function FullWidthSidebarLayout(props: {
 
         <MobileSidebarTrigger
           links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
+          fullPath={props.fullPath}
         />
 
         <main className="flex min-w-0 grow flex-col max-sm:w-full">
@@ -138,16 +160,12 @@ export function FullWidthSidebarLayout(props: {
   );
 }
 
-function MobileSidebarTrigger(props: { links: ShadcnSidebarLink[] }) {
-  return (
-    <Suspense fallback={null}>
-      <MobileSidebarTriggerInner links={props.links} />
-    </Suspense>
-  );
-}
-
-function MobileSidebarTriggerInner(props: { links: ShadcnSidebarLink[] }) {
-  const activeLink = useActiveShadcnSidebarLink(props.links);
+function MobileSidebarTrigger(props: {
+  links: ShadcnSidebarLink[];
+  fullPath: string;
+}) {
+  const { links, fullPath } = props;
+  const activeLink = useActiveShadcnSidebarLink({ links, fullPath });
 
   return (
     <div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
@@ -169,19 +187,21 @@ function MobileSidebarTriggerInner(props: { links: ShadcnSidebarLink[] }) {
   );
 }
 
-function useActiveShadcnSidebarLink(links: ShadcnSidebarLink[]) {
-  const pathname = useFullPath();
-
+function useActiveShadcnSidebarLink(params: {
+  links: ShadcnSidebarLink[];
+  fullPath: string;
+}) {
+  const { links, fullPath } = params;
   const activeLink = useMemo(() => {
     const isActive = (link: ShadcnSidebarLink): boolean => {
       if ("href" in link) {
         // Handle exact match
         if (link.exactMatch) {
-          return link.href === pathname;
+          return link.href === fullPath;
         }
 
         // Handle prefix match (ensure we don't match partial paths)
-        return pathname.startsWith(link.href);
+        return fullPath.startsWith(link.href);
       }
 
       if ("links" in link) {
@@ -192,23 +212,25 @@ function useActiveShadcnSidebarLink(links: ShadcnSidebarLink[]) {
     };
 
     return links.find(isActive);
-  }, [links, pathname]);
+  }, [links, fullPath]);
 
   return activeLink;
 }
 
-function useIsSubnavActive(links: ShadcnSidebarLink[]) {
-  const pathname = useFullPath();
-
+function useIsSubnavActive(params: {
+  links: ShadcnSidebarLink[];
+  fullPath: string;
+}) {
+  const { links, fullPath } = params;
   const isSubnavActive = useMemo(() => {
     const isActive = (link: ShadcnSidebarLink): boolean => {
       if ("href" in link) {
         // Handle exact match
         if (link.exactMatch) {
-          return link.href === pathname;
+          return link.href === fullPath;
         }
 
-        return pathname.startsWith(link.href);
+        return fullPath.startsWith(link.href);
       }
 
       if ("links" in link) {
@@ -219,32 +241,25 @@ function useIsSubnavActive(links: ShadcnSidebarLink[]) {
     };
 
     return links.some(isActive);
-  }, [links, pathname]);
+  }, [links, fullPath]);
 
   return isSubnavActive;
 }
 
 function RenderSidebarGroup(props: {
   sidebarLinks: ShadcnSidebarLink[];
   groupName: string;
-}) {
-  return (
-    <Suspense fallback={null}>
-      <RenderSidebarGroupInner {...props} />
-    </Suspense>
-  );
-}
-
-function RenderSidebarGroupInner(props: {
-  sidebarLinks: ShadcnSidebarLink[];
-  groupName: string;
+  fullPath: string;
 }) {
   return (
     <SidebarGroup className="p-0">
       <SidebarMenuItem>
         <SidebarGroupLabel> {props.groupName}</SidebarGroupLabel>
         <SidebarGroupContent>
-          <RenderSidebarMenu links={props.sidebarLinks} />
+          <RenderSidebarMenu
+            links={props.sidebarLinks}
+            fullPath={props.fullPath}
+          />
         </SidebarGroupContent>
       </SidebarMenuItem>
     </SidebarGroup>
@@ -254,20 +269,13 @@ function RenderSidebarGroupInner(props: {
 function RenderSidebarSubmenu(props: {
   links: ShadcnSidebarLink[];
   subMenu: Omit<ShadcnSidebarBaseLink, "href" | "exactMatch">;
+  fullPath: string;
 }) {
-  return (
-    <Suspense fallback={null}>
-      <RenderSidebarSubmenuInner {...props} />
-    </Suspense>
-  );
-}
-
-function RenderSidebarSubmenuInner(props: {
-  links: ShadcnSidebarLink[];
-  subMenu: Omit<ShadcnSidebarBaseLink, "href" | "exactMatch">;
-}) {
+  const isSubnavActive = useIsSubnavActive({
+    links: props.links,
+    fullPath: props.fullPath,
+  });
   const sidebar = useSidebar();
-  const isSubnavActive = useIsSubnavActive(props.links);
   const [_open, setOpen] = useState<boolean | undefined>(undefined);
   const open = _open === undefined ? isSubnavActive : _open;
 
@@ -319,6 +327,7 @@ function RenderSidebarSubmenuInner(props: {
                           className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent hover:text-foreground px-2 py-1.5 rounded-lg w-full"
                           exactMatch={link.exactMatch}
                           href={link.href}
+                          fullPath={props.fullPath}
                           onClick={() => {
                             sidebar.setOpenMobile(false);
                           }}
@@ -335,6 +344,7 @@ function RenderSidebarSubmenuInner(props: {
                       <RenderSidebarSubmenu
                         key={`submenu_${link.subMenu.label}_${index}`}
                         links={link.links}
+                        fullPath={props.fullPath}
                         subMenu={link.subMenu}
                       />
                     );
@@ -346,6 +356,7 @@ function RenderSidebarSubmenuInner(props: {
                         key={`group_${link.group}_${index}`}
                         groupName={link.group}
                         sidebarLinks={link.links}
+                        fullPath={props.fullPath}
                       />
                     );
                   }
@@ -361,7 +372,10 @@ function RenderSidebarSubmenuInner(props: {
   );
 }
 
-function RenderSidebarMenu(props: { links: ShadcnSidebarLink[] }) {
+function RenderSidebarMenu(props: {
+  links: ShadcnSidebarLink[];
+  fullPath: string;
+}) {
   const sidebar = useSidebar();
 
   // Add null check for links
@@ -382,6 +396,7 @@ function RenderSidebarMenu(props: { links: ShadcnSidebarLink[] }) {
                   className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
                   exactMatch={link.exactMatch}
                   href={link.href}
+                  fullPath={props.fullPath}
                   onClick={() => {
                     sidebar.setOpenMobile(false);
                   }}
@@ -412,6 +427,7 @@ function RenderSidebarMenu(props: { links: ShadcnSidebarLink[] }) {
               key={`submenu_${link.subMenu.label}_${idx}`}
               links={link.links}
               subMenu={link.subMenu}
+              fullPath={props.fullPath}
             />
           );
         }
@@ -423,6 +439,7 @@ function RenderSidebarMenu(props: { links: ShadcnSidebarLink[] }) {
               groupName={link.group}
               sidebarLinks={link.links}
               key={`group_${link.group}_${idx}`}
+              fullPath={props.fullPath}
             />
           );
         }

apps/playground-web/src/components/styled-connect-embed.tsx

@@ -49,6 +49,7 @@ export function StyledConnectEmbed(
         abstract,
       ]}
       client={THIRDWEB_CLIENT}
+      className="!max-w-full"
       theme={theme === "light" ? "light" : "dark"}
       wallets={WALLETS}
       {...props}