perf(web): improve dialog sizing and footer layout

- migrate frontend dialogs to the shared footer API so actions stay separated from scrollable body content.
- tune dialog dimensions for model analytics, prefill groups, billing history, channel model sync, and related workflows.
- update channel terminology and dialog action translations across supported locales.

web/default/src/features/usage-logs/components/dialogs/prompt-dialog.tsx

@@ -20,15 +20,9 @@ import { Copy, Check } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Dialog } from '@/components/dialog'
 
 interface PromptDialogProps {
   prompt: string
@@ -47,69 +41,68 @@ export function PromptDialog({
   const { copiedText, copyToClipboard } = useCopyToClipboard({ notify: false })
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='sm:max-w-lg'>
-        <DialogHeader>
-          <DialogTitle>{t('Prompt Details')}</DialogTitle>
-          <DialogDescription>
-            {t('View the complete prompt and its English translation')}
-          </DialogDescription>
-        </DialogHeader>
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t('Prompt Details')}
+      description={t('View the complete prompt and its English translation')}
+      contentClassName='sm:max-w-lg'
+      contentHeight='auto'
+      bodyClassName='space-y-4'
+    >
+      <ScrollArea className='max-h-[500px] pr-4'>
+        <div className='space-y-4 py-4'>
+          {/* Original Prompt */}
+          <div className='space-y-2'>
+            <Label className='text-sm font-semibold'>{t('Prompt')}</Label>
+            <div className='bg-muted/50 relative rounded-md border p-3'>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='absolute top-2 right-2 h-8 w-8 p-0'
+                onClick={() => copyToClipboard(prompt)}
+                title={t('Copy to clipboard')}
+              >
+                {copiedText === prompt ? (
+                  <Check className='size-4 text-green-600' />
+                ) : (
+                  <Copy className='size-4' />
+                )}
+              </Button>
+              <p className='pr-10 text-sm leading-relaxed break-words whitespace-pre-wrap'>
+                {prompt || '-'}
+              </p>
+            </div>
+          </div>
 
-        <ScrollArea className='max-h-[500px] pr-4'>
-          <div className='space-y-4 py-4'>
-            {/* Original Prompt */}
+          {/* English Prompt */}
+          {promptEn && (
             <div className='space-y-2'>
-              <Label className='text-sm font-semibold'>{t('Prompt')}</Label>
+              <Label className='text-sm font-semibold'>
+                {t('Prompt (EN)')}
+              </Label>
               <div className='bg-muted/50 relative rounded-md border p-3'>
                 <Button
                   variant='ghost'
                   size='sm'
                   className='absolute top-2 right-2 h-8 w-8 p-0'
-                  onClick={() => copyToClipboard(prompt)}
+                  onClick={() => copyToClipboard(promptEn)}
                   title={t('Copy to clipboard')}
                 >
-                  {copiedText === prompt ? (
+                  {copiedText === promptEn ? (
                     <Check className='size-4 text-green-600' />
                   ) : (
                     <Copy className='size-4' />
                   )}
                 </Button>
                 <p className='pr-10 text-sm leading-relaxed break-words whitespace-pre-wrap'>
-                  {prompt || '-'}
+                  {promptEn}
                 </p>
               </div>
             </div>
-
-            {/* English Prompt */}
-            {promptEn && (
-              <div className='space-y-2'>
-                <Label className='text-sm font-semibold'>
-                  {t('Prompt (EN)')}
-                </Label>
-                <div className='bg-muted/50 relative rounded-md border p-3'>
-                  <Button
-                    variant='ghost'
-                    size='sm'
-                    className='absolute top-2 right-2 h-8 w-8 p-0'
-                    onClick={() => copyToClipboard(promptEn)}
-                    title={t('Copy to clipboard')}
-                  >
-                    {copiedText === promptEn ? (
-                      <Check className='size-4 text-green-600' />
-                    ) : (
-                      <Copy className='size-4' />
-                    )}
-                  </Button>
-                  <p className='pr-10 text-sm leading-relaxed break-words whitespace-pre-wrap'>
-                    {promptEn}
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </DialogContent>
+          )}
+        </div>
+      </ScrollArea>
     </Dialog>
   )
 }