wisecolt/Wisecolt-CI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): deployment modal layout düzenle

Browse Source 
Modal ve sekmeler için sabit yükseklikler eklenerek
layout tutarlılığı sağlandı ve taşma sorunları giderildi.
This commit is contained in:
wisecolt
2026-01-19 16:48:11 +03:00
parent fd020bd9d8
commit 0092c28571
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/ui/tabs.tsx
View File

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List <TabsPrimitive.List
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}

27
frontend/src/pages/DeploymentsPage.tsx
View File

@@ -435,7 +435,7 @@ export function DeploymentsPage() {
{modalOpen && ( {modalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-8"> <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="flex items-center justify-between border-b border-border px-5 py-4">
<div className="space-y-1"> <div className="space-y-1">
<div className="text-lg font-semibold text-foreground"> <div className="text-lg font-semibold text-foreground">
@@ -450,16 +450,16 @@ export function DeploymentsPage() {
</Button> </Button>
</div> </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"> <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
<TabsList> <TabsList>
<TabsTrigger value="details">Genel</TabsTrigger> <TabsTrigger value="details">Genel</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger> <TabsTrigger value="environment">Environment</TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="details" className="space-y-4"> <TabsContent value="details" className="h-[420px] space-y-4">
{!isEdit && ( {!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. Repo URL girildiğinde branch ve compose dosyaları listelenir.
</div> </div>
)} )}
@@ -513,7 +513,7 @@ export function DeploymentsPage() {
required required
/> />
)} )}
<div className="text-xs text-muted-foreground"> <div className="h-[1.25rem] text-xs text-muted-foreground">
{branchLoading {branchLoading
? "Branch listesi alınıyor..." ? "Branch listesi alınıyor..."
: branchOptions.length > 0 : branchOptions.length > 0
@@ -549,7 +549,7 @@ export function DeploymentsPage() {
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<div className="text-xs text-muted-foreground"> <div className="h-[1.25rem] text-xs text-muted-foreground">
{composeLoading {composeLoading
? "Compose dosyaları alınıyor..." ? "Compose dosyaları alınıyor..."
: composeOptions.length > 0 : composeOptions.length > 0
@@ -572,7 +572,7 @@ export function DeploymentsPage() {
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="environment" className="space-y-4"> <TabsContent value="environment" className="h-[420px] space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>.env.example</Label> <Label>.env.example</Label>
{envExamples.length > 0 ? ( {envExamples.length > 0 ? (
@@ -598,12 +598,19 @@ export function DeploymentsPage() {
</SelectContent> </SelectContent>
</Select> </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 {envLoading
? "Env example dosyaları alınıyor..." ? "Env example dosyaları alınıyor..."
: "Repo içinde .env.example bulunamadı."} : "Repo içinde .env.example bulunamadı."}
</div> </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>
<div className="space-y-2"> <div className="space-y-2">
@@ -622,13 +629,13 @@ export function DeploymentsPage() {
id="env-content" id="env-content"
value={envContent} value={envContent}
onChange={(e) => setEnvContent(e.target.value)} 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={ style={
showEnv ? undefined : ({ WebkitTextSecurity: "disc" } as CSSProperties) showEnv ? undefined : ({ WebkitTextSecurity: "disc" } as CSSProperties)
} }
placeholder="ENV içerikleri burada listelenir." 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. Kaydedince içerik deployment kök dizinine <span className="font-mono">.env</span> olarak yazılır.
</div> </div>
</div> </div>