Merge pull request #3407 from mhbdev/fix-ui-deployments-page

UI responsiveness in Deployments tab
This commit is contained in:
Mauricio Siu
2026-01-12 10:14:32 -06:00
committed by GitHub

View File

@@ -256,9 +256,9 @@ export const ShowDeployments = ({
return ( return (
<div <div
key={deployment.deploymentId} key={deployment.deploymentId}
className="flex items-center justify-between rounded-lg border p-4 gap-2" className="flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between"
> >
<div className="flex flex-col"> <div className="flex flex-1 flex-col min-w-0">
<span className="flex items-center gap-4 font-medium capitalize text-foreground"> <span className="flex items-center gap-4 font-medium capitalize text-foreground">
{index + 1}. {deployment.status} {index + 1}. {deployment.status}
<StatusTooltip <StatusTooltip
@@ -313,8 +313,8 @@ export const ShowDeployments = ({
)} )}
</div> </div>
</div> </div>
<div className="flex flex-col items-end gap-2 max-w-[300px] w-full justify-start"> <div className="flex w-full flex-col items-start gap-2 sm:w-auto sm:max-w-[300px] sm:items-end sm:justify-start">
<div className="text-sm capitalize text-muted-foreground flex items-center gap-2"> <div className="text-sm capitalize text-muted-foreground flex flex-wrap items-center gap-2">
<DateTooltip date={deployment.createdAt} /> <DateTooltip date={deployment.createdAt} />
{deployment.startedAt && deployment.finishedAt && ( {deployment.startedAt && deployment.finishedAt && (
<Badge <Badge
@@ -333,7 +333,7 @@ export const ShowDeployments = ({
)} )}
</div> </div>
<div className="flex flex-row items-center gap-2"> <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center sm:justify-end">
{deployment.pid && deployment.status === "running" && ( {deployment.pid && deployment.status === "running" && (
<DialogAction <DialogAction
title="Kill Process" title="Kill Process"
@@ -355,6 +355,7 @@ export const ShowDeployments = ({
variant="destructive" variant="destructive"
size="sm" size="sm"
isLoading={isKillingProcess} isLoading={isKillingProcess}
className="w-full sm:w-auto"
> >
Kill Process Kill Process
</Button> </Button>
@@ -364,6 +365,7 @@ export const ShowDeployments = ({
onClick={() => { onClick={() => {
setActiveLog(deployment); setActiveLog(deployment);
}} }}
className="w-full sm:w-auto"
> >
View View
</Button> </Button>
@@ -405,6 +407,7 @@ export const ShowDeployments = ({
variant="secondary" variant="secondary"
size="sm" size="sm"
isLoading={isRollingBack} isLoading={isRollingBack}
className="w-full sm:w-auto"
> >
<RefreshCcw className="size-4 text-primary group-hover:text-red-500" /> <RefreshCcw className="size-4 text-primary group-hover:text-red-500" />
Rollback Rollback