From 0aac9a85933fb8fe8010ac3d98113b9b3f879720 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 4 Aug 2025 20:47:41 +0000
Subject: [PATCH] Dashboard: dedicated engine header UI tweak on mobile, Tab
 component tweaks (#7787)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 updating the `TabButtons` component across various files by modifying class names and adjusting properties to improve styling and functionality.

### Detailed summary
- Updated `tabClassName` for `TabButtons` in multiple files to enhance styling.
- Changed `tabContainerClassName` in several instances to adjust layout.
- Added `activeTabClassName` in certain components to manage active tab styles.
- Refined `isActive` logic for better tab state management.

> ✨ 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

* **Style**
  * Updated tab button styling across multiple areas of the dashboard for a more consistent appearance, removing explicit small text overrides and adjusting layout and padding.
  * Improved header layout and button appearance in the transactions section for better responsiveness and visual clarity.
  * Enhanced code snippet formatting in API usage examples for readability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/@/components/batch-upload/batch-lazy-mint.tsx |  1 -
 .../@/components/blocks/code/code-segment.client.tsx  |  1 -
 .../contract-publish-form/factory-fieldset.tsx        |  1 -
 .../contract-publish-form/landing-fieldset.tsx        |  2 --
 .../src/@/components/contracts/code-overview.tsx      |  1 -
 .../contracts/functions/contract-function.tsx         |  1 -
 .../src/@/components/ui/DatePickerWithRange.tsx       |  1 -
 apps/dashboard/src/@/components/ui/tabs.tsx           |  4 ++--
 .../(marketplace)/components/list-button.tsx          |  2 --
 .../[contractAddress]/nfts/[tokenId]/token-id.tsx     |  1 -
 .../public-pages/nft/token-viewer/token-viewer.tsx    |  1 -
 .../~/settings/members/TeamMembersSettingsPage.tsx    |  1 -
 .../ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx           |  1 -
 .../WaitingForIntegrationCard.tsx                     |  1 -
 .../access-tokens/components/engine-access-tokens.tsx |  1 -
 .../configuration/components/engine-wallet-config.tsx |  1 -
 .../(sidebar)/payments/components/BuyWidgetFTUX.tsx   |  1 -
 .../tokens/create/nft/upload-nfts/upload-nfts.tsx     |  1 -
 .../[project_slug]/(sidebar)/transactions/layout.tsx  | 11 ++++++++---
 .../server-wallets/components/try-it-out.tsx          |  5 ++---
 .../transactions/tx/[id]/transaction-details-ui.tsx   |  1 -
 21 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx
index d9b184501db..881469be09a 100644
--- a/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx
+++ b/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx
@@ -324,7 +324,6 @@ function SelectReveal(props: {
       {canCreateDelayedRevealBatch && (
         <TabButtons
           containerClassName="mb-8"
-          tabClassName="!text-sm"
           tabs={[
             {
               name: "Reveal upon mint",
diff --git a/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx b/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx
index 78d2f4f14ad..eed5eb060e0 100644
--- a/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx
+++ b/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx
@@ -95,7 +95,6 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
       {!hideTabs && (
         <TabButtons
           hideBottomLine={!!onlyTabs}
-          tabClassName="text-sm gap-2 !text-sm"
           tabContainerClassName="px-3 pt-1.5 gap-0.5"
           tabIconClassName="size-4"
           tabs={environments.map((env) => ({
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx
index 61ff780938e..3133265a36f 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx
@@ -30,7 +30,6 @@ export const FactoryFieldset: React.FC<FactoryFieldsetProps> = ({
       </p>
 
       <TabButtons
-        tabClassName="!text-sm font-semibold"
         tabs={[
           {
             name: "Default Factory",
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx
index 2a18ba94336..f941bd9e5ee 100644
--- a/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx
+++ b/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx
@@ -144,7 +144,6 @@ export function LandingFieldset({
         </p>
 
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               name: "Write",
@@ -226,7 +225,6 @@ export function LandingFieldset({
                 </p>
               )}
               <TabButtons
-                tabClassName="!text-sm"
                 tabs={[
                   {
                     name: "Write",
diff --git a/apps/dashboard/src/@/components/contracts/code-overview.tsx b/apps/dashboard/src/@/components/contracts/code-overview.tsx
index 7283382a26b..d2bfdfdde86 100644
--- a/apps/dashboard/src/@/components/contracts/code-overview.tsx
+++ b/apps/dashboard/src/@/components/contracts/code-overview.tsx
@@ -743,7 +743,6 @@ export function CodeOverview(props: {
                   <div className="bg-background">
                     <TabButtons
                       tabs={tabList}
-                      tabClassName="!text-sm"
                       tabContainerClassName="px-3 pt-2"
                     />
                   </div>
diff --git a/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx b/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
index cda9f9d85f8..8ebf5ef7de2 100644
--- a/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
+++ b/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
@@ -332,7 +332,6 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
           <div className="flex flex-col h-full relative">
             <TabButtons
               tabContainerClassName="px-3 pt-2"
-              tabClassName="!text-sm"
               tabs={[
                 ...(viewFunctions.length > 0
                   ? [
diff --git a/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx b/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx
index 672df91096c..0a8f952f705 100644
--- a/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx
+++ b/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx
@@ -79,7 +79,6 @@ export function DatePickerWithRange(props: {
             <div className={cn("px-4", !props.header && "py-4")}>
               <TabButtons
                 activeTabClassName="!bg-inverted !text-inverted-foreground"
-                tabClassName="!text-sm"
                 tabContainerClassName="gap-2"
                 tabs={[
                   {
diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index 99fcc0bda58..cf73b1dc489 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -56,7 +56,7 @@ export function TabLinks(props: {
                 <Link
                   aria-disabled={tab.isDisabled}
                   className={cn(
-                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm lg:text-sm",
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg font-medium hover:bg-accent !px-3",
                     !tab.isActive && !tab.isDisabled && "hover:text-foreground",
                     tab.isDisabled && "pointer-events-none",
                     tab.isActive && "!text-foreground",
@@ -125,7 +125,7 @@ export function TabButtons(props: {
               >
                 <Button
                   className={cn(
-                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg font-medium hover:bg-accent !px-3",
                     !tab.isActive &&
                       "text-muted-foreground hover:text-foreground",
                     tab.isDisabled && "cursor-not-allowed opacity-50",
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx
index a5ad8addc29..fd5aac67ee8 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx
@@ -64,8 +64,6 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
           {isInsightSupported ? (
             <>
               <TabButtons
-                tabClassName="text-sm gap-2 !text-sm"
-                tabContainerClassName="gap-0.5"
                 tabs={LISTING_MODES.map((mode) => ({
                   isActive: mode === listingMode,
                   name: mode,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
index eb3051a4486..50ddfcc24cd 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
@@ -157,7 +157,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
           </div>
 
           <TabButtons
-            tabClassName="!text-sm"
             tabs={[
               {
                 isActive: tab === "Details",
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
index 842dfddff63..8cfd057ad87 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
@@ -338,7 +338,6 @@ function TokenInfoUI(props: {
             {props.type === "erc1155" && (
               <div className="border-t border-dashed pt-2">
                 <TabButtons
-                  tabClassName="!text-sm"
                   tabs={[
                     {
                       isActive: tab === "traits",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
index a2752223efc..34d58b5df13 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
@@ -60,7 +60,6 @@ export function TeamMembersSettingsPage(props: {
       <div className="h-10" />
 
       <TabButtons
-        tabClassName="!text-sm"
         tabs={[
           {
             isActive: manageTab === "members",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
index 8bf0524ae72..881894c07d9 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
@@ -22,7 +22,6 @@ export function IntegrateAPIKeyCodeTabs(props: {
   return (
     <div>
       <TabButtons
-        tabClassName="!text-sm"
         tabs={Object.entries(tabNames).map(([key, name]) => ({
           isActive: tab === key,
           name,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/WaitingForIntegrationCard/WaitingForIntegrationCard.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/WaitingForIntegrationCard/WaitingForIntegrationCard.tsx
index 67c7f76f3c9..fc16b41b9ba 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/WaitingForIntegrationCard/WaitingForIntegrationCard.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/WaitingForIntegrationCard/WaitingForIntegrationCard.tsx
@@ -29,7 +29,6 @@ export function WaitingForIntegrationCard(props: {
         {/* Code */}
         <div>
           <TabButtons
-            tabClassName="!text-sm"
             tabs={props.codeTabs.map((tab) => ({
               isActive: tab.label === selectedTab,
               name: tab.label,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
index bd4f59a26fc..06510a4505f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
@@ -44,7 +44,6 @@ export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
       {supportsKeyPairAuth && (
         <TabButtons
           containerClassName="mb-4 mt-3"
-          tabClassName="!text-sm"
           tabs={[
             {
               name: "Standard",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
index e4af5612bf4..02d2a66c263 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
@@ -82,7 +82,6 @@ export function EngineWalletConfig({
       </div>
 
       <TabButtons
-        tabClassName="font-medium !text-sm"
         tabs={filteredWalletOptions.map(({ key, name }) => ({
           icon:
             (key === "aws-kms" && !isAwsKmsConfigured) ||
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx
index b911530dd9a..36ff9540c23 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx
@@ -27,7 +27,6 @@ export function BuyWidgetFTUX(props: {
 
       <div className="p-4 pt-2">
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               isActive: tab === "embed",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/upload-nfts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/upload-nfts.tsx
index 7b29ad4539b..71e3a4e26ea 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/upload-nfts.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/upload-nfts.tsx
@@ -30,7 +30,6 @@ export function UploadNFTsFieldset(props: {
     <StepCard nextButton={undefined} prevButton={undefined} title="Upload NFTs">
       <TabButtons
         containerClassName="pt-2 px-4 md:px-6"
-        tabClassName="!text-sm"
         tabs={[
           {
             isActive: props.nftData.type === "single",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/layout.tsx
index 2842a1e8adf..71b723c6e09 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/layout.tsx
@@ -31,7 +31,7 @@ function TransactionsLayout(props: {
       <div className="pt-4 lg:pt-6">
         {/* header */}
         <div className="container flex max-w-7xl flex-col gap-4">
-          <div className="flex flex-row items-center justify-between">
+          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
             <div className="flex flex-col">
               <h1 className="mb-1 flex items-center gap-2 font-semibold text-3xl tracking-tight">
                 Transactions{" "}
@@ -53,7 +53,12 @@ function TransactionsLayout(props: {
                 </Link>
               </div>
             </div>
-            <Button variant="outline" asChild className="rounded-full">
+            <Button
+              variant="outline"
+              asChild
+              className="rounded-full bg-background"
+              size="sm"
+            >
               <Link href={`${projectLayoutPath}/engine/dedicated`}>
                 View Dedicated Engine
               </Link>
@@ -61,7 +66,7 @@ function TransactionsLayout(props: {
           </div>
         </div>
 
-        <div className="h-4" />
+        <div className="h-5" />
 
         {/* Nav */}
         <TabPathLinks
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/try-it-out.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/try-it-out.tsx
index af7fbecfe21..bf4174d36e0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/try-it-out.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/try-it-out.tsx
@@ -37,7 +37,6 @@ export function TryItOut({ useEngineAPI }: TryItOutProps) {
 
       <div>
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               isActive: activeTab === "curl",
@@ -166,7 +165,7 @@ curl -X POST "${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/transactions" \\
   -H "x-secret-key: <your-project-secret-key>" \\
   -d '{
     "chainId": "84532",
-    "from": "<your-server-wallet-address>",  
+    "from": "<your-server-wallet-address>",
     "transactions": [
       {
         "type": "contractCall",
@@ -191,7 +190,7 @@ const response = await fetch(
       "from": "<your-server-wallet-address>",
       "transactions": [
         {
-          "type": "contractCall", 
+          "type": "contractCall",
           "contractAddress": "0x...",
           "method": "function mintTo(address to, uint256 amount)",
           "params": ["0x...", "100"]
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx
index 0851bef4466..1037575bffc 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx
@@ -384,7 +384,6 @@ function TransactionParametersCard({
       </CardHeader>
       <CardContent className="space-y-4">
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               isActive: activeTab === "decoded",