fix: fixed height and width issue

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/ratelimit-setup.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { Gauge, Trash } from "@unkey/icons";
 import { Button, FormInput } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
 import { useEffect } from "react";
 import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
 import type { RatelimitFormValues, RatelimitItem } from "../create-key.schema";
@@ -88,7 +89,10 @@ export const RatelimitSetup = () => {
           <div key={field.id} className="space-y-4 w-full border-t border-grayA-3 py-6">
             <div className="flex items-center gap-[14px] w-full">
               <FormInput
-                className="[&_input:first-of-type]:h-[36px] w-full"
+                className={cn(
+                  "[&_input:first-of-type]:h-[36px]",
+                  fields.length <= 1 ? "w-full" : "flex-1",
+                )}
                 placeholder="Default"
                 type="text"
                 label="Name"
@@ -98,20 +102,20 @@ export const RatelimitSetup = () => {
                 readOnly={!ratelimitEnabled}
                 {...register(`ratelimit.data.${index}.name`)}
               />
+
               {fields.length > 1 ? (
                 <Button
                   variant="ghost"
                   color="danger"
-                  className="bg-errorA-4"
+                  className="bg-errorA-4 size-[34px] rounded-lg"
                   onClick={() => remove(index)}
                   type="button"
                 >
                   <Trash size="sm-regular" className="text-error-11" />
                 </Button>
-              ) : (
-                <div className="w-[36px] h-[36px] invisible" />
-              )}
+              ) : null}
             </div>
+
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <FormInput
                 className="hidden"
@@ -132,23 +136,19 @@ export const RatelimitSetup = () => {
                 readOnly={!ratelimitEnabled}
                 {...register(`ratelimit.data.${index}.limit`)}
               />
-              <div className="flex items-center gap-4">
-                <FormInput
-                  className="[&_input:first-of-type]:h-[36px] w-full"
-                  label="Refill Interval (ms)"
-                  placeholder="1000"
-                  inputMode="numeric"
-                  type="number"
-                  description="Time window in milliseconds"
-                  error={errors.ratelimit?.data?.[index]?.refillInterval?.message}
-                  disabled={!ratelimitEnabled}
-                  readOnly={!ratelimitEnabled}
-                  {...register(`ratelimit.data.${index}.refillInterval`)}
-                />
-                <Button variant="ghost" color="danger" className="bg-errorA-4 invisible">
-                  <Trash size="sm-regular" className="text-error-11" />
-                </Button>
-              </div>
+
+              <FormInput
+                className="[&_input:first-of-type]:h-[36px] w-full"
+                label="Refill Interval (ms)"
+                placeholder="1000"
+                inputMode="numeric"
+                type="number"
+                description="Time window in milliseconds"
+                error={errors.ratelimit?.data?.[index]?.refillInterval?.message}
+                disabled={!ratelimitEnabled}
+                readOnly={!ratelimitEnabled}
+                {...register(`ratelimit.data.${index}.refillInterval`)}
+              />
             </div>
           </div>
         ))}

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx

@@ -151,7 +151,7 @@ export const CreateKeyDialog = ({
           <NavigableDialogRoot
             isOpen={isSettingsOpen}
             onOpenChange={handleOpenChange}
-            dialogClassName="!min-w-[760px] max-h-[90vh] overflow-y-auto"
+            dialogClassName="w-[90%] md:w-[70%] lg:w-[70%] xl:w-[50%] 2xl:w-[45%] max-w-[940px] max-h-[90vh] sm:max-h-[90vh] md:max-h-[70vh] lg:max-h-[90vh] xl:max-h-[80vh]"
           >
             <NavigableDialogHeader
               title="New Key"
@@ -171,7 +171,6 @@ export const CreateKeyDialog = ({
                   id: section.id,
                   content: section.content(),
                 }))}
-                className="min-h-[600px]"
               />
             </NavigableDialogBody>
             <NavigableDialogFooter>

apps/dashboard/components/dialog-container/navigable-dialog.tsx

@@ -62,7 +62,7 @@ export function NavigableDialogRoot<TStepName extends string>({
       <Dialog open={isOpen} onOpenChange={onOpenChange}>
         <DialogContent
           className={cn(
-            "drop-shadow-2xl border-grayA-4 overflow-hidden !rounded-2xl p-0 gap-0",
+            "drop-shadow-2xl border-grayA-4 overflow-hidden !rounded-2xl p-0 gap-0 flex flex-col max-h-[90vh]",
             dialogClassName,
           )}
           onOpenAutoFocus={(e) => {
@@ -199,7 +199,6 @@ export function NavigableDialogNav<TStepName extends string>({
   );
 }
 
-// Content area component
 export function NavigableDialogContent<TStepName extends string>({
   items,
   className,
@@ -211,21 +210,41 @@ export function NavigableDialogContent<TStepName extends string>({
   className?: string;
 }) {
   const { activeId } = useNavigableDialog<TStepName>();
-
   return (
     <div className="flex-1 min-w-0 overflow-y-auto">
-      <DefaultDialogContentArea className={cn(className)}>
-        {items.map((item) => (
-          <div key={item.id} className={cn("w-full", item.id !== activeId && "hidden")}>
-            {item.content}
-          </div>
-        ))}
+      <DefaultDialogContentArea className={cn("min-h-[70vh] xl:min-h-[50vh] h-full", className)}>
+        <div className="h-full relative">
+          {items.map((item) => {
+            const isActive = item.id === activeId;
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  "w-full absolute inset-0 overflow-y-auto scrollbar-hide",
+                  "transition-all duration-300 ease-out",
+                  isActive
+                    ? "opacity-100 translate-x-0 z-10"
+                    : "opacity-0 translate-x-5 z-0 pointer-events-none",
+                )}
+                aria-hidden={!isActive}
+              >
+                <div className="h-full">{item.content}</div>
+              </div>
+            );
+          })}
+        </div>
       </DefaultDialogContentArea>
     </div>
   );
 }
 
 // Main container for the nav and content
-export function NavigableDialogBody({ children }: { children: ReactNode }) {
-  return <div className="flex overflow-hidden">{children}</div>;
+export function NavigableDialogBody({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("flex flex-grow overflow-hidden", className)}>{children}</div>;
 }