Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: convert IDE setup popover in Model Manager to viewport overlay modal to prevent clipping

Browse Source
This commit is contained in:
Hitonabi
2026-06-26 08:19:17 +02:00
parent da929845a9
commit f32e4baf5b
5 changed files with 95 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/assets/index-2FQWjU7Q.js → frontend/dist/assets/index-BUUZ5n0A.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
frontend/dist/assets/index-ChiXEUW1.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
frontend/dist/assets/index-Cs_NgMMZ.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
frontend/dist/index.html
Vendored
+2 -2
View File
@@ -7,8 +7,8 @@
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title> <title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-2FQWjU7Q.js"></script> <script type="module" crossorigin src="/assets/index-BUUZ5n0A.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ChiXEUW1.css"> <link rel="stylesheet" crossorigin href="/assets/index-Cs_NgMMZ.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/src/views/ModelsView.tsx
+20 -21
View File
@@ -611,22 +611,13 @@ function Cockpit() {
) )
})} })}
{/* FLOATING CLIENT SETUP POPOVER WINDOW */} {/* CLIENT SETUP MODAL WINDOW */}
{activeClient && connectData && ( {activeClient && connectData && (
<div <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
className="absolute z-30 md:w-96 w-[90%] rounded-2xl border border-border/80 bg-card/95 backdrop-blur-xl p-4 shadow-2xl space-y-3 flex flex-col justify-between" <div className="w-full max-w-md rounded-2xl border border-border/80 bg-card p-6 shadow-2xl space-y-4 animate-in fade-in zoom-in-95 duration-200 flex flex-col justify-between">
style={{ {/* Modal Header */}
left: "22%",
top: activeClient === "roocode" ? "5%"
: activeClient === "cursor" ? "20%"
: activeClient === "opencode" ? "40%"
: activeClient === "zed" ? "55%"
: "65%"
}}
>
{/* Popover Header */}
<div className="flex items-center justify-between border-b border-border/20 pb-2"> <div className="flex items-center justify-between border-b border-border/20 pb-2">
<span className="text-[11px] font-bold uppercase tracking-wider text-primary"> <span className="text-xs font-bold uppercase tracking-wider text-primary">
{activeClient === "roocode" && "Roo Code Setup"} {activeClient === "roocode" && "Roo Code Setup"}
{activeClient === "cursor" && "Cursor Setup"} {activeClient === "cursor" && "Cursor Setup"}
{activeClient === "opencode" && "OpenCode Setup"} {activeClient === "opencode" && "OpenCode Setup"}
@@ -637,12 +628,12 @@ function Cockpit() {
onClick={() => setActiveClient(null)} onClick={() => setActiveClient(null)}
className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer" className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer"
> >
<X className="h-3.5 w-3.5" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
{/* Popover Guide Steps */} {/* Modal Guide Steps */}
<div className="text-[10px] text-muted-foreground leading-relaxed space-y-2"> <div className="text-xs text-muted-foreground leading-relaxed space-y-2">
{activeClient === "roocode" && ( {activeClient === "roocode" && (
<ul className="list-decimal pl-4 space-y-1"> <ul className="list-decimal pl-4 space-y-1">
<li>Suche in VS Code nach der Erweiterung <strong>Roo Code</strong> und installiere sie.</li> <li>Suche in VS Code nach der Erweiterung <strong>Roo Code</strong> und installiere sie.</li>
@@ -681,7 +672,7 @@ function Cockpit() {
{connectData.tools && ( {connectData.tools && (
<div className="relative rounded-xl border border-border/40 bg-black/40 overflow-hidden mt-1 shrink-0"> <div className="relative rounded-xl border border-border/40 bg-black/40 overflow-hidden mt-1 shrink-0">
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border/20 bg-black/20"> <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/20 bg-black/20">
<span className="text-[8px] font-mono text-muted-foreground">JSON Config</span> <span className="text-[10px] font-mono text-muted-foreground">JSON Config</span>
<button <button
onClick={() => copySnippet( onClick={() => copySnippet(
activeClient === "roocode" ? connectData.tools.cline?.snippet : activeClient === "roocode" ? connectData.tools.cline?.snippet :
@@ -690,13 +681,13 @@ function Cockpit() {
activeClient === "zed" ? connectData.tools.zed?.snippet : activeClient === "zed" ? connectData.tools.zed?.snippet :
connectData.tools.continue?.snippet connectData.tools.continue?.snippet
)} )}
className="text-[9px] font-semibold text-primary hover:text-primary-foreground flex items-center gap-1 cursor-pointer" className="text-xs font-semibold text-primary hover:text-primary-foreground flex items-center gap-1 cursor-pointer"
> >
{copied ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />} {copied ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
<span>{copied ? "Kopiert" : "Kopieren"}</span> <span>{copied ? "Kopiert" : "Kopieren"}</span>
</button> </button>
</div> </div>
<pre className="p-3 max-h-36 overflow-y-auto text-[9px] font-mono text-cyan-200/90 whitespace-pre scrollbar-thin select-text"> <pre className="p-3 max-h-48 overflow-y-auto text-xs font-mono text-cyan-200/90 whitespace-pre scrollbar-thin select-text">
<code> <code>
{activeClient === "roocode" && connectData.tools.cline?.snippet} {activeClient === "roocode" && connectData.tools.cline?.snippet}
{activeClient === "cursor" && connectData.tools.cursor?.snippet} {activeClient === "cursor" && connectData.tools.cursor?.snippet}
@@ -707,6 +698,14 @@ function Cockpit() {
</pre> </pre>
</div> </div>
)} )}
<button
onClick={() => setActiveClient(null)}
className="w-full h-9 rounded-lg bg-primary text-primary-foreground hover:opacity-90 font-semibold text-xs transition-opacity cursor-pointer mt-2"
>
Schließen
</button>
</div>
</div> </div>
)} )}
</div> </div>