Give automations a visual chain with conditions and SMS, and match the pipeline board to the sales mockup.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-09 13:12:13 +03:30
co-authored by Cursor
parent 48d3469eea
commit 3ec87ff912
17 changed files with 2355 additions and 410 deletions
@@ -95,10 +95,10 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
flex: 1 1 0;
flex: 1 1 17.5rem;
min-width: 17.5rem;
min-height: 420px;
padding: 0.35rem 0.15rem 0.5rem;
padding: 0.15rem 0.1rem 0.35rem;
border-radius: 18px;
border: 1px solid transparent;
background: transparent;
@@ -138,12 +138,16 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
font-size: 0.98rem;
font-weight: 800;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.head-actions {
display: flex;
align-items: center;
gap: 0.45rem;
flex: 0 0 auto;
}
.count {
@@ -154,13 +158,13 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
}
.plus {
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
border: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 8px;
border: 1.5px solid var(--accent);
display: grid;
place-items: center;
background: color-mix(in srgb, var(--accent) 14%, white);
background: #fff;
color: var(--accent);
cursor: pointer;
}
@@ -176,6 +180,7 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
flex-direction: column;
gap: 0.7rem;
flex: 1;
min-width: 0;
min-height: 4rem;
}
@@ -190,20 +195,14 @@ function onCardDrop(stageId: string, index: number, event: DragEvent) {
font-size: 0.85rem;
}
@media (max-width: 1024px) {
@container pipeline (max-width: 720px) {
.column {
flex: 0 0 auto;
width: min(320px, 86vw);
min-width: min(320px, 86vw);
flex: 0 0 min(20rem, 86cqi);
width: min(20rem, 86cqi);
min-width: min(20rem, 86cqi);
max-width: none;
min-height: 360px;
scroll-snap-align: start;
}
}
@media (max-width: 700px) {
.column {
width: 88vw;
min-width: 88vw;
min-height: 360px;
}
}
</style>