Dashboard: dedicated engine header UI tweak on mobile, Tab component tweaks

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",

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) => ({

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",

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",

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>

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
                   ? [

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={[
                   {

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",

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,

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",

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",

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",

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,

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,

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",

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

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",

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",

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,15 +53,20 @@ 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>
             </Button>
           </div>
         </div>
 
-        <div className="h-4" />
+        <div className="h-5" />
 
         {/* Nav */}
         <TabPathLinks

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"]

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",