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/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={{

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