osobh/clawmates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Infra fleet: Tailscale + Beszel side by side (2-column responsive grid)
ci / gates (push) Successful in 6s
Details
ci / rust (push) Failing after 8s
Details
ci / frontend (push) Failing after 19s
Details
ci / e2e (push) Has been skipped
Details
ci / sandbox-k8s (push) Failing after 52s
Details

Browse Source 
Wrap the Tailscale network card + Beszel monitoring in a repeat(auto-fit,minmax(340px,1fr))
grid so they share one row as two columns (stacking when the region is narrow);
moved the bottom spacing to the grid wrapper.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-26 17:23:09 -07:00
co-authored by Claude Opus 4.8
parent 43432289fd
commit a36b2c87ac
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/dashboard/fleet/FleetConsole.tsx
+6 -3
View File
@@ -221,7 +221,7 @@ function BeszelSection() {
if (data?.connected) { if (data?.connected) {
return ( return (
<div style={{ borderRadius: 14, border: "1px solid rgba(95,208,138,.18)", background: "#0c0c0f", marginBottom: 22, padding: "13px 16px", display: "flex", alignItems: "center", gap: 11 }}> <div style={{ borderRadius: 14, border: "1px solid rgba(95,208,138,.18)", background: "#0c0c0f", padding: "13px 16px", display: "flex", alignItems: "center", gap: 11 }}>
<Activity size={16} style={{ color: "#5fd08a" }} /> <Activity size={16} style={{ color: "#5fd08a" }} />
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div style={{ fontSize: 14, fontWeight: 700 }}>Beszel monitoring</div> <div style={{ fontSize: 14, fontWeight: 700 }}>Beszel monitoring</div>
@@ -249,7 +249,7 @@ function BeszelSection() {
); );
return ( return (
<div style={{ borderRadius: 14, border: "1px solid rgba(255,255,255,.08)", background: "#0c0c0f", marginBottom: 22, padding: "13px 16px" }}> <div style={{ borderRadius: 14, border: "1px solid rgba(255,255,255,.08)", background: "#0c0c0f", padding: "13px 16px" }}>
<div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 11 }}> <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 11 }}>
<Activity size={16} style={{ color: "#5fd08a" }} /> <Activity size={16} style={{ color: "#5fd08a" }} />
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
@@ -409,7 +409,9 @@ export function FleetConsole({ view, onConnectHost, onMonitor }: { view: string;
<Stat label="CONTAINERS" value={String(containers)} tint="#5ec8d8" /> <Stat label="CONTAINERS" value={String(containers)} tint="#5ec8d8" />
</div> </div>
<div style={{ borderRadius: 14, border: "1px solid rgba(255,255,255,.08)", background: "#0c0c0f", marginBottom: 22, overflow: "hidden" }}> {/* Tailscale + Beszel sit side by side (two columns), stacking when narrow. */}
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(340px, 1fr))", gap: 14, marginBottom: 22, alignItems: "start" }}>
<div style={{ borderRadius: 14, border: "1px solid rgba(255,255,255,.08)", background: "#0c0c0f", overflow: "hidden" }}>
<div style={{ display: "flex", alignItems: "center", gap: 11, padding: "13px 16px", borderBottom: "1px solid rgba(255,255,255,.05)" }}> <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "13px 16px", borderBottom: "1px solid rgba(255,255,255,.05)" }}>
<span style={{ width: 30, height: 30, borderRadius: 8, background: "rgba(94,200,216,.1)", border: "1px solid rgba(94,200,216,.25)", display: "flex", alignItems: "center", justifyContent: "center", color: "#5ec8d8" }}><Server size={16} /></span> <span style={{ width: 30, height: 30, borderRadius: 8, background: "rgba(94,200,216,.1)", border: "1px solid rgba(94,200,216,.25)", display: "flex", alignItems: "center", justifyContent: "center", color: "#5ec8d8" }}><Server size={16} /></span>
<div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 700 }}>Tailscale network</div><div style={{ fontFamily: mono, fontSize: 10, color: "#6a6a72" }}>{ts?.connected ? `${ts.tailnet ?? "tailnet"} · ${tsOnlineN}/${tsDevices.length} online` : "not connected"}</div></div> <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 700 }}>Tailscale network</div><div style={{ fontFamily: mono, fontSize: 10, color: "#6a6a72" }}>{ts?.connected ? `${ts.tailnet ?? "tailnet"} · ${tsOnlineN}/${tsDevices.length} online` : "not connected"}</div></div>
@@ -431,6 +433,7 @@ export function FleetConsole({ view, onConnectHost, onMonitor }: { view: string;
</div> </div>
<BeszelSection /> <BeszelSection />
</div>
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}> <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
<span style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", color: "#5a5a62" }}>LOCAL HOSTS</span> <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", color: "#5a5a62" }}>LOCAL HOSTS</span>