From 0092c28571b6534a297161b738e1fa479e61b655 Mon Sep 17 00:00:00 2001
From: wisecolt <wisecolt@gmail.com>
Date: Mon, 19 Jan 2026 16:48:11 +0300
Subject: [PATCH] =?UTF-8?q?fix(ui):=20deployment=20modal=20layout=20d?=
 =?UTF-8?q?=C3=BCzenle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modal ve sekmeler için sabit yükseklikler eklenerek
layout tutarlılığı sağlandı ve taşma sorunları giderildi.
---
 frontend/src/components/ui/tabs.tsx    |  4 ++--
 frontend/src/pages/DeploymentsPage.tsx | 27 ++++++++++++++++----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 3607692..5f4e417 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-lg bg-muted/50 p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     )}
     {...props}
diff --git a/frontend/src/pages/DeploymentsPage.tsx b/frontend/src/pages/DeploymentsPage.tsx
index 2584dae..f701194 100644
--- a/frontend/src/pages/DeploymentsPage.tsx
+++ b/frontend/src/pages/DeploymentsPage.tsx
@@ -435,7 +435,7 @@ export function DeploymentsPage() {
 
       {modalOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-8">
-          <div className="w-full max-w-lg overflow-hidden rounded-lg border border-border bg-card card-shadow">
+          <div className="flex h-[620px] w-full max-w-lg flex-col overflow-hidden rounded-lg border border-border bg-card card-shadow">
             <div className="flex items-center justify-between border-b border-border px-5 py-4">
               <div className="space-y-1">
                 <div className="text-lg font-semibold text-foreground">
@@ -450,16 +450,16 @@ export function DeploymentsPage() {
               </Button>
             </div>
 
-            <div className="max-h-[70vh] overflow-y-auto px-5 py-4">
+            <div className="flex-1 overflow-hidden px-5 py-4">
               <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
                 <TabsList>
                   <TabsTrigger value="details">Genel</TabsTrigger>
                   <TabsTrigger value="environment">Environment</TabsTrigger>
                 </TabsList>
 
-                <TabsContent value="details" className="space-y-4">
+                <TabsContent value="details" className="h-[420px] space-y-4">
                   {!isEdit && (
-                    <div className="text-xs text-muted-foreground">
+                    <div className="h-[1.25rem] text-xs text-muted-foreground">
                       Repo URL girildiğinde branch ve compose dosyaları listelenir.
                     </div>
                   )}
@@ -513,7 +513,7 @@ export function DeploymentsPage() {
                           required
                         />
                       )}
-                      <div className="text-xs text-muted-foreground">
+                      <div className="h-[1.25rem] text-xs text-muted-foreground">
                         {branchLoading
                           ? "Branch listesi alınıyor..."
                           : branchOptions.length > 0
@@ -549,7 +549,7 @@ export function DeploymentsPage() {
                           ))}
                         </SelectContent>
                       </Select>
-                      <div className="text-xs text-muted-foreground">
+                      <div className="h-[1.25rem] text-xs text-muted-foreground">
                         {composeLoading
                           ? "Compose dosyaları alınıyor..."
                           : composeOptions.length > 0
@@ -572,7 +572,7 @@ export function DeploymentsPage() {
                   </div>
                 </TabsContent>
 
-                <TabsContent value="environment" className="space-y-4">
+                <TabsContent value="environment" className="h-[420px] space-y-4">
                   <div className="space-y-2">
                     <Label>.env.example</Label>
                     {envExamples.length > 0 ? (
@@ -598,12 +598,19 @@ export function DeploymentsPage() {
                         </SelectContent>
                       </Select>
                     ) : (
-                      <div className="rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground">
+                      <div className="h-[2.5rem] rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground">
                         {envLoading
                           ? "Env example dosyaları alınıyor..."
                           : "Repo içinde .env.example bulunamadı."}
                       </div>
                     )}
+                    <div className="h-[1.25rem] text-xs text-muted-foreground">
+                      {envExamples.length > 0
+                        ? "Repo üzerindeki env example dosyaları listelendi."
+                        : envLoading
+                          ? "Env example dosyaları alınıyor..."
+                          : "Repo içinde .env.example bulunamadı."}
+                    </div>
                   </div>
 
                   <div className="space-y-2">
@@ -622,13 +629,13 @@ export function DeploymentsPage() {
                       id="env-content"
                       value={envContent}
                       onChange={(e) => setEnvContent(e.target.value)}
-                      className="min-h-[180px] w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm font-mono text-foreground shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="h-[180px] w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm font-mono text-foreground shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       style={
                         showEnv ? undefined : ({ WebkitTextSecurity: "disc" } as CSSProperties)
                       }
                       placeholder="ENV içerikleri burada listelenir."
                     />
-                    <div className="text-xs text-muted-foreground">
+                    <div className="min-h-[1.25rem] text-xs text-muted-foreground">
                       Kaydedince içerik deployment kök dizinine <span className="font-mono">.env</span> olarak yazılır.
                     </div>
                   </div>