Optimize UI display issues

Fixes #321

src/pages/ApiAccessPage.tsx

@@ -11,6 +11,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { createPortal } from 'react-dom';
 import { invoke } from '@tauri-apps/api/core';
 import {
   closestCenter,
@@ -2049,7 +2050,7 @@ export function ApiProviderDialog({
         ? t('apiAccess.models.autoHint')
         : t('apiAccess.models.allHint');
 
-  return (
+  const content = (
     <>
       <div className="config-dialog-backdrop" onMouseDown={(event) => event.currentTarget === event.target && !busy && onClose()}>
       <form ref={providerDialogRef} className="config-dialog management-dialog api-provider-dialog" role="dialog" aria-modal="true" aria-labelledby="api-provider-dialog-title" onSubmit={(event) => void submit(event)}>
@@ -2257,4 +2258,6 @@ export function ApiProviderDialog({
       ) : null}
     </>
   );
+  // Keep both dialogs outside the page's query container, which can contain fixed elements in WebKit.
+  return typeof document === 'undefined' ? content : createPortal(content, document.body);
 }

src/styles.css

@@ -5108,17 +5108,16 @@ textarea:focus-visible {
   min-height: 360px;
 }
 
-.real-provider-workbench + .config-dialog-backdrop .management-dialog {
-  grid-template-rows: auto repeat(5, minmax(52px, auto)) auto;
-  height: auto;
-  max-height: min(720px, calc(100vh - 48px));
-  overflow: auto;
-}
-
-.real-provider-workbench + .config-dialog-backdrop .api-provider-dialog {
+.config-dialog.api-provider-dialog {
   grid-template-rows: auto;
   grid-auto-rows: auto;
   width: min(560px, 100%);
+  height: auto;
+  min-height: 0;
+  max-height: min(720px, calc(100vh - 48px));
+  max-height: min(720px, calc(100dvh - 48px));
+  overflow: auto;
+  overscroll-behavior: contain;
   gap: 10px;
   padding: 16px 18px;
   scrollbar-gutter: stable;