fix: broken styles

Author: gregfromstl

apps/portal/src/app/globals.css

@@ -108,6 +108,16 @@
   }
 }
 
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
 code span {
   color: var(--code-light-color);
 }

apps/portal/src/app/payments/custom-data/page.mdx

@@ -195,7 +195,7 @@ To connect with other auth strategies, use external wallets, or sponsor gas for
 
 - [Buy.prepare](/references/typescript/v5/buy/prepare)
 - [Sell.prepare](/references/typescript/v5/sell/prepare)
-- [BuyWidget](/references/typescript/v5/buywidget)
-- [CheckoutWidget](/references/typescript/v5/checkoutwidget)
-- [TransactionWidget](/references/typescript/v5/transactionwidget)
+- [BuyWidget](/references/typescript/v5/widgets/BuyWidget)
+- [CheckoutWidget](/references/typescript/v5/widgets/CheckoutWidget)
+- [TransactionWidget](/references/typescript/v5/widgets/TransactionWidget)
 

apps/portal/src/app/payments/page.mdx

@@ -46,7 +46,7 @@ thirdweb Payments allow developers to create advanced payment flows to monetize
     </TabsTrigger>
     <TabsTrigger value="http" className="flex items-center [&>p]:mb-0">
       <EngineIcon className="size-4 mr-1.5" />
-      HTTP API
+      HTTP
     </TabsTrigger>
   </TabsList>
 
@@ -190,7 +190,7 @@ thirdweb Payments allow developers to create advanced payment flows to monetize
   </TabsContent>
 
   <TabsContent value="react">
-    The quickest way to setup payments in your React app is with the [`BuyWidget`](/references/typescript/v5/buywidget), [`CheckoutWidget`](/references/typescript/v5/checkoutwidget), and [`TransactionWidget`](/references/typescript/v5/transactionwidget) components.
+    The quickest way to setup payments in your React app is with the [`BuyWidget`](/references/typescript/v5/widgets/BuyWidget), [`CheckoutWidget`](/references/typescript/v5/widgets/CheckoutWidget), and [`TransactionWidget`](/references/typescript/v5/widgets/TransactionWidget) components.
     ### Installation
 
     Install the thirdweb SDK in your React project:

apps/portal/src/app/payments/products/page.mdx

@@ -23,7 +23,7 @@ export const metadata = createMetadata({
 
 Accept crypto and fiat payments for any product using the `CheckoutWidget`.
 
-<Tabs defaultValue="typescript">
+<Tabs defaultValue="react">
   <TabsList>
     <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
       <ReactIcon className="w-4 h-4 mr-2" />

apps/portal/src/app/wallets/server/page.mdx

@@ -20,7 +20,7 @@ Server wallets are wallets that are managed by your own application, like a trea
   <TabsList>
     <TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
       <EngineIcon className="w-4 h-4 mr-2" />
-      HTTP API
+      HTTP
     </TabsTrigger>
     <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
       <TypeScriptIcon className="w-4 h-4 mr-2" />

apps/portal/src/components/Document/PageFooter.tsx

@@ -1,5 +1,4 @@
 import {
-  BadgeHelpIcon,
   BrainIcon,
   type LucideIcon,
   ScrollTextIcon,
@@ -39,13 +38,6 @@ export function PageFooter(props: {
 function Links() {
   return (
     <ul className="flex flex-col gap-3">
-      <FooterLinkItem
-        href="https://thirdweb.com/support"
-        icon={BadgeHelpIcon}
-        label="Visit our support site"
-        prefix="Need help?"
-      />
-
       <FooterLinkItem
         href="https://www.youtube.com/@thirdweb_"
         icon={VideoIcon}

apps/portal/src/components/others/Sidebar.tsx

@@ -150,20 +150,20 @@ function DocSidebarNonCollapsible(props: {
 
   return (
     <div className="my-4">
-      <div className="mb-2 px-3 flex items-center gap-2 rounded-lg text-foreground">
+      <div className="mb-2 flex items-center gap-2 rounded-lg text-foreground">
         {icon && <SidebarIcon icon={icon} />}
         {href ? (
           <Link
             className={cn(
-              "block hover:bg-violet-800/20 hover:border-violet-800/50 border border-transparent",
+              "block px-3 py-1.5 hover:bg-violet-800/20 w-full rounded-lg hover:border-violet-800/50 border border-transparent",
               isCategoryActive && "text-foreground",
             )}
             href={href}
           >
             {name}
           </Link>
         ) : (
-          <div className="">{name}</div>
+          <div className="px-3">{name}</div>
         )}
       </div>
       <ul className="flex flex-col">
@@ -215,7 +215,10 @@ function DocSidebarCategory(props: {
   );
 
   const triggerEl = href ? (
-    <Link className={cn("block w-full text-left font-medium")} href={href}>
+    <Link
+      className={cn("w-full py-1.5 px-3 text-left font-medium")}
+      href={href}
+    >
       {triggerElContent}
     </Link>
   ) : (

apps/portal/src/components/ui/tabs.tsx

@@ -12,7 +12,10 @@ const TabsList = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
-    className={cn("flex w-100 items-center justify-start border-b", className)}
+    className={cn(
+      "flex w-100 items-center justify-start border-b overflow-x-auto overflow-y-hidden whitespace-nowrap",
+      className,
+    )}
     ref={ref}
     {...props}
   />
@@ -26,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     className={cn(
       "mb-[-2px] flex items-center whitespace-nowrap px-4 py-2 text-sm font-medium",
-      "border-transparent border-b-2 text-muted-foreground ring-offset-700 transition-all",
+      "border-transparent border-b-4 text-muted-foreground ring-offset-700 transition-all",
       "data-[state=active]:border-violet-800 hover:text-foreground data-[state=active]:text-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,