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:
@@ -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>
|
||||
|
||||
@@ -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")}
|
||||
|
||||
Reference in New Issue
Block a user