Dashboard: dedicated engine header UI tweak on mobile, Tab component tweaks (#7787)

<!--

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

Author: MananTank

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