feat(ui): make dequel dashboard 100% mobile responsive

apps/agent/src/config.ts

@@ -24,4 +24,4 @@ export const config = {
 export const requireControlPlaneUrl = () => {
   if (!config.controlPlaneUrl) throw new Error("DEQUEL_CONTROL_PLANE is required");
   return config.controlPlaneUrl;
-};
+};

apps/agent/src/executor.ts

@@ -417,4 +417,4 @@ const applyRoute = async (payload: RemoteRoutePayload, signal: AbortSignal): Pro
   return { routeFile: payload.routeFile, status: payload.action === "add" ? "active" : "removed" };
 };
 
-export const validateRoutePayload = validateRoutePayloadImpl;
+export const validateRoutePayload = validateRoutePayloadImpl;

apps/agent/src/protocol.ts

@@ -55,4 +55,4 @@ export const parseP2PResponse = (raw: unknown): P2PResponse | null => {
   } catch {
     return null;
   }
-};
+};

apps/agent/src/stats.ts

@@ -55,4 +55,4 @@ const parseMemToMb = (mem: string): number => {
     case "KiB": case "KB": return val / 1024;
     default: return val;
   }
-};
+};

apps/api/src/agents/job-channel.ts

@@ -119,4 +119,4 @@ export const processAgentJobUpdate = async (serverId: string, update: Exclude<P2
 export const nextJobBatch = async (serverId: string) => {
   const job = await leaseNextAgentJob(serverId);
   return { jobs: job ? [job] : [], cancelJobIds: await listCancelledJobIds(serverId) };
-};
+};

apps/api/src/agents/stats-cache.ts

@@ -48,4 +48,4 @@ class AgentStatsCache {
   }
 }
 
-export const agentStatsCache = new AgentStatsCache();
+export const agentStatsCache = new AgentStatsCache();

apps/api/src/executors/agent.ts

@@ -100,4 +100,4 @@ export const agentExecutor: DeploymentExecutor = {
     await updateDeploymentStatus(deployment.id, "failed", { failureReason: "Cancelled" });
     await appendLog(deployment.id, "system", "Deployment cancelled by user");
   },
-};
+};

apps/api/src/executors/ssh.ts

@@ -177,4 +177,4 @@ export const sshExecutor: DeploymentExecutor = {
     await updateDeploymentStatus(deployment.id, "failed", { failureReason: "Cancelled" });
     await emitLog(deployment.id, "system", "Deployment cancelled by user (remote build may continue on the server)");
   },
-};
+};

apps/api/src/utils/validate.ts

@@ -33,7 +33,7 @@ export const validateComposeServiceMapping = (mapping: unknown): string | null =
 	if (typeof m.serviceName !== "string" || !SERVICE_NAME_RE.test(m.serviceName)) {
 		return "serviceName may only contain letters, numbers, underscores and hyphens";
 	}
-	if (m.subdomain !== undefined && m.subdomain !== null) {
+	if (m.subdomain !== undefined && m.subdomain !== null && m.subdomain !== "") {
 		if (typeof m.subdomain !== "string" || !SUBDOMAIN_RE.test(m.subdomain)) {
 			return "subdomain must be a valid hostname label (lowercase letters, numbers, hyphens)";
 		}

apps/web/src/components/databases/DatabaseCard.tsx

@@ -67,7 +67,7 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 					</Button>
 				</div>
 
-				<div className="grid grid-cols-2 gap-3 text-xs">
+				<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
 					<div className="rounded-lg border border-border bg-black/20 p-3">
 						<p className="text-zinc-500">Internal endpoint</p>
 						<p className="mt-1 break-all font-mono text-zinc-200">{database.internalHost}:{database.internalPort}</p>
@@ -92,20 +92,20 @@ export function DatabaseCard({ database, project, onChanged, onDelete }: Databas
 
 				<div className="rounded-lg border border-border bg-[#08080a] p-3">
 					<div className="flex items-center justify-between gap-3">
-						<p className="min-w-0 truncate font-mono text-[11px] text-zinc-400">
+						<p className="min-w-0 break-all font-mono text-[11px] text-zinc-400">
 							{credentials?.externalConnectionString ?? credentials?.internalConnectionString ?? "Credentials hidden"}
 						</p>
 						<div className="flex shrink-0 gap-1">
-							<button type="button" onClick={reveal} className="p-1 text-zinc-500 hover:text-zinc-200" aria-label={credentials ? "Hide credentials" : "Reveal credentials"}>
+							<button type="button" onClick={reveal} className="p-1.5 text-zinc-500 hover:text-zinc-200" aria-label={credentials ? "Hide credentials" : "Reveal credentials"}>
 								{credentials ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
 							</button>
-							{credentials && <button type="button" onClick={() => navigator.clipboard.writeText(credentials.externalConnectionString ?? credentials.internalConnectionString)} className="p-1 text-zinc-500 hover:text-zinc-200" aria-label="Copy connection string"><Copy className="h-4 w-4" /></button>}
+							{credentials && <button type="button" onClick={() => navigator.clipboard.writeText(credentials.externalConnectionString ?? credentials.internalConnectionString)} className="p-1.5 text-zinc-500 hover:text-zinc-200" aria-label="Copy connection string"><Copy className="h-4 w-4" /></button>}
 						</div>
 					</div>
 					{credentialsError && <p role="alert" className="mt-2 text-xs text-red-400">{credentialsError}</p>}
 				</div>
 
-				<div className="flex gap-2 border-t border-border pt-4">
+				<div className="flex flex-wrap gap-2 border-t border-border pt-4">
 					{database.status === "stopped" ? (
 						<Button size="sm" disabled={isBusy} onClick={() => lifecycle("start")}><Play className="mr-2 h-3.5 w-3.5" /> Start</Button>
 					) : database.status === "failed" ? (

apps/web/src/components/layout/Header.tsx

@@ -15,37 +15,39 @@ export function Header({
 	setSidebarOpen,
 }: HeaderProps) {
 	return (
-		<header className="h-14 border-b border-[#1a1a1f] bg-[#0c0c0e] flex items-center px-4 sm:px-6 gap-2 text-xs text-zinc-500">
-			<button
-				onClick={() => setSidebarOpen(true)}
-				className="lg:hidden p-1.5 -ml-1 mr-1 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors"
-				aria-label="Open sidebar"
-			>
-				<Menu className="h-4.5 w-4.5" />
-			</button>
+		<header className="h-14 border-b border-[#1a1a1f] bg-[#0c0c0e] flex items-center justify-between px-3.5 sm:px-6 gap-2 text-xs text-zinc-500 sticky top-0 z-30">
+			<div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
+				<button
+					onClick={() => setSidebarOpen(true)}
+					className="lg:hidden p-2 -ml-1 mr-1 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors"
+					aria-label="Open sidebar"
+				>
+					<Menu className="h-5 w-5" />
+				</button>
 
-			<Link to="/" className="hover:text-zinc-200 transition-colors">
-				Workspace
-			</Link>
-			<ChevronRight className="h-3 w-3 text-zinc-600" />
-			{currentProject ? (
-				<>
-					<Link
-						to="/project/$projectId"
-						params={{ projectId: currentProjectId! }}
-						search={{ tab: "deployments" }}
-						className="hover:text-zinc-200 transition-colors font-medium text-zinc-300"
-					>
-						{currentProject.name}
-					</Link>
-					<ChevronRight className="h-3 w-3 text-zinc-600" />
-					<span className="text-zinc-100 font-bold uppercase tracking-wider text-[10px] bg-zinc-800 px-1.5 py-0.5 rounded">
-						{new URLSearchParams(location.search).get("tab") || "deployments"}
-					</span>
-				</>
-			) : (
-				<span className="text-zinc-300 font-medium">Dashboard</span>
-			)}
+				<Link to="/" className="hover:text-zinc-200 transition-colors shrink-0">
+					Workspace
+				</Link>
+				<ChevronRight className="h-3 w-3 text-zinc-600 shrink-0" />
+				{currentProject ? (
+					<>
+						<Link
+							to="/project/$projectId"
+							params={{ projectId: currentProjectId! }}
+							search={{ tab: "deployments" }}
+							className="hover:text-zinc-200 transition-colors font-medium text-zinc-300 truncate max-w-[110px] sm:max-w-[200px]"
+						>
+							{currentProject.name}
+						</Link>
+						<ChevronRight className="h-3 w-3 text-zinc-600 shrink-0" />
+						<span className="text-zinc-100 font-bold uppercase tracking-wider text-[9px] sm:text-[10px] bg-zinc-800 px-1.5 py-0.5 rounded shrink-0">
+							{new URLSearchParams(location.search).get("tab") || "deployments"}
+						</span>
+					</>
+				) : (
+					<span className="text-zinc-300 font-medium truncate">Dashboard</span>
+				)}
+			</div>
 		</header>
 	);
 }

apps/web/src/components/project/alerts/AlertsTab.tsx

@@ -117,7 +117,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 				</div>
 			) : (
 				<div className="space-y-4">
-					<div className="flex items-center justify-between">
+					<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
 						<div>
 							<h2 className="text-lg font-semibold text-foreground">
 								Alert Rules
@@ -129,7 +129,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 						</div>
 						<Button
 							onClick={() => setIsOpen(true)}
-							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center gap-1.5 px-4 h-9 rounded-xl transition-all shadow-md"
+							className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold flex items-center justify-center gap-1.5 px-4 h-9 rounded-xl transition-all shadow-md w-full sm:w-auto"
 						>
 							<Plus className="h-4.5 w-4.5" /> Add Rule
 						</Button>
@@ -141,15 +141,15 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 							return (
 								<div
 									key={a.id}
-									className="flex items-center justify-between p-4 rounded-xl border border-border bg-card/40 hover:bg-card/80 transition-all gap-4 group"
+									className="flex items-start sm:items-center justify-between p-3.5 sm:p-4 rounded-xl border border-border bg-card/40 hover:bg-card/80 transition-all gap-3 group"
 								>
-									<div className="flex items-center gap-4">
-										<div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0 border border-primary/15">
+									<div className="flex items-start sm:items-center gap-3 sm:gap-4 min-w-0">
+										<div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0 border border-primary/15 mt-0.5 sm:mt-0">
 											<Icon className="h-5 w-5" />
 										</div>
-										<div>
+										<div className="min-w-0">
 											<div className="flex items-center gap-2 flex-wrap">
-												<span className="font-semibold text-sm capitalize text-foreground">
+												<span className="font-semibold text-sm capitalize text-foreground truncate">
 													{a.type.replace(
 														"_",
 														" ",
@@ -162,7 +162,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 													{a.channel}
 												</Badge>
 											</div>
-											<p className="text-xs text-muted-foreground mt-1">
+											<p className="text-xs text-muted-foreground mt-1 leading-relaxed">
 												Triggers when{" "}
 												<span className="capitalize">
 													{a.type.replace(
@@ -178,7 +178,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 											</p>
 										</div>
 									</div>
-									<div className="flex items-center gap-4">
+									<div className="flex items-center gap-2 shrink-0">
 										<button
 											type="button"
 											onClick={() =>
@@ -208,7 +208,7 @@ export function AlertsTab({ projectId }: AlertsTabProps) {
 										<Button
 											variant="ghost"
 											size="icon"
-											className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg opacity-80 group-hover:opacity-100 transition-all"
+											className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg opacity-100 sm:opacity-80 sm:group-hover:opacity-100 transition-all"
 											onClick={() =>
 												setDeletingAlertId(a.id)
 											}

apps/web/src/components/project/create/BuildStrategySection.tsx

@@ -266,7 +266,7 @@ export function BuildStrategySection({
       {/* Docker Compose Service Gateway Mapping */}
       {buildType === 'compose' && (
         <div className="space-y-4 pt-4 border-t border-[#1a1a22]">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
             <div>
               <h4 className="text-xs font-bold text-zinc-200">Compose Ingress Service Mapping</h4>
               <p className="text-[11px] text-zinc-400 mt-0.5">
@@ -276,7 +276,7 @@ export function BuildStrategySection({
             <Button
               type="button"
               onClick={addComposeServiceRow}
-              className="bg-[#1c1c24] hover:bg-[#262632] text-orange-400 text-xs border border-[#2e2e3c]"
+              className="bg-[#1c1c24] hover:bg-[#262632] text-orange-400 text-xs border border-[#2e2e3c] w-full sm:w-auto"
             >
               <Plus className="h-3.5 w-3.5 mr-1" /> Add Service
             </Button>