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="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-2FQWjU7Q.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ChiXEUW1.css">
<script type="module" crossorigin src="/assets/index-BUUZ5n0A.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Cs_NgMMZ.css">
</head>
<body>
<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 && (
<div
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"
style={{
left: "22%",
top: activeClient === "roocode" ? "5%"
: activeClient === "cursor" ? "20%"
: activeClient === "opencode" ? "40%"
: activeClient === "zed" ? "55%"
: "65%"
}}
>
{/* Popover Header */}
<div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
<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">
{/* Modal Header */}
<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 === "cursor" && "Cursor Setup"}
{activeClient === "opencode" && "OpenCode Setup"}
@@ -637,12 +628,12 @@ function Cockpit() {
onClick={() => setActiveClient(null)}
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>
</div>
{/* Popover Guide Steps */}
<div className="text-[10px] text-muted-foreground leading-relaxed space-y-2">
{/* Modal Guide Steps */}
<div className="text-xs text-muted-foreground leading-relaxed space-y-2">
{activeClient === "roocode" && (
<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>
@@ -681,7 +672,7 @@ function Cockpit() {
{connectData.tools && (
<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">
<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
onClick={() => copySnippet(
activeClient === "roocode" ? connectData.tools.cline?.snippet :
@@ -690,13 +681,13 @@ function Cockpit() {
activeClient === "zed" ? connectData.tools.zed?.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>
</button>
</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>
{activeClient === "roocode" && connectData.tools.cline?.snippet}
{activeClient === "cursor" && connectData.tools.cursor?.snippet}
@@ -707,6 +698,14 @@ function Cockpit() {
</pre>
</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>