fix: unify dialog layout and fix content padding issues

- Fix negative margin overflow in all dialog content areas
- Standardize dialog structure with flex-col layout
- Add consistent py-4 spacing to all content areas
- Ensure proper spacing between header, content, and footer

Affected components:
- AddProviderDialog, EditProviderDialog
- McpFormModal, McpPanel
- UsageScriptModal
- SettingsDialog

All dialogs now follow unified layout pattern:
- DialogContent: flex flex-col max-h-[90vh]
- Content area: flex-1 overflow-y-auto px-6 py-4
- No negative margins that cause content overflow
This commit is contained in:
Jason
2025-10-18 16:52:02 +08:00
parent 404297cd30
commit 57552b3159
31 changed files with 306 additions and 208 deletions

View File

@@ -22,8 +22,15 @@ import { mcpApi, type AppType } from "@/lib/api";
import { McpServer, McpServerSpec } from "@/types";
import { mcpPresets, getMcpPresetWithDescription } from "@/config/mcpPresets";
import McpWizardModal from "./McpWizardModal";
import { extractErrorMessage, translateMcpBackendError } from "@/utils/errorUtils";
import { tomlToMcpServer, extractIdFromToml, mcpServerToToml } from "@/utils/tomlUtils";
import {
extractErrorMessage,
translateMcpBackendError,
} from "@/utils/errorUtils";
import {
tomlToMcpServer,
extractIdFromToml,
mcpServerToToml,
} from "@/utils/tomlUtils";
import { useMcpValidation } from "./useMcpValidation";
interface McpFormModalProps {
@@ -426,7 +433,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
</DialogHeader>
{/* Content - Scrollable */}
<div className="flex-1 overflow-y-auto -mx-6 px-6 space-y-4">
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
{/* 预设选择(仅新增时展示) */}
{!isEditing && (
<div>

View File

@@ -25,11 +25,7 @@ interface McpPanelProps {
* MCP 管理面板
* 采用与主界面一致的设计风格,右上角添加按钮,每个 MCP 占一行
*/
const McpPanel: React.FC<McpPanelProps> = ({
open,
onOpenChange,
appType,
}) => {
const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
const { t } = useTranslation();
const [isFormOpen, setIsFormOpen] = useState(false);
const [editingId, setEditingId] = useState<string | null>(null);
@@ -142,7 +138,7 @@ const McpPanel: React.FC<McpPanelProps> = ({
</div>
{/* Content - Scrollable */}
<div className="flex-1 overflow-y-auto -mx-6 px-6">
<div className="flex-1 overflow-y-auto px-6 py-4">
{loading ? (
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
{t("mcp.loading")}