myoperator-ui 0.0.204-beta.1 → 0.0.204-beta.2

package/dist/index.js

@@ -1033,7 +1033,7 @@ import { cn } from "../../lib/utils";
  * SelectTrigger variants matching TextField styling
  */
 const selectTriggerVariants = cva(
-  "flex h-10 w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)] [&>span]:line-clamp-1",
+  "flex h-10 w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)] [&>span]:line-clamp-1 [&_[data-placeholder]]:text-semantic-text-placeholder",
   {
     variants: {
       state: {
@@ -3334,14 +3334,14 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const dialogContentVariants = cva(
-  "fixed left-[50%] top-[50%] z-[9999] grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+  "fixed left-[50%] top-[50%] z-[9999] grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[calc(100vh-2rem)] overflow-y-auto [&::-webkit-scrollbar]:hidden [scrollbar-width:none] [&>*]:min-w-0",
   {
     variants: {
       size: {
-        sm: "w-full max-w-sm",
-        default: "w-full max-w-lg",
-        lg: "w-full max-w-2xl",
-        xl: "w-full max-w-4xl",
+        sm: "w-[calc(100%-2rem)] max-w-sm",
+        default: "w-[calc(100%-2rem)] max-w-lg",
+        lg: "w-[calc(100%-2rem)] max-w-2xl",
+        xl: "w-[calc(100%-2rem)] max-w-4xl",
         full: "w-[calc(100%-2rem)] h-[calc(100%-2rem)] max-w-none",
       },
     },
@@ -3418,7 +3418,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-left",
       className
     )}
     {...props}
@@ -12030,8 +12030,10 @@ export const BotCard = React.forwardRef<HTMLDivElement, BotCardProps>(
             Last Published
           </span>
           {bot.lastPublishedBy && bot.lastPublishedDate ? (
-            <p className="m-0 text-sm text-semantic-text-muted">
-              {bot.lastPublishedBy} | {bot.lastPublishedDate}
+            <p className="m-0 text-sm text-semantic-text-muted break-words">
+              <span className="inline-block">{bot.lastPublishedBy}</span>
+              <span className="mx-1">|</span>
+              <span className="inline-block">{bot.lastPublishedDate}</span>
             </p>
           ) : (
             <p className="m-0 text-sm text-semantic-text-muted">\u2014</p>
@@ -12136,7 +12138,7 @@ export const CreateBotModal = React.forwardRef<
             <span className="text-sm font-semibold text-semantic-text-secondary tracking-[0.014px]">
               Select Bot Type
             </span>
-            <div className="flex gap-3">
+            <div className="flex flex-col sm:flex-row gap-3">
               {BOT_TYPE_OPTIONS.map(({ id, label, description }) => {
                 const isSelected = selectedType === id;
                 return (
@@ -12145,7 +12147,7 @@ export const CreateBotModal = React.forwardRef<
                     type="button"
                     onClick={() => setSelectedType(id)}
                     className={cn(
-                      "flex flex-col gap-2.5 p-3 rounded-lg border text-left flex-1 h-[134px] justify-center",
+                      "flex flex-col gap-2.5 p-3 rounded-lg border text-left flex-1 sm:h-[134px] justify-center",
                       "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus",
                       isSelected
                         ? "bg-semantic-info-surface border-semantic-border-focus shadow-sm"
@@ -12247,7 +12249,7 @@ export const BotList = React.forwardRef<HTMLDivElement, BotListProps>(
     return (
       <div ref={ref} className={cn("flex flex-col w-full", className)}>
         {/* Page header */}
-        <div className="flex items-center justify-between pb-5 mb-6 border-b border-semantic-border-layout">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-5 mb-6 border-b border-semantic-border-layout">
           <div className="flex flex-col gap-1.5">
             <h1 className="m-0 text-base font-semibold text-semantic-text-primary tracking-[0.064px]">
               {title}
@@ -12258,20 +12260,20 @@ export const BotList = React.forwardRef<HTMLDivElement, BotListProps>(
           </div>
 
           {/* Search bar */}
-          <div className="flex items-center gap-2 h-10 px-2.5 border border-semantic-border-input rounded bg-semantic-bg-primary hover:border-semantic-border-input-focus focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]">
+          <div className="flex items-center gap-2 h-10 px-2.5 border border-semantic-border-input rounded bg-semantic-bg-primary hover:border-semantic-border-input-focus focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)] w-full sm:w-auto">
             <Search className="size-[14px] text-semantic-text-muted shrink-0" />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => handleSearch(e.target.value)}
               placeholder="Search bot..."
-              className="text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none w-[180px]"
+              className="text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-transparent outline-none w-full sm:w-[180px]"
             />
           </div>
         </div>
 
         {/* Bot grid */}
-        <div className="grid grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
           {/* Create new bot card */}
           <button
             type="button"
@@ -12406,7 +12408,6 @@ export type { BotListProps, Bot, BotType } from "./types";
           content: prefixTailwindClasses(`import * as React from "react";
 import {
   ChevronLeft,
-  ChevronDown,
   Plus,
   Download,
   Trash2,
@@ -12430,6 +12431,20 @@ import {
   AccordionTrigger,
   AccordionContent,
 } from "../accordion";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "../select";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipArrow,
+  TooltipProvider,
+} from "../tooltip";
 import { CreateFunctionModal } from "./create-function-modal";
 import type {
   IvrBotConfigProps,
@@ -12458,13 +12473,13 @@ function SectionCard({
         className
       )}
     >
-      <div className="flex items-center justify-between px-6 py-4 border-b border-semantic-border-layout">
+      <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-semantic-border-layout">
         <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
           {title}
         </h2>
         {action}
       </div>
-      <div className="px-6 py-5">{children}</div>
+      <div className="px-4 sm:px-6 py-5">{children}</div>
     </div>
   );
 }
@@ -12521,7 +12536,7 @@ function StyledInput({
       className={cn(
         "w-full h-10 px-4 text-sm rounded border",
         "border-semantic-border-input bg-semantic-bg-primary",
-        "text-semantic-text-primary placeholder:text-semantic-text-muted",
+        "text-semantic-text-primary placeholder:text-semantic-text-placeholder",
         "outline-none hover:border-semantic-border-input-focus",
         "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         className
@@ -12553,7 +12568,7 @@ function StyledTextarea({
       className={cn(
         "w-full px-4 py-2.5 text-sm rounded border resize-none",
         "border-semantic-border-input bg-semantic-bg-primary",
-        "text-semantic-text-primary placeholder:text-semantic-text-muted",
+        "text-semantic-text-primary placeholder:text-semantic-text-placeholder",
         "outline-none hover:border-semantic-border-input-focus",
         "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         className
@@ -12562,56 +12577,6 @@ function StyledTextarea({
   );
 }
 
-// \u2500\u2500\u2500 Styled Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function StyledSelect({
-  placeholder,
-  value,
-  onChange,
-  options,
-  disabled,
-  className,
-}: {
-  placeholder?: string;
-  value?: string;
-  onChange?: (v: string) => void;
-  options?: { label: string; value: string }[];
-  disabled?: boolean;
-  className?: string;
-}) {
-  return (
-    <div className={cn("relative w-full", className)}>
-      <select
-        value={value ?? ""}
-        onChange={(e) => onChange?.(e.target.value)}
-        disabled={disabled}
-        className={cn(
-          "w-full h-10 pl-4 pr-10 text-sm rounded border appearance-none cursor-pointer",
-          "border-semantic-border-input bg-semantic-bg-primary",
-          value ? "text-semantic-text-primary" : "text-semantic-text-muted",
-          "outline-none hover:border-semantic-border-input-focus",
-          "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-          "disabled:opacity-50 disabled:cursor-not-allowed"
-        )}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options?.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-      <ChevronDown
-        className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-semantic-text-muted pointer-events-none shrink-0"
-        aria-hidden="true"
-      />
-    </div>
-  );
-}
-
 // \u2500\u2500\u2500 Who The Bot Is \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function WhoTheBotIs({
   data,
@@ -12635,54 +12600,74 @@ function WhoTheBotIs({
         </Field>
 
         <Field label="Primary Role">
-          <StyledInput
-            placeholder="e.g., Customer Support Agent"
-            value={data.primaryRole}
-            onChange={(v) => onChange({ primaryRole: v })}
-          />
+          <Select
+            value={data.primaryRole || undefined}
+            onValueChange={(v) => onChange({ primaryRole: v })}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="e.g., Customer Support Agent" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="customer-support-agent">Customer Support Agent</SelectItem>
+              <SelectItem value="sales-representative">Sales Representative</SelectItem>
+              <SelectItem value="technical-support">Technical Support</SelectItem>
+              <SelectItem value="billing-support">Billing Support</SelectItem>
+              <SelectItem value="general-inquiries">General Inquiries</SelectItem>
+            </SelectContent>
+          </Select>
         </Field>
 
         <Field label="Tone">
-          <StyledSelect
-            placeholder="Enter or select tone"
-            value={data.tone}
-            onChange={(v) => onChange({ tone: v })}
-            options={[
-              { value: "conversational", label: "Conversational" },
-              { value: "professional", label: "Professional" },
-              { value: "friendly", label: "Friendly" },
-              { value: "formal", label: "Formal" },
-            ]}
-          />
-          <p className="m-0 text-xs text-semantic-text-muted mt-0.5">
-            Press Enter to add &ldquo;Conversational&rdquo;
-          </p>
+          <Select
+            value={data.tone || undefined}
+            onValueChange={(v) => onChange({ tone: v })}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Enter or select tone" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="conversational">Conversational</SelectItem>
+              <SelectItem value="professional">Professional</SelectItem>
+              <SelectItem value="friendly">Friendly</SelectItem>
+              <SelectItem value="formal">Formal</SelectItem>
+            </SelectContent>
+          </Select>
+          <div className="flex items-center gap-1.5 text-xs text-semantic-text-muted">
+            <Info className="size-3.5 shrink-0" />
+            <p className="m-0">Press Enter to add &ldquo;Conversational&rdquo;</p>
+          </div>
         </Field>
 
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <Field label="How It Sounds">
-            <StyledSelect
-              placeholder="Rhea - Female"
-              value={data.voice}
-              onChange={(v) => onChange({ voice: v })}
-              options={[
-                { value: "rhea-female", label: "Rhea - Female" },
-                { value: "james-male", label: "James - Male" },
-                { value: "aria-female", label: "Aria - Female" },
-              ]}
-            />
+            <Select
+              value={data.voice || undefined}
+              onValueChange={(v) => onChange({ voice: v })}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Rhea - Female" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="rhea-female">Rhea - Female</SelectItem>
+                <SelectItem value="james-male">James - Male</SelectItem>
+                <SelectItem value="aria-female">Aria - Female</SelectItem>
+              </SelectContent>
+            </Select>
           </Field>
           <Field label="What Language It Speaks">
-            <StyledSelect
-              placeholder="Select Language Mode"
-              value={data.language}
-              onChange={(v) => onChange({ language: v })}
-              options={[
-                { value: "en-in", label: "English (India)" },
-                { value: "en-us", label: "English (US)" },
-                { value: "hi-in", label: "Hindi" },
-              ]}
-            />
+            <Select
+              value={data.language || undefined}
+              onValueChange={(v) => onChange({ language: v })}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select Language Mode" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="en-in">English (India)</SelectItem>
+                <SelectItem value="en-us">English (US)</SelectItem>
+                <SelectItem value="hi-in">Hindi</SelectItem>
+              </SelectContent>
+            </Select>
           </Field>
         </div>
       </div>
@@ -12694,7 +12679,9 @@ function WhoTheBotIs({
 const SESSION_VARIABLES = [
   "{{Caller number}}",
   "{{Time}}",
+  "{{Morning/Afternoon/Evening}}",
   "{{Contact Details}}",
+  "{{DID}}",
 ];
 
 function HowItBehaves({
@@ -12713,11 +12700,12 @@ function HowItBehaves({
 
   return (
     <SectionCard title="How It Behaves">
-      <div className="flex flex-col gap-3">
-        <p className="m-0 text-xs text-semantic-text-muted">
-          Define workflows, conditions and handover logic (System prompt)
-        </p>
-        <div className="relative">
+      <div className="flex flex-col gap-6">
+        {/* Prompt editor group */}
+        <div className="flex flex-col gap-1.5">
+          <p className="m-0 text-sm font-semibold text-semantic-text-secondary">
+            Define workflows, conditions and handover logic (System prompt)
+          </p>
           <StyledTextarea
             value={prompt}
             rows={6}
@@ -12725,17 +12713,22 @@ function HowItBehaves({
               if (v.length <= MAX) onChange({ systemPrompt: v });
             }}
             placeholder="You are a helpful assistant. Always start by greeting the user politely: 'Hello! Welcome. How can I assist you today?'"
-            className="pb-8"
           />
-          <span className="absolute bottom-2.5 right-3 text-xs text-semantic-text-muted">
-            {prompt.length}/{MAX}
-          </span>
+          {/* Helper row: info + hint text on left, counter on right */}
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-1.5 text-xs text-semantic-text-muted">
+              <Info className="size-3.5 shrink-0" />
+              <p className="m-0">Type {"{{"} to enable dropdown or use the below chips to input variables.</p>
+            </div>
+            <span className="shrink-0 text-xs text-semantic-text-muted whitespace-nowrap">
+              {prompt.length}/{MAX}
+            </span>
+          </div>
         </div>
-        <p className="m-0 text-xs text-semantic-text-muted">
-          Type [[ to enable dropdown or use the below chips to input variables.
-        </p>
+
+        {/* Session variables row */}
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs text-semantic-text-secondary">
+          <span className="text-xs font-semibold text-semantic-text-muted">
             Session variables:
           </span>
           {SESSION_VARIABLES.map((v) => (
@@ -12743,9 +12736,12 @@ function HowItBehaves({
               key={v}
               type="button"
               onClick={() => insertVariable(v)}
-              className={cn(tagVariants(), "gap-1.5 cursor-pointer hover:opacity-80 transition-opacity")}
+              className={cn(
+                tagVariants({ size: "sm" }),
+                "gap-2.5 cursor-pointer hover:opacity-80 transition-opacity"
+              )}
             >
-              <Plus className="size-3 shrink-0" />
+              <Plus className="size-2.5 shrink-0" />
               {v}
             </button>
           ))}
@@ -12767,14 +12763,24 @@ function FallbackPromptsAccordion({
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       <Accordion type="single">
         <AccordionItem value="fallback">
-          <AccordionTrigger className="px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
+          <AccordionTrigger className="px-4 sm:px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
             <span className="flex items-center gap-1.5 text-base font-semibold text-semantic-text-primary">
               Fallback Prompts
-              <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex cursor-default">
+                    <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="m-0">Configure what the bot says when agents are busy or extensions are unavailable.</p>
+                  <TooltipArrow />
+                </TooltipContent>
+              </Tooltip>
             </span>
           </AccordionTrigger>
           <AccordionContent>
-            <div className="px-6 pt-6 pb-2 flex flex-col gap-6">
+            <div className="px-4 sm:px-6 pt-6 pb-2 flex flex-col gap-6">
               <Field label="Agent Busy Prompt">
                 <StyledTextarea
                   value={data.agentBusyPrompt ?? ""}
@@ -12886,7 +12892,7 @@ function FileUploadModal({
       <DialogContent
         size="default"
         hideCloseButton
-        className="max-w-[660px] rounded-xl p-6 gap-0"
+        className="max-w-[660px] rounded-xl gap-0"
       >
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
@@ -12905,7 +12911,7 @@ function FileUploadModal({
         </div>
 
         {/* Body */}
-        <div className="flex flex-col gap-4 items-end w-full">
+        <div className="flex flex-col gap-4 items-center sm:items-end w-full">
           {/* Download sample file */}
           <button
             type="button"
@@ -12925,7 +12931,7 @@ function FileUploadModal({
             }}
             onDragOver={(e) => e.preventDefault()}
           >
-            <div className="flex items-center gap-4">
+            <div className="flex flex-col items-center sm:flex-row sm:items-center gap-3 sm:gap-4">
               <button
                 type="button"
                 onClick={() => fileInputRef.current?.click()}
@@ -12933,7 +12939,7 @@ function FileUploadModal({
               >
                 Upload from device
               </button>
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col gap-1 text-center sm:text-left">
                 <p className="m-0 text-sm text-semantic-text-secondary tracking-[0.035px]">
                   or drag and drop file here
                 </p>
@@ -13021,11 +13027,11 @@ function FileUploadModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 mt-6">
-          <Button variant="outline" onClick={handleClose}>
+        <div className="flex items-center justify-between gap-2 mt-6">
+          <Button variant="outline" onClick={handleClose} className="flex-1 sm:flex-none sm:w-auto">
             Cancel
           </Button>
-          <Button onClick={handleSave}>
+          <Button onClick={handleSave} className="flex-1 sm:flex-none sm:w-auto">
             Save
           </Button>
         </div>
@@ -13062,12 +13068,22 @@ function KnowledgeBase({
     <>
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-6 py-4 border-b border-semantic-border-layout">
+      <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-semantic-border-layout">
         <div className="flex items-center gap-1.5">
           <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
             Knowledge Base
           </h2>
-          <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex cursor-default">
+                <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="m-0">Upload documents and files to train your bot with your company knowledge.</p>
+              <TooltipArrow />
+            </TooltipContent>
+          </Tooltip>
         </div>
         <button
           type="button"
@@ -13079,7 +13095,7 @@ function KnowledgeBase({
         </button>
       </div>
       {/* File list */}
-      <div className="px-6">
+      <div className="px-4 sm:px-6">
         {files.length === 0 ? (
           <p className="m-0 text-sm text-semantic-text-muted text-center py-5">
             No files added yet. Click &ldquo;+ Files&rdquo; to upload.
@@ -13091,9 +13107,9 @@ function KnowledgeBase({
               return (
                 <div
                   key={file.id}
-                  className="flex items-center justify-between py-4"
+                  className="flex flex-wrap items-center justify-between gap-2 py-4"
                 >
-                  <div className="flex items-center gap-2 min-w-0">
+                  <div className="flex items-center gap-2 min-w-0 flex-1">
                     <span className="text-sm text-semantic-text-primary truncate">
                       File {file.name}
                     </span>
@@ -13105,7 +13121,7 @@ function KnowledgeBase({
                       {status.label}
                     </Badge>
                   </div>
-                  <div className="flex items-center gap-1 shrink-0 ml-2">
+                  <div className="flex items-center gap-1 shrink-0">
                     <button
                       type="button"
                       onClick={() => onDownload?.(file.id)}
@@ -13151,12 +13167,22 @@ function FunctionsSection({
   return (
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-6 py-4 border-b border-semantic-border-layout">
+      <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-semantic-border-layout">
         <div className="flex items-center gap-1.5">
           <h2 className="m-0 text-base font-semibold text-semantic-text-primary">
             Functions
           </h2>
-          <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex cursor-default">
+                <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="m-0">Add custom API functions the bot can call to fetch or submit data during conversations.</p>
+              <TooltipArrow />
+            </TooltipContent>
+          </Tooltip>
         </div>
         <button
           type="button"
@@ -13168,7 +13194,7 @@ function FunctionsSection({
         </button>
       </div>
       {/* Function list */}
-      <div className="px-6 py-4">
+      <div className="px-4 sm:px-6 py-4">
         {functions.length === 0 ? (
           <p className="m-0 text-sm text-semantic-text-muted text-center py-2">
             No functions added yet.
@@ -13178,16 +13204,16 @@ function FunctionsSection({
             {functions.map((fn) => (
               <div
                 key={fn.id}
-                className="flex items-center justify-between px-4 py-3 rounded border border-semantic-border-layout bg-semantic-bg-primary"
+                className="flex flex-wrap items-center gap-2 px-4 py-3 rounded border border-semantic-border-layout bg-semantic-bg-primary"
               >
-                <div className="flex items-center gap-2 min-w-0">
+                <div className="flex items-center gap-2 min-w-0 flex-1">
                   <Info className="size-4 text-semantic-text-muted shrink-0" />
                   <span className="text-sm text-semantic-text-primary truncate">
                     {fn.name}
                   </span>
                 </div>
                 {fn.isBuiltIn && (
-                  <Badge size="sm" className="font-normal shrink-0 ml-3">
+                  <Badge size="sm" className="font-normal shrink-0">
                     Built-in
                   </Badge>
                 )}
@@ -13212,15 +13238,25 @@ function FrustrationHandoverAccordion({
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       <Accordion type="single">
         <AccordionItem value="frustration">
-          <AccordionTrigger className="px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
+          <AccordionTrigger className="px-4 sm:px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
             <span className="flex items-center gap-1.5 text-base font-semibold text-semantic-text-primary">
               Frustration Handover
-              <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex cursor-default">
+                    <Info className="size-3.5 text-semantic-text-muted shrink-0" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="m-0">Automatically transfer the call to a human agent when the bot detects customer frustration.</p>
+                  <TooltipArrow />
+                </TooltipContent>
+              </Tooltip>
             </span>
           </AccordionTrigger>
           <AccordionContent>
             <div className="flex flex-col gap-6 pt-0 pb-2">
-              <div className="flex items-center justify-between px-6 py-2.5">
+              <div className="flex items-center justify-between px-4 sm:px-6 py-2.5">
                 <span className="text-sm text-semantic-text-primary">
                   Enable frustration-based escalation
                 </span>
@@ -13231,19 +13267,22 @@ function FrustrationHandoverAccordion({
                   }
                 />
               </div>
-              <div className="px-6 pb-2">
+              <div className="px-4 sm:px-6 pb-2">
                 <Field label="Escalation Department">
-                  <StyledSelect
-                    placeholder="Select department/user"
-                    value={data.escalationDepartment}
-                    onChange={(v) => onChange({ escalationDepartment: v })}
+                  <Select
+                    value={data.escalationDepartment || undefined}
+                    onValueChange={(v) => onChange({ escalationDepartment: v })}
                     disabled={!data.frustrationHandoverEnabled}
-                    options={[
-                      { value: "support", label: "Support" },
-                      { value: "sales", label: "Sales" },
-                      { value: "billing", label: "Billing" },
-                    ]}
-                  />
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select department/user" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="support">Support</SelectItem>
+                      <SelectItem value="sales">Sales</SelectItem>
+                      <SelectItem value="billing">Billing</SelectItem>
+                    </SelectContent>
+                  </Select>
                 </Field>
               </div>
             </div>
@@ -13267,31 +13306,35 @@ function NumberSpinner({
   max?: number;
 }) {
   return (
-    <div className="flex h-10 w-full border border-semantic-border-input rounded overflow-hidden">
+    <div className="flex items-center gap-2.5 w-full h-10 px-4 border border-semantic-border-layout bg-semantic-bg-primary rounded hover:border-semantic-border-input-focus focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]">
       <input
         type="number"
         value={value}
         min={min}
         max={max}
         onChange={(e) => onChange(Number(e.target.value))}
-        className="flex-1 px-4 text-sm text-semantic-text-primary bg-semantic-bg-primary outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="flex-1 text-sm text-semantic-text-primary bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
       />
-      <div className="flex flex-col shrink-0 border-l border-semantic-border-layout">
+      <div className="flex flex-col items-center shrink-0 size-5 overflow-hidden">
         <button
           type="button"
           onClick={() => onChange(Math.min(max, value + 1))}
-          className="flex-1 flex items-center justify-center px-2.5 text-xs text-semantic-text-muted hover:bg-semantic-bg-hover leading-none border-b border-semantic-border-layout"
+          className="flex flex-1 items-center justify-center w-full text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
           aria-label="Increase"
         >
-          \u25B2
+          <svg width="10" height="6" viewBox="0 0 10 6" fill="currentColor" aria-hidden="true">
+            <path d="M5 0L10 6H0L5 0Z" />
+          </svg>
         </button>
         <button
           type="button"
           onClick={() => onChange(Math.max(min, value - 1))}
-          className="flex-1 flex items-center justify-center px-2.5 text-xs text-semantic-text-muted hover:bg-semantic-bg-hover leading-none"
+          className="flex flex-1 items-center justify-center w-full text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
           aria-label="Decrease"
         >
-          \u25BC
+          <svg width="10" height="6" viewBox="0 0 10 6" fill="currentColor" aria-hidden="true">
+            <path d="M5 6L0 0H10L5 6Z" />
+          </svg>
         </button>
       </div>
     </div>
@@ -13309,7 +13352,7 @@ function AdvancedSettingsAccordion({
     <div className="bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden">
       <Accordion type="single">
         <AccordionItem value="advanced">
-          <AccordionTrigger className="px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
+          <AccordionTrigger className="px-4 sm:px-6 py-5 border-b border-semantic-border-layout hover:no-underline">
             <span className="text-base font-semibold text-semantic-text-primary">
               Advanced Settings
             </span>
@@ -13317,7 +13360,7 @@ function AdvancedSettingsAccordion({
           <AccordionContent>
             <div className="flex flex-col">
               {/* Number fields section */}
-              <div className="px-6 pt-5 pb-6 flex flex-col gap-5 border-b border-semantic-border-layout">
+              <div className="px-4 sm:px-6 pt-5 pb-6 flex flex-col gap-5 border-b border-semantic-border-layout">
                 <Field label="Silence Timeout (seconds)">
                   <NumberSpinner
                     value={data.silenceTimeout ?? 15}
@@ -13344,7 +13387,7 @@ function AdvancedSettingsAccordion({
               </div>
 
               {/* Interruption Handling \u2014 separated by divider */}
-              <div className="px-6 py-5 flex items-center gap-3">
+              <div className="px-4 sm:px-6 py-5 flex items-center gap-3">
                 <div className="flex flex-col gap-0.5 flex-1 min-w-0">
                   <span className="text-sm font-semibold text-semantic-text-primary">
                     Interruption Handling
@@ -13427,9 +13470,10 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
     };
 
     return (
+      <TooltipProvider delayDuration={300}>
       <div ref={ref} className={cn("flex flex-col min-h-screen bg-semantic-bg-ui", className)}>
         {/* Page header */}
-        <header className="flex items-center justify-between px-6 h-[76px] bg-semantic-bg-primary border-b border-semantic-border-layout shrink-0">
+        <header className="flex flex-wrap items-center justify-between gap-3 px-4 sm:px-6 min-h-[76px] py-3 bg-semantic-bg-primary border-b border-semantic-border-layout shrink-0">
           <div className="flex items-center gap-3">
             <button
               type="button"
@@ -13446,9 +13490,9 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
               {botType}
             </Badge>
           </div>
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap items-center gap-2 sm:gap-3">
             {lastUpdatedAt && (
-              <span className="text-sm text-semantic-text-muted">
+              <span className="hidden sm:inline text-sm text-semantic-text-muted">
                 Last updated at: {lastUpdatedAt}
               </span>
             )}
@@ -13469,17 +13513,17 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
           </div>
         </header>
 
-        {/* Body \u2014 two-column layout */}
-        <div className="flex flex-1 gap-6 px-6 py-6 max-w-[1220px] mx-auto w-full">
+        {/* Body \u2014 single column on mobile, two-column on large screens */}
+        <div className="flex flex-col lg:flex-row flex-1 gap-6 px-4 sm:px-6 py-6 max-w-[1220px] mx-auto w-full">
           {/* Left column */}
-          <div className="flex flex-col gap-6 flex-[3] min-w-0">
+          <div className="flex flex-col gap-6 lg:flex-[3] min-w-0">
             <WhoTheBotIs data={data} onChange={update} />
             <HowItBehaves data={data} onChange={update} />
             <FallbackPromptsAccordion data={data} onChange={update} />
           </div>
 
           {/* Right column */}
-          <div className="flex flex-col gap-6 flex-[2] min-w-0">
+          <div className="flex flex-col gap-6 lg:flex-[2] min-w-0">
             <KnowledgeBase
               files={data.knowledgeBaseFiles}
               onSaveFiles={onSaveKnowledgeFiles}
@@ -13511,6 +13555,7 @@ export const IvrBotConfig = React.forwardRef<HTMLDivElement, IvrBotConfigProps>(
           onTestApi={onTestApi}
         />
       </div>
+      </TooltipProvider>
     );
   }
 );
@@ -13521,7 +13566,7 @@ IvrBotConfig.displayName = "IvrBotConfig";
         {
           name: "create-function-modal.tsx",
           content: prefixTailwindClasses(`import * as React from "react";
-import { Trash2, ChevronDown } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import {
   Dialog,
@@ -13530,6 +13575,13 @@ import {
   DialogTitle,
 } from "../dialog";
 import { Button } from "../button";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "../select";
 import type {
   CreateFunctionModalProps,
   CreateFunctionData,
@@ -13571,64 +13623,68 @@ function KeyValueTable({
   return (
     <div className="flex flex-col gap-1.5">
       <span className="text-xs text-semantic-text-muted">{label}</span>
-      <div className="border border-semantic-border-layout rounded overflow-hidden">
-        {/* Header row */}
-        <div className="flex bg-semantic-bg-primary border-b border-semantic-border-layout">
-          <div className="flex-1 px-3 py-2.5 text-sm font-semibold text-semantic-text-muted border-r border-semantic-border-layout">
-            Key
+      <div className="w-full overflow-x-auto rounded border border-semantic-border-layout">
+        <div className="min-w-[380px]">
+          {/* Header row \u2014 always visible */}
+          <div className="flex bg-semantic-bg-ui border-b border-semantic-border-layout">
+            <div className="flex-1 px-3 py-2.5 text-sm font-semibold text-semantic-text-muted border-r border-semantic-border-layout">
+              Key
+            </div>
+            <div className="flex-[2] px-3 py-2.5 text-sm font-semibold text-semantic-text-muted">
+              Value
+            </div>
+            <div className="w-10" />
           </div>
-          <div className="flex-[2] px-3 py-2.5 text-sm font-semibold text-semantic-text-muted">
-            Value
+          {/* Data rows \u2014 scrollable vertically */}
+          <div className="max-h-[160px] overflow-y-auto [&::-webkit-scrollbar]:hidden [scrollbar-width:none]">
+            {rows.map((row) => (
+              <div
+                key={row.id}
+                className="flex border-b border-semantic-border-layout last:border-b-0"
+              >
+                <input
+                  type="text"
+                  value={row.key}
+                  onChange={(e) => handleKeyChange(row.id, e.target.value)}
+                  placeholder="Key"
+                  className="flex-1 px-3 py-2.5 text-sm text-semantic-text-primary placeholder:text-semantic-text-placeholder bg-semantic-bg-primary border-r border-semantic-border-layout outline-none focus:bg-semantic-bg-hover"
+                />
+                <input
+                  type="text"
+                  value={row.value}
+                  onChange={(e) => handleValueChange(row.id, e.target.value)}
+                  placeholder="Type {{ to add variables"
+                  className="flex-[2] px-3 py-2.5 text-sm text-semantic-text-primary placeholder:text-semantic-text-placeholder bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover"
+                />
+                <button
+                  type="button"
+                  onClick={() => handleDelete(row.id)}
+                  className="w-10 flex items-center justify-center text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors"
+                  aria-label="Delete row"
+                >
+                  <Trash2 className="size-3.5" />
+                </button>
+              </div>
+            ))}
           </div>
-          <div className="w-10" />
-        </div>
-        {/* Data rows */}
-        {rows.map((row) => (
-          <div
-            key={row.id}
-            className="flex border-b border-semantic-border-layout last:border-b-0"
-          >
+          {/* Empty input row \u2014 always visible at bottom */}
+          <div className="flex border-t border-semantic-border-layout">
             <input
               type="text"
-              value={row.key}
-              onChange={(e) => handleKeyChange(row.id, e.target.value)}
               placeholder="Key"
-              className="flex-1 px-3 py-2.5 text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary border-r border-semantic-border-layout outline-none focus:bg-semantic-bg-hover"
+              readOnly
+              onClick={handleAdd}
+              className="flex-1 px-3 py-2.5 text-sm placeholder:text-semantic-text-placeholder bg-semantic-bg-primary border-r border-semantic-border-layout outline-none cursor-pointer"
             />
             <input
               type="text"
-              value={row.value}
-              onChange={(e) => handleValueChange(row.id, e.target.value)}
               placeholder="Type {{ to add variables"
-              className="flex-[2] px-3 py-2.5 text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none focus:bg-semantic-bg-hover"
+              readOnly
+              onClick={handleAdd}
+              className="flex-[2] px-3 py-2.5 text-sm placeholder:text-semantic-text-placeholder bg-semantic-bg-primary outline-none cursor-pointer"
             />
-            <button
-              type="button"
-              onClick={() => handleDelete(row.id)}
-              className="w-10 flex items-center justify-center text-semantic-text-muted hover:text-semantic-error-primary hover:bg-semantic-error-surface transition-colors"
-              aria-label="Delete row"
-            >
-              <Trash2 className="size-3.5" />
-            </button>
+            <div className="w-10" />
           </div>
-        ))}
-        {/* Empty input row */}
-        <div className="flex">
-          <input
-            type="text"
-            placeholder="Key"
-            readOnly
-            onClick={handleAdd}
-            className="flex-1 px-3 py-2.5 text-sm placeholder:text-semantic-text-muted bg-semantic-bg-primary border-r border-semantic-border-layout outline-none cursor-pointer"
-          />
-          <input
-            type="text"
-            placeholder="Type {{ to add variables"
-            readOnly
-            onClick={handleAdd}
-            className="flex-[2] px-3 py-2.5 text-sm placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none cursor-pointer"
-          />
-          <div className="w-10" />
         </div>
       </div>
     </div>
@@ -13730,7 +13786,15 @@ export const CreateFunctionModal = React.forwardRef<
                 Functions Name{" "}
                 <span className="text-semantic-error-primary font-semibold">*</span>
               </label>
-              <div className="relative">
+              <div
+                className={cn(
+                  "flex items-center h-10 rounded border",
+                  "border-semantic-border-input bg-semantic-bg-primary",
+                  "hover:border-semantic-border-input-focus",
+                  "focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+                  "transition-shadow"
+                )}
+              >
                 <input
                   id="fn-name"
                   type="text"
@@ -13738,15 +13802,9 @@ export const CreateFunctionModal = React.forwardRef<
                   maxLength={FUNCTION_NAME_MAX}
                   onChange={(e) => setName(e.target.value)}
                   placeholder="Enter Name of the function"
-                  className={cn(
-                    "w-full h-10 px-4 py-2.5 pr-16 text-sm rounded border",
-                    "border-semantic-border-input bg-semantic-bg-primary",
-                    "text-semantic-text-primary placeholder:text-semantic-text-muted",
-                    "outline-none hover:border-semantic-border-input-focus",
-                    "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
-                  )}
+                  className="flex-1 h-full px-4 text-sm bg-transparent text-semantic-text-primary placeholder:text-semantic-text-placeholder outline-none"
                 />
-                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs italic text-semantic-text-muted">
+                <span className="px-3 shrink-0 text-xs italic text-semantic-text-muted">
                   {name.length}/{FUNCTION_NAME_MAX}
                 </span>
               </div>
@@ -13770,7 +13828,7 @@ export const CreateFunctionModal = React.forwardRef<
                 className={cn(
                   "w-full px-4 py-2.5 text-sm rounded border",
                   "border-semantic-border-input bg-semantic-bg-primary resize-none",
-                  "text-semantic-text-primary placeholder:text-semantic-text-muted",
+                  "text-semantic-text-primary placeholder:text-semantic-text-placeholder",
                   "outline-none hover:border-semantic-border-input-focus",
                   "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
                 )}
@@ -13782,6 +13840,7 @@ export const CreateFunctionModal = React.forwardRef<
                 variant="default"
                 onClick={handleNext}
                 disabled={!isStep1Valid}
+                className="w-full sm:w-auto"
               >
                 Next
               </Button>
@@ -13791,150 +13850,149 @@ export const CreateFunctionModal = React.forwardRef<
 
         {step === 2 && (
           <div className="flex flex-col gap-6">
-            {/* API URL */}
-            <div className="flex flex-col gap-1">
-              <span className="text-xs text-semantic-text-muted tracking-[0.048px]">API url</span>
-              <div className="flex h-10 border border-semantic-border-input rounded overflow-hidden hover:border-semantic-border-input-focus focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)] transition-shadow">
-                {/* Method selector */}
-                <div className="relative shrink-0">
-                  <select
-                    value={method}
-                    onChange={(e) => setMethod(e.target.value as HttpMethod)}
-                    className="h-full pl-4 pr-9 text-sm text-semantic-text-primary bg-semantic-bg-primary border-r border-semantic-border-input outline-none cursor-pointer appearance-none w-[104px]"
-                    aria-label="HTTP method"
-                  >
-                    {HTTP_METHODS.map((m) => (
-                      <option key={m} value={m}>
-                        {m}
-                      </option>
-                    ))}
-                  </select>
-                  <ChevronDown
-                    className="absolute right-3 top-1/2 -translate-y-1/2 size-3.5 text-semantic-text-muted pointer-events-none shrink-0"
-                    aria-hidden="true"
-                  />
+            {/* Horizontally scrollable form area */}
+            <div className="overflow-x-auto [&::-webkit-scrollbar]:hidden [scrollbar-width:none]">
+              <div className="flex flex-col gap-6 min-w-[440px]">
+                {/* API URL */}
+                <div className="flex flex-col gap-1">
+                  <span className="text-xs text-semantic-text-muted tracking-[0.048px]">API url</span>
+                  <div className="flex flex-row border border-semantic-border-input rounded overflow-hidden hover:border-semantic-border-input-focus focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)] transition-shadow">
+                    {/* Method selector */}
+                    <Select value={method} onValueChange={(v) => setMethod(v as HttpMethod)}>
+                      <SelectTrigger
+                        className="w-[104px] shrink-0 rounded-none border-0 border-r border-semantic-border-input focus:shadow-none"
+                        aria-label="HTTP method"
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {HTTP_METHODS.map((m) => (
+                          <SelectItem key={m} value={m}>{m}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    {/* URL input */}
+                    <input
+                      type="text"
+                      value={url}
+                      onChange={(e) => setUrl(e.target.value)}
+                      placeholder="Enter URL or Type {{ to add variables"
+                      className="flex-1 min-w-0 h-10 px-3 text-sm text-semantic-text-primary placeholder:text-semantic-text-placeholder bg-semantic-bg-primary border-0 outline-none"
+                    />
+                  </div>
                 </div>
-                <input
-                  type="text"
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  placeholder="Enter URL or Type {{ to add variables"
-                  className="flex-1 px-4 text-sm text-semantic-text-primary placeholder:text-semantic-text-muted bg-semantic-bg-primary outline-none"
-                />
-              </div>
-            </div>
 
-            {/* Tabs */}
-            <div className="flex flex-col gap-4">
-              <div className="flex gap-0 border-b border-semantic-border-layout">
-                {(["header", "queryParams", "body"] as FunctionTabType[]).map(
-                  (tab) => {
-                    const labels: Record<FunctionTabType, string> = {
-                      header: \`Header(\${tabCount.header})\`,
-                      queryParams: \`Query parameter(\${tabCount.queryParams})\`,
-                      body: "Body",
-                    };
-                    return (
-                      <button
-                        key={tab}
-                        type="button"
-                        onClick={() => setActiveTab(tab)}
-                        className={cn(
-                          "px-2.5 py-1.5 text-sm font-semibold transition-colors whitespace-nowrap",
-                          activeTab === tab
-                            ? "text-semantic-text-secondary border-b-2 border-semantic-text-secondary -mb-px"
-                            : "text-semantic-text-muted"
-                        )}
-                      >
-                        {labels[tab]}
-                      </button>
-                    );
-                  }
-                )}
-              </div>
+                {/* Tabs */}
+                <div className="flex flex-col gap-4">
+                  {/* Tabs row */}
+                  <div className="relative flex gap-8 border-b border-semantic-border-layout">
+                    {(["header", "queryParams", "body"] as FunctionTabType[]).map(
+                      (tab) => {
+                        const labels: Record<FunctionTabType, string> = {
+                          header: \`Header(\${tabCount.header})\`,
+                          queryParams: \`Query parameter(\${tabCount.queryParams})\`,
+                          body: "Body",
+                        };
+                        return (
+                          <button
+                            key={tab}
+                            type="button"
+                            onClick={() => setActiveTab(tab)}
+                            className={cn(
+                              "relative -mb-px px-2.5 py-1 pb-2 text-sm font-semibold transition-colors whitespace-nowrap",
+                              activeTab === tab
+                                ? "text-semantic-text-secondary border-b-[1.5px] border-semantic-text-secondary"
+                                : "text-semantic-text-muted"
+                            )}
+                          >
+                            {labels[tab]}
+                          </button>
+                        );
+                      }
+                    )}
+                  </div>
 
-              {/* Tab Content */}
-              {activeTab === "header" && (
-                <KeyValueTable
-                  rows={headers}
-                  onChange={setHeaders}
-                  label="Header"
-                />
-              )}
-              {activeTab === "queryParams" && (
-                <KeyValueTable
-                  rows={queryParams}
-                  onChange={setQueryParams}
-                  label="Query parameter"
-                />
-              )}
-              {activeTab === "body" && (
-                <div className="flex flex-col gap-1">
-                  <span className="text-xs text-semantic-text-muted">Body</span>
-                  <div className="relative">
-                    <textarea
-                      value={body}
-                      maxLength={BODY_MAX}
-                      onChange={(e) => setBody(e.target.value)}
-                      placeholder="Enter request body (JSON, XML etc). Type {{ to add variables"
-                      rows={6}
-                      className={cn(
-                        "w-full px-4 py-2.5 pb-7 text-sm rounded border resize-none",
-                        "border-semantic-border-input bg-semantic-bg-primary",
-                        "text-semantic-text-primary placeholder:text-semantic-text-muted",
-                        "outline-none hover:border-semantic-border-input-focus",
-                        "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
-                      )}
+                  {/* Tab Content */}
+                  {activeTab === "header" && (
+                    <KeyValueTable
+                      rows={headers}
+                      onChange={setHeaders}
+                      label="Header"
+                    />
+                  )}
+                  {activeTab === "queryParams" && (
+                    <KeyValueTable
+                      rows={queryParams}
+                      onChange={setQueryParams}
+                      label="Query parameter"
                     />
-                    <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted">
-                      {body.length}/{BODY_MAX}
+                  )}
+                  {activeTab === "body" && (
+                    <div className="flex flex-col gap-1">
+                      <span className="text-xs text-semantic-text-muted">Body</span>
+                      <div className="relative">
+                        <textarea
+                          value={body}
+                          maxLength={BODY_MAX}
+                          onChange={(e) => setBody(e.target.value)}
+                          placeholder="Enter request body (JSON, XML etc). Type {{ to add variables"
+                          rows={6}
+                          className={cn(
+                            "w-full px-4 py-2.5 pb-7 text-sm rounded border resize-none",
+                            "border-semantic-border-input bg-semantic-bg-primary",
+                            "text-semantic-text-primary placeholder:text-semantic-text-placeholder",
+                            "outline-none hover:border-semantic-border-input-focus",
+                            "focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
+                          )}
+                        />
+                        <span className="absolute bottom-2 right-3 text-xs italic text-semantic-text-muted">
+                          {body.length}/{BODY_MAX}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Test Your API */}
+                <div className="flex flex-col gap-4">
+                  <div className="flex flex-col gap-1.5">
+                    <span className="text-xs text-semantic-text-muted tracking-[0.048px]">
+                      Test Your API
+                    </span>
+                    <div className="border-t border-semantic-border-layout w-full" />
+                  </div>
+                  <div className="flex justify-end">
+                    <button
+                      type="button"
+                      onClick={handleTestApi}
+                      disabled={isTesting || !url.trim()}
+                      className="h-10 px-6 rounded text-sm font-semibold text-semantic-text-secondary bg-semantic-primary-surface disabled:opacity-50 disabled:cursor-not-allowed transition-colors hover:bg-semantic-primary-surface/80"
+                    >
+                      {isTesting ? "Testing..." : "Test API"}
+                    </button>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <span className="text-xs text-semantic-text-muted">
+                      Response from API
                     </span>
+                    <textarea
+                      readOnly
+                      value={apiResponse}
+                      rows={4}
+                      className="w-full px-3 py-2.5 text-sm rounded border border-semantic-border-layout bg-semantic-bg-primary text-semantic-text-primary resize-none outline-none"
+                      placeholder=""
+                    />
                   </div>
                 </div>
-              )}
-            </div>
-
-            {/* Test Your API */}
-            <div className="flex flex-col gap-6">
-              {/* Label stacked above full-width divider */}
-              <div className="flex flex-col gap-1.5">
-                <span className="text-xs text-semantic-text-muted tracking-[0.048px]">
-                  Test Your API
-                </span>
-                <div className="border-t border-semantic-border-layout w-full" />
-              </div>
-              {/* Test API button right-aligned */}
-              <div className="flex justify-end">
-                <button
-                  type="button"
-                  onClick={handleTestApi}
-                  disabled={isTesting || !url.trim()}
-                  className="h-10 px-6 rounded text-sm font-semibold text-semantic-text-secondary bg-semantic-primary-surface disabled:opacity-50 disabled:cursor-not-allowed transition-colors hover:bg-semantic-primary-surface/80"
-                >
-                  {isTesting ? "Testing..." : "Test API"}
-                </button>
-              </div>
-              {/* Row 3: Response from API */}
-              <div className="flex flex-col gap-1">
-                <span className="text-xs text-semantic-text-muted">
-                  Response from API
-                </span>
-                <textarea
-                  readOnly
-                  value={apiResponse}
-                  rows={4}
-                  className="w-full px-3 py-2.5 text-sm rounded border border-semantic-border-layout bg-semantic-bg-ui text-semantic-text-primary resize-none outline-none"
-                  placeholder=""
-                />
               </div>
             </div>
 
-            {/* Footer */}
-            <div className="flex justify-end gap-3">
-              <Button variant="outline" onClick={handleBack}>
+            {/* Footer \u2014 always full-width, outside the scroll area */}
+            <div className="flex flex-row justify-between gap-3">
+              <Button variant="outline" onClick={handleBack} className="flex-1 sm:flex-none sm:w-auto">
                 Back
               </Button>
-              <Button variant="default" onClick={handleSubmit}>
+              <Button variant="default" onClick={handleSubmit} className="flex-1 sm:flex-none sm:w-auto">
                 Submit
               </Button>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.204-beta.1",
+  "version": "0.0.204-beta.2",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",