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
2026-02-12 12:28:42 +00:00 · 2025-03-31 10:26:07 +00:00
parent 51dddc10be
commit eda680ccdc
19 changed files with 202 additions and 88 deletions
--- a/packages/frontend/admin/src/components/ui/dialog.tsx
+++ b/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">
-        <X className="h-4 w-4" />
+      <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">
+        <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}
  />
 ));
--- a/packages/frontend/admin/src/components/ui/scroll-area.tsx
+++ b/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 />
--- a/packages/frontend/admin/src/modules/accounts/components/columns.tsx
+++ b/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
-                      size={16}
+                    <EmailIcon
+                      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"
                />
--- a/packages/frontend/admin/src/modules/accounts/components/delete-account.tsx
+++ b/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
--- a/packages/frontend/admin/src/modules/accounts/components/disable-account.tsx
+++ b/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
--- a/packages/frontend/admin/src/modules/accounts/components/discard-changes.tsx
+++ b/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>
--- a/packages/frontend/admin/src/modules/accounts/components/enable-account.tsx
+++ b/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>
--- a/packages/frontend/admin/src/modules/accounts/components/export-users-dialog.tsx
+++ b/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}
--- a/packages/frontend/admin/src/modules/accounts/components/reset-password.tsx
+++ b/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"
--- a/packages/frontend/admin/src/modules/accounts/components/user-form.tsx
+++ b/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="flex flex-col rounded-md border py-4 gap-4">
+      <div className="p-4 flex-grow overflow-y-auto space-y-[8px]">
+        <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">
-      <span>{name}</span>
+    <Label className="flex items-center justify-between p-3 text-[15px] gap-2 font-medium leading-6 overflow-hidden">
+      <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">
-      <Label className="text-sm font-medium">{label}</Label>
+    <div className="p-3">
+      <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>
  );
--- a/packages/frontend/admin/src/modules/ai/discard-changes.tsx
+++ b/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>
--- a/packages/frontend/admin/src/modules/nav/collapsible-item.tsx
+++ b/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(
-    (id: string) => {
-      const targetElement = document.getElementById(id);
-      if (targetElement) {
-        targetElement.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-        });
-      }
-      changeModule?.(title);
-    },
-    [changeModule, title]
-  );
+  const handleClick = useCallback(() => {
+    changeModule?.(title);
+  }, [changeModule, title]);
  return (
-    <Accordion type="multiple" className="w-full ">
-      <AccordionItem value="item-1" className="border-b-0 ml-7 ">
+    <Accordion type="multiple" className="w-full">
+      <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}
--- a/packages/frontend/admin/src/modules/nav/server-version.tsx
+++ b/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>
  );
 };
--- a/packages/frontend/admin/src/modules/nav/settings-item.tsx
+++ b/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}
                />
--- a/packages/frontend/admin/src/modules/nav/user-dropdown.tsx
+++ b/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">
-              <AvatarImage src={currentUser?.avatarUrl ?? undefined} />
-              <AvatarFallback>
-                <CircleUser size={32} />
-              </AvatarFallback>
-            </Avatar>
-            <div className="flex flex-col font-medium gap-1">
-              {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>
+            {currentUser ? (
+              <UserInfo
+                email={currentUser.email}
+                name={currentUser.name}
+                avatarUrl={currentUser.avatarUrl}
+              />
+            ) : null}
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem onSelect={handleLogout}>Logout</DropdownMenuItem>
--- a/packages/frontend/admin/src/modules/settings/config-input.tsx
+++ b/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
-        type="text"
+      <Textarea
        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={{
--- a/packages/frontend/admin/src/modules/settings/confirm-changes.tsx
+++ b/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>
--- a/packages/frontend/admin/src/modules/settings/index.tsx
+++ b/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}
--- a/packages/frontend/admin/src/modules/settings/runtime-setting-row.tsx
+++ b/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">