mrhid6/vantage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 22 Wiki Activity

feat(web): bottom-sheet modals and collapsing component grids

Browse Source
This commit is contained in:
mrhid6
2026-07-27 22:50:08 +01:00
parent facef270b7
commit 5dcc1bf1be
4 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/monitors/MonitorForm.tsx
+4 -4
View File
@@ -73,7 +73,7 @@ export function MonitorForm({
<div>
<label className={labelClass}>Type</label>
<div className="grid grid-cols-4 gap-2">
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
{(["http", "tcp", "icmp", "tls"] as const).map((t) => (
<button
key={t}
@@ -95,7 +95,7 @@ export function MonitorForm({
<label className={labelClass}>URL</label>
<input className={inputClass} value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com/health" required />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label className={labelClass}>Method</label>
<select className={inputClass} value={method} onChange={(e) => setMethod(e.target.value)}>
@@ -120,7 +120,7 @@ export function MonitorForm({
)}
{(type === "tcp" || type === "tls" || type === "icmp") && (
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label className={labelClass}>Host</label>
<input className={inputClass} value={host} onChange={(e) => setHost(e.target.value)} placeholder="example.com" required />
@@ -141,7 +141,7 @@ export function MonitorForm({
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label className={labelClass}>Interval (seconds)</label>
<input type="number" className={inputClass} value={intervalSec} onChange={(e) => setIntervalSec(Number(e.target.value))} min={10} />
web/components/ui/Card.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export function Card({ className, padding = true, children, ...props }: CardProp
export function CardHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
return (
<div className={clsx("mb-4 flex items-center justify-between", className)} {...props}>
<div className={clsx("mb-4 flex flex-wrap items-center justify-between gap-2", className)} {...props}>
{children}
</div>
);
web/components/ui/Modal.tsx
+2 -2
View File
@@ -25,10 +25,10 @@ export function Modal({
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
<div className="absolute inset-0 bg-black/60" onClick={onClose} />
<div
className={`relative z-10 w-full ${wide ? "max-w-2xl" : "max-w-md"} max-h-[90vh] overflow-auto rounded border border-border bg-surface shadow-panel`}
className={`relative z-10 w-full ${wide ? "sm:max-w-2xl" : "sm:max-w-md"} max-h-[85dvh] overflow-auto rounded rounded-b-none border border-b-0 border-border bg-surface shadow-panel sm:rounded sm:border-b`}
role="dialog"
aria-modal="true"
>
web/components/workflows/StepPickerModal.tsx
+2 -2
View File
@@ -129,7 +129,7 @@ export function StepPickerModal({
</div>
{showAdhocCards && (
<div className="grid grid-cols-2 gap-2.5">
<div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
<button
onClick={onAddAdhoc}
className="flex min-h-[74px] items-center justify-center gap-2 rounded border border-dashed border-border text-sm text-text-secondary hover:border-signal/55 hover:text-signal"
@@ -165,7 +165,7 @@ export function StepPickerModal({
{g.label}
<span className="h-px flex-1 bg-border" />
</div>
<div className="grid grid-cols-2 gap-2.5">
<div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
{g.steps.map((s) => (
<StepCard key={s.step_id} step={s} onAdd={() => onSelect(s.step_id)} />
))}