fix(admin): adjust admin panel settings style (#11291)

Adjusted the style of some runtime configurations to match the new parameters.
Adjusted the style of dialog and right sidebar.

close AF-2411 AF-2412 AF-2413 AF-2422

packages/frontend/admin/src/components/ui/dialog.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@affine/admin/utils';
+import { CloseIcon } from '@blocksuite/icons/rc';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import * as React from 'react';
 
 const Dialog = DialogPrimitive.Root;
@@ -35,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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%] sm:rounded-lg',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="cursor-pointer absolute right-7 top-7 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <CloseIcon fontSize={20} color={cssVarV2('selfhost/icon/secondary')} />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -56,7 +57,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-3 text-center sm:text-left',
       className
     )}
     {...props}
@@ -85,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
+      'text-lg font-semibold tracking-tight leading-6.5',
       className
     )}
     {...props}
@@ -99,7 +100,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-[15px] text-muted-foreground leading-6', className)}
     {...props}
   />
 ));

packages/frontend/admin/src/components/ui/scroll-area.tsx

@@ -11,7 +11,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>*:first-child]:!block">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

packages/frontend/admin/src/modules/accounts/components/columns.tsx

@@ -4,10 +4,14 @@ import {
   AvatarImage,
 } from '@affine/admin/components/ui/avatar';
 import { FeatureType } from '@affine/graphql';
-import { AccountIcon, LockIcon, UnlockIcon } from '@blocksuite/icons/rc';
+import {
+  AccountIcon,
+  EmailIcon,
+  LockIcon,
+  UnlockIcon,
+} from '@blocksuite/icons/rc';
 import type { ColumnDef } from '@tanstack/react-table';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { MailIcon } from 'lucide-react';
 import {
   type Dispatch,
   type ReactNode,
@@ -201,19 +205,29 @@ export const useColumns = ({
                       color={cssVarV2('selfhost/icon/tertiary')}
                     />
                   }
-                  IconFalse={<UnlockIcon fontSize={16} />}
+                  IconFalse={
+                    <UnlockIcon
+                      fontSize={16}
+                      color={cssVarV2('toast/iconState/error')}
+                    />
+                  }
                   textTrue="Password Set"
                   textFalse="No Password"
                 />
                 <StatusItem
                   condition={user.emailVerified}
                   IconTrue={
-                    <MailIcon
+                    <EmailIcon
-                      size={16}
+                      fontSize={16}
                       color={cssVarV2('selfhost/icon/tertiary')}
                     />
                   }
-                  IconFalse={<MailIcon size={16} />}
+                  IconFalse={
+                    <EmailIcon
+                      fontSize={16}
+                      color={cssVarV2('toast/iconState/error')}
+                    />
+                  }
                   textTrue="Email Verified"
                   textFalse="Email Not Verified"
                 />

packages/frontend/admin/src/modules/accounts/components/delete-account.tsx

@@ -53,9 +53,9 @@ export const DeleteAccountDialog = ({
           value={input}
           onChange={handleInput}
           placeholder="Please type email to confirm"
-          className="placeholder:opacity-50"
+          className="placeholder:opacity-50 mt-4 h-9"
         />
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" variant="outline" size="sm" onClick={onClose}>
               Cancel

packages/frontend/admin/src/modules/accounts/components/disable-account.tsx

@@ -53,9 +53,9 @@ export const DisableAccountDialog = ({
           value={input}
           onChange={handleInput}
           placeholder="Please type email to confirm"
-          className="placeholder:opacity-50"
+          className="placeholder:opacity-50 mt-4 h-9"
         />
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" variant="outline" size="sm" onClick={onClose}>
               Cancel

packages/frontend/admin/src/modules/accounts/components/discard-changes.tsx

@@ -23,12 +23,12 @@ export const DiscardChanges = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:w-[460px]">
         <DialogHeader>
-          <DialogTitle className="leading-6.5">Discard Changes</DialogTitle>
+          <DialogTitle>Discard Changes</DialogTitle>
           <DialogDescription className="leading-6 text-[15px]">
             Changes to this user will not be saved.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" onClick={onClose} variant="outline">
               <span>Cancel</span>

packages/frontend/admin/src/modules/accounts/components/enable-account.tsx

@@ -32,7 +32,7 @@ export const EnableAccountDialog = ({
             used to log in.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" onClick={onClose} variant="outline">
               <span>Cancel</span>

packages/frontend/admin/src/modules/accounts/components/export-users-dialog.tsx

@@ -105,7 +105,7 @@ export function ExportUsersDialog({
           ))}
         </div>
 
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <Button
             type="button"
             onClick={handleExport}

packages/frontend/admin/src/modules/accounts/components/reset-password.tsx

@@ -31,7 +31,7 @@ export const ResetPasswordDialog = ({
             complete it.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="mt-4">
           <div className="flex justify-end gap-2 items-center w-full">
             <Input
               type="text"

packages/frontend/admin/src/modules/accounts/components/user-form.tsx

@@ -99,13 +99,14 @@ function UserForm({
         handleConfirm={handleConfirm}
         canSave={canSave}
       />
-      <div className="p-4 flex-grow overflow-y-auto space-y-[10px]">
+      <div className="p-4 flex-grow overflow-y-auto space-y-[8px]">
-        <div className="flex flex-col rounded-md border py-4 gap-4">
+        <div className="flex flex-col rounded-md border">
           <InputItem
-            label="Name"
+            label="User name"
             field="name"
             value={changes.name}
             onChange={setField}
+            placeholder="Enter user name"
           />
           <Separator />
           <InputItem
@@ -113,6 +114,7 @@ function UserForm({
             field="email"
             value={changes.email}
             onChange={setField}
+            placeholder="Enter email address"
           />
         </div>
 
@@ -153,8 +155,10 @@ function ToggleItem({
   );
 
   return (
-    <Label className="flex items-center justify-between px-4 py-3">
+    <Label className="flex items-center justify-between p-3 text-[15px] gap-2 font-medium leading-6 overflow-hidden">
-      <span>{name}</span>
+      <span className="overflow-hidden text-ellipsis" title={name}>
+        {name}
+      </span>
       <Switch checked={checked} onCheckedChange={onToggle} />
     </Label>
   );
@@ -165,11 +169,13 @@ function InputItem({
   field,
   value,
   onChange,
+  placeholder,
 }: {
   label: string;
   field: keyof UserInput;
   value?: string;
   onChange: (field: keyof UserInput, value: string) => void;
+  placeholder?: string;
 }) {
   const onValueChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -179,13 +185,16 @@ function InputItem({
   );
 
   return (
-    <div className="px-5 space-y-3">
+    <div className="p-3">
-      <Label className="text-sm font-medium">{label}</Label>
+      <Label className="text-[15px] leading-6 font-medium mb-1.5">
+        {label}
+      </Label>
       <Input
         type="text"
-        className="py-2 px-3 text-base font-normal"
+        className="py-2 px-3 text-[15px] font-normal h-9"
         value={value}
         onChange={onValueChange}
+        placeholder={placeholder}
       />
     </div>
   );

packages/frontend/admin/src/modules/ai/discard-changes.tsx

@@ -28,7 +28,7 @@ export const DiscardChanges = ({
             Changes to this prompt will not be saved.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" onClick={onClose} variant="outline">
               <span>Cancel</span>

packages/frontend/admin/src/modules/nav/collapsible-item.tsx

@@ -7,6 +7,9 @@ import {
 import { useCallback } from 'react';
 import { NavLink } from 'react-router-dom';
 
+import { buttonVariants } from '../../components/ui/button';
+import { cn } from '../../utils';
+
 export const CollapsibleItem = ({
   title,
   changeModule,
@@ -14,22 +17,12 @@ export const CollapsibleItem = ({
   title: string;
   changeModule?: (module: string) => void;
 }) => {
-  const handleClick = useCallback(
+  const handleClick = useCallback(() => {
-    (id: string) => {
+    changeModule?.(title);
-      const targetElement = document.getElementById(id);
+  }, [changeModule, title]);
-      if (targetElement) {
-        targetElement.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-        });
-      }
-      changeModule?.(title);
-    },
-    [changeModule, title]
-  );
   return (
-    <Accordion type="multiple" className="w-full ">
+    <Accordion type="multiple" className="w-full">
-      <AccordionItem value="item-1" className="border-b-0 ml-7 ">
+      <AccordionItem value="item-1" className="border-b-0 ml-7">
         <NavLink
           to={`/admin/settings/${title}`}
           className={({ isActive }) => {
@@ -39,7 +32,7 @@ export const CollapsibleItem = ({
           }}
         >
           <AccordionTrigger
-            onClick={() => handleClick(title)}
+            onClick={handleClick}
             className="py-2 px-2 rounded [&[data-state=closed]>svg]:rotate-270 [&[data-state=open]>svg]:rotate-360"
           >
             {title}
@@ -50,6 +43,36 @@ export const CollapsibleItem = ({
   );
 };
 
+export const NormalSubItem = ({
+  title,
+  changeModule,
+}: {
+  title: string;
+  changeModule?: (module: string) => void;
+}) => {
+  const handleClick = useCallback(() => {
+    changeModule?.(title);
+  }, [changeModule, title]);
+  return (
+    <div className="w-full flex">
+      <NavLink
+        to={`/admin/settings/${title}`}
+        onClick={handleClick}
+        className={({ isActive }) => {
+          return cn(
+            buttonVariants({
+              variant: 'ghost',
+              className: `ml-8 px-2 w-full justify-start ${isActive ? 'bg-zinc-100' : ''}`,
+            })
+          );
+        }}
+      >
+        {title}
+      </NavLink>
+    </div>
+  );
+};
+
 export const OtherModules = ({
   moduleList,
   changeModule,
@@ -58,14 +81,14 @@ export const OtherModules = ({
   changeModule?: (module: string) => void;
 }) => {
   return (
-    <Accordion type="multiple" className="w-full ">
+    <Accordion type="multiple" className="w-full">
       <AccordionItem value="item-1" className="border-b-0">
-        <AccordionTrigger className="ml-7 py-2 px-2 rounded [&[data-state=closed]>svg]:rotate-270 [&[data-state=open]>svg]:rotate-360">
+        <AccordionTrigger className="ml-8 py-2 px-2 rounded [&[data-state=closed]>svg]:rotate-270 [&[data-state=open]>svg]:rotate-360">
           Other
         </AccordionTrigger>
-        <AccordionContent className="flex flex-col gap-2 py-1">
+        <AccordionContent className="flex flex-col gap-1 py-1">
           {moduleList.map(module => (
-            <CollapsibleItem
+            <NormalSubItem
               key={module}
               title={module}
               changeModule={changeModule}

packages/frontend/admin/src/modules/nav/server-version.tsx

@@ -33,12 +33,15 @@ export const ServerVersion = () => {
   }
   return (
     <div
-      className="flex items-center justify-between pt-2 border-t px-2 text-xs"
+      className="inline-flex items-center justify-between pt-2 border-t px-2 text-xs flex-nowrap gap-1"
       style={{
         color: cssVarV2('text/tertiary'),
       }}
     >
-      ServerVersion<span>v{version}</span>
+      <span>ServerVersion</span>
+      <span className="overflow-hidden text-ellipsis" title={version}>
+        v{version}
+      </span>
     </div>
   );
 };

packages/frontend/admin/src/modules/nav/settings-item.tsx

@@ -13,7 +13,7 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { NavLink } from 'react-router-dom';
 
 import { ALL_CONFIGURABLE_MODULES } from '../settings/config';
-import { CollapsibleItem, OtherModules } from './collapsible-item';
+import { NormalSubItem, OtherModules } from './collapsible-item';
 import { useNav } from './context';
 
 const authModule = ALL_CONFIGURABLE_MODULES.find(module => module === 'auth');
@@ -53,13 +53,35 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
             </NavigationMenuPrimitive.Trigger>
             <NavigationMenuPrimitive.Content>
               <ul
-                className="border rounded-lg w-full flex flex-col p-1"
+                className="border rounded-lg w-full flex flex-col p-1 min-w-[160px] max-h-[200px] overflow-y-auto"
                 style={{
                   backgroundColor: cssVarV2('layer/background/overlayPanel'),
                   borderColor: cssVarV2('layer/insideBorder/blackBorder'),
                 }}
               >
-                {ALL_CONFIGURABLE_MODULES.map(module => (
+                {authModule ? (
+                  <li key={authModule} className="flex">
+                    <NavLink
+                      to={`/admin/settings/${authModule}`}
+                      className={cn(
+                        buttonVariants({
+                          variant: 'ghost',
+                          className:
+                            'p-2 rounded-[6px] text-[14px] w-full justify-start font-normal',
+                        })
+                      )}
+                      style={({ isActive }) => ({
+                        backgroundColor: isActive
+                          ? cssVarV2('selfhost/button/sidebarButton/bg/select')
+                          : undefined,
+                      })}
+                      onClick={() => setCurrentModule?.(authModule)}
+                    >
+                      {authModule}
+                    </NavLink>
+                  </li>
+                ) : null}
+                {otherModules.map(module => (
                   <li key={module} className="flex">
                     <NavLink
                       to={`/admin/settings/${module}`}
@@ -67,7 +89,7 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
                         buttonVariants({
                           variant: 'ghost',
                           className:
-                            'p-1.5 rounded-[6px] text-[14px] w-full justify-start',
+                            'p-2 rounded-[6px] text-[14px] w-full justify-start font-normal',
                         })
                       )}
                       style={({ isActive }) => ({
@@ -91,7 +113,7 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
   }
 
   return (
-    <Accordion type="multiple" className="w-full h-full  overflow-hidden">
+    <Accordion type="multiple" className="w-full overflow-hidden">
       <AccordionItem
         value="item-1"
         className="border-b-0 h-full flex flex-col gap-1 w-full"
@@ -130,7 +152,7 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
           >
             <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>div]:!block">
               {authModule && (
-                <CollapsibleItem
+                <NormalSubItem
                   title={authModule}
                   changeModule={setCurrentModule}
                 />

packages/frontend/admin/src/modules/nav/user-dropdown.tsx

@@ -24,6 +24,40 @@ interface UserDropdownProps {
   isCollapsed: boolean;
 }
 
+const UserInfo = ({
+  name,
+  email,
+  avatarUrl,
+}: {
+  email: string;
+  avatarUrl: string | null;
+  name?: string;
+}) => {
+  return (
+    <>
+      <Avatar className="w-8 h-8">
+        <AvatarImage src={avatarUrl ?? undefined} />
+        <AvatarFallback>
+          <CircleUser size={32} />
+        </AvatarFallback>
+      </Avatar>
+      <div className="flex flex-col font-medium gap-1">
+        {name ?? email.split('@')[0]}
+        <span
+          className="w-fit rounded px-2 py-0.5 text-xs h-5 border text-center inline-flex items-center font-normal"
+          style={{
+            borderRadius: '4px',
+            backgroundColor: cssVarV2('chip/label/blue'),
+            borderColor: cssVarV2('layer/insideBorder/border'),
+          }}
+        >
+          Admin
+        </span>
+      </div>
+    </>
+  );
+};
+
 export function UserDropdown({ isCollapsed }: UserDropdownProps) {
   const currentUser = useCurrentUser();
   const relative = useRevalidateCurrentUser();
@@ -53,7 +87,15 @@ export function UserDropdown({ isCollapsed }: UserDropdownProps) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" side="right">
-          <DropdownMenuLabel>{currentUser?.name}</DropdownMenuLabel>
+          <DropdownMenuLabel className="flex items-center gap-2">
+            {currentUser ? (
+              <UserInfo
+                email={currentUser.email}
+                name={currentUser.name}
+                avatarUrl={currentUser.avatarUrl}
+              />
+            ) : null}
+          </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={handleLogout}>Logout</DropdownMenuItem>
         </DropdownMenuContent>
@@ -104,25 +146,13 @@ export function UserDropdown({ isCollapsed }: UserDropdownProps) {
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" side="right">
           <DropdownMenuLabel className="flex items-center gap-2">
-            <Avatar className="w-8 h-8">
+            {currentUser ? (
-              <AvatarImage src={currentUser?.avatarUrl ?? undefined} />
+              <UserInfo
-              <AvatarFallback>
+                email={currentUser.email}
-                <CircleUser size={32} />
+                name={currentUser.name}
-              </AvatarFallback>
+                avatarUrl={currentUser.avatarUrl}
-            </Avatar>
+              />
-            <div className="flex flex-col font-medium gap-1">
+            ) : null}
-              {currentUser?.name ?? currentUser?.email.split('@')[0]}
-              <span
-                className="w-fit rounded px-2 py-0.5 text-xs h-5 border text-center inline-flex items-center font-normal"
-                style={{
-                  borderRadius: '4px',
-                  backgroundColor: cssVarV2('chip/label/blue'),
-                  borderColor: cssVarV2('layer/insideBorder/border'),
-                }}
-              >
-                Admin
-              </span>
-            </div>
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={handleLogout}>Logout</DropdownMenuItem>

packages/frontend/admin/src/modules/settings/config-input.tsx

@@ -2,6 +2,7 @@ import { Input } from '@affine/admin/components/ui/input';
 import { Switch } from '@affine/admin/components/ui/switch';
 import { useCallback, useState } from 'react';
 
+import { Textarea } from '../../components/ui/textarea';
 import { isEqual } from './utils';
 
 interface ConfigInputProps {
@@ -59,7 +60,7 @@ const Inputs: Record<
     );
   },
   JSON: function ObjectInput({ defaultValue, onChange }) {
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       try {
         const value = JSON.parse(e.target.value);
         onChange(value);
@@ -67,10 +68,10 @@ const Inputs: Record<
     };
 
     return (
-      <Input
+      <Textarea
-        type="text"
         defaultValue={JSON.stringify(defaultValue)}
         onChange={handleInputChange}
+        className="w-full"
       />
     );
   },
@@ -98,9 +99,15 @@ export const ConfigInput = ({
   const isValueEqual = isEqual(value, defaultValue);
 
   return (
-    <div>
+    <div className="flex flex-col items-end gap-2 w-full">
       <Input defaultValue={defaultValue} onChange={onValueChange} />
-      <div style={{ opacity: isValueEqual ? 0 : 1 }}>
+      <div
+        className="w-full break-words"
+        style={{
+          opacity: isValueEqual ? 0 : 1,
+          height: isValueEqual ? 0 : 'auto',
+        }}
+      >
         <span
           className="line-through"
           style={{

packages/frontend/admin/src/modules/settings/confirm-changes.tsx

@@ -40,7 +40,7 @@ export const ConfirmChanges = ({
           </DialogDescription>
         </DialogHeader>
         {modifiedKeys.length > 0 ? (
-          <pre className="flex flex-col text-sm bg-zinc-100 gap-1 min-h-[64px] rounded-md p-[12px_16px_16px_12px] mt-2 overflow-hidden">
+          <pre className="flex flex-col text-sm bg-zinc-100 gap-1 min-h-[64px] rounded-md p-[12px_16px_16px_12px] mt-2 overflow-auto">
             <p>{'{'}</p>
             {modifiedKeys.map(key => (
               <p key={key}>
@@ -70,7 +70,7 @@ export const ConfirmChanges = ({
         ) : (
           'There is no change.'
         )}
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end items-center w-full gap-2">
             <Button type="button" onClick={onClose} variant="outline">
               <span>Cancel</span>

packages/frontend/admin/src/modules/settings/index.tsx

@@ -106,6 +106,9 @@ export const AdminPanel = ({
                       key={field}
                       id={field}
                       description={desc}
+                      orientation={
+                        type === 'Boolean' ? 'horizontal' : 'vertical'
+                      }
                     >
                       <ConfigInput
                         module={module}

packages/frontend/admin/src/modules/settings/runtime-setting-row.tsx

@@ -3,15 +3,17 @@ import { type ReactNode } from 'react';
 export const RuntimeSettingRow = ({
   id,
   description,
+  orientation = 'horizontal',
   children,
 }: {
   id: string;
   description: string;
+  orientation?: 'horizontal' | 'vertical';
   children: ReactNode;
 }) => {
   return (
     <div
-      className="flex justify-between flex-grow overflow-y-auto space-y-[10px] gap-5 "
+      className={`flex justify-between flex-grow space-y-[10px] gap-5 ${orientation === 'vertical' ? 'flex-col' : 'flex-row'}`}
       id={id}
     >
       <div className="flex flex-col gap-1">