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>

apps/web/src/components/pipeline/AddDealButton.vue

@@ -18,7 +18,7 @@ const emit = defineEmits<{
     class="add-deal"
     :style="{
       '--add-color': PIPELINE_ACCENT[accent].text,
-      '--add-border': PIPELINE_ACCENT[accent].border,
+      '--add-border': PIPELINE_ACCENT[accent].solid,
       '--add-soft': PIPELINE_ACCENT[accent].soft,
     }"
     aria-label="افزودن معامله"
@@ -34,16 +34,17 @@ const emit = defineEmits<{
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.35rem;
+  gap: 0.4rem;
   width: 100%;
-  margin-top: 0.35rem;
-  padding: 0.85rem 1rem;
+  margin-top: 0.15rem;
+  padding: 0.9rem 1rem;
   border: 1.5px dashed var(--add-border);
   border-radius: 16px;
-  background: color-mix(in srgb, var(--add-soft) 55%, white);
+  background: #fff;
   color: var(--add-color);
   font-weight: 700;
   font-size: 0.9rem;
+  white-space: nowrap;
   cursor: pointer;
   transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }

apps/web/src/components/pipeline/DealCard.vue

@@ -43,7 +43,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
         <span class="badge" aria-hidden="true">{{ deal.initials }}</span>
         <div class="titles">
           <h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
-          <p class="desc">{{ deal.description }}</p>
+          <p v-if="deal.description" class="desc">{{ deal.description }}</p>
         </div>
       </div>
       <button
@@ -56,23 +56,24 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
       </button>
     </div>
 
-    <div class="amount" dir="ltr">
-      <strong>{{ money.number }}</strong>
-      <span>{{ money.unit }}</span>
-    </div>
-
-    <div class="foot">
-      <img
-        class="avatar"
-        src="/brand/user-avatar.png"
-        alt=""
-        width="28"
-        height="28"
-      />
-      <span class="date">
-        <UiIcon name="calendar" :size="14" />
-        {{ deal.date }}
-      </span>
+    <div class="meta">
+      <div class="who">
+        <img
+          class="avatar"
+          src="/brand/user-avatar.png"
+          alt=""
+          width="28"
+          height="28"
+        />
+        <span class="date">
+          <UiIcon name="calendar" :size="14" />
+          {{ deal.date }}
+        </span>
+      </div>
+      <div class="amount" dir="ltr">
+        <strong>{{ money.number }}</strong>
+        <span>{{ money.unit }}</span>
+      </div>
     </div>
   </article>
 </template>
@@ -83,6 +84,8 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
   border-radius: 16px;
   padding: 1rem;
+  min-width: 0;
+  overflow: hidden;
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
   cursor: grab;
   transition:
@@ -146,6 +149,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
 
 .titles {
   min-width: 0;
+  flex: 1;
 }
 
 .titles h3 {
@@ -155,6 +159,11 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   line-height: 1.45;
   color: var(--ink);
   cursor: pointer;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow-wrap: anywhere;
 }
 
 .desc {
@@ -162,6 +171,9 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   color: var(--muted);
   font-size: 0.8rem;
   line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .menu {
@@ -180,12 +192,52 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   background: #f1f5f9;
 }
 
-.amount {
+.meta {
   margin-top: 0.85rem;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.who {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.avatar {
+  width: 28px;
+  height: 28px;
+  max-width: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid var(--line);
+  flex: 0 0 auto;
+}
+
+.date {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amount {
   text-align: left;
   display: grid;
   justify-items: start;
-  gap: 0.05rem;
+  gap: 0.02rem;
+  flex: 0 1 auto;
+  min-width: 0;
 }
 
 .amount strong {
@@ -193,6 +245,8 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   font-weight: 800;
   color: var(--ink);
   letter-spacing: -0.01em;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .amount span {
@@ -200,28 +254,4 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   color: var(--muted);
   font-weight: 600;
 }
-
-.foot {
-  margin-top: 0.85rem;
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-}
-
-.avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
-  object-fit: cover;
-  border: 1px solid var(--line);
-}
-
-.date {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  color: var(--muted);
-  font-size: 0.78rem;
-  font-weight: 600;
-}
 </style>

apps/web/src/components/pipeline/PipelineBoard.vue

@@ -45,20 +45,31 @@ const emit = defineEmits<{
   gap: 16px;
   width: 100%;
   min-width: 0;
+  max-width: 100%;
   align-items: stretch;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0.1rem 0.05rem 0.5rem;
+  touch-action: pan-x pan-y;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
 }
 
-@media (max-width: 1024px) {
-  .board {
-    overflow-x: auto;
-    padding-bottom: 0.75rem;
-    scroll-snap-type: x mandatory;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-  }
+.board::-webkit-scrollbar {
+  height: 8px;
+}
 
-  .board::-webkit-scrollbar {
-    display: none;
+.board::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--muted) 38%, transparent);
+  border-radius: 999px;
+}
+
+@container pipeline (max-width: 720px) {
+  .board {
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline: 0.25rem;
   }
 }
 </style>

apps/web/src/components/pipeline/PipelineColumn.vue

@@ -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>

apps/web/src/components/pipeline/PipelineList.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import UiIcon from '@/components/UiIcon.vue';
+import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
+import {
+  formatCurrencyParts,
+  PIPELINE_ACCENT,
+} from '@/lib/pipeline-board';
+
+const props = defineProps<{
+  stages: PipelineStage[];
+}>();
+
+const emit = defineEmits<{
+  openDeal: [dealId: string];
+  menuDeal: [dealId: string];
+}>();
+
+const rows = computed(() =>
+  props.stages.flatMap((stage) =>
+    stage.deals.map((deal) => ({
+      deal,
+      stageTitle: stage.title,
+      accent: stage.color,
+    })),
+  ),
+);
+
+function money(deal: PipelineDeal) {
+  return formatCurrencyParts(deal.amount, deal.currencyUnit ?? 'تومان');
+}
+</script>
+
+<template>
+  <div class="list" dir="rtl">
+    <p v-if="!rows.length" class="empty">معامله‌ای نیست</p>
+
+    <div v-else class="table-wrap">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>معامله</th>
+            <th>مرحله</th>
+            <th>مبلغ</th>
+            <th>تاریخ</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row.deal.id">
+            <td>
+              <button
+                type="button"
+                class="identity"
+                @click="emit('openDeal', row.deal.id)"
+              >
+                <span
+                  class="badge"
+                  :style="{
+                    background: PIPELINE_ACCENT[row.accent].soft,
+                    color: PIPELINE_ACCENT[row.accent].text,
+                  }"
+                >{{ row.deal.initials }}</span>
+                <span class="titles">
+                  <strong>{{ row.deal.title }}</strong>
+                  <em v-if="row.deal.description">{{ row.deal.description }}</em>
+                </span>
+              </button>
+            </td>
+            <td>
+              <span
+                class="stage"
+                :style="{
+                  background: PIPELINE_ACCENT[row.accent].soft,
+                  color: PIPELINE_ACCENT[row.accent].text,
+                }"
+              >
+                <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
+                {{ row.stageTitle }}
+              </span>
+            </td>
+            <td>
+              <span class="amount" dir="ltr">
+                <strong>{{ money(row.deal).number }}</strong>
+                <small>{{ money(row.deal).unit }}</small>
+              </span>
+            </td>
+            <td>
+              <span class="date">
+                <UiIcon name="calendar" :size="14" />
+                {{ row.deal.date }}
+              </span>
+            </td>
+            <td class="menu-cell">
+              <button
+                type="button"
+                class="menu"
+                aria-label="گزینه‌های معامله"
+                @click="emit('menuDeal', row.deal.id)"
+              >
+                <UiIcon name="dots-v" :size="18" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="rows.length" class="cards">
+      <article
+        v-for="row in rows"
+        :key="row.deal.id"
+        class="card"
+        @dblclick="emit('openDeal', row.deal.id)"
+      >
+        <button
+          type="button"
+          class="identity"
+          @click="emit('openDeal', row.deal.id)"
+        >
+          <span
+            class="badge"
+            :style="{
+              background: PIPELINE_ACCENT[row.accent].soft,
+              color: PIPELINE_ACCENT[row.accent].text,
+            }"
+          >{{ row.deal.initials }}</span>
+          <span class="titles">
+            <strong>{{ row.deal.title }}</strong>
+            <em v-if="row.deal.description">{{ row.deal.description }}</em>
+          </span>
+        </button>
+        <span
+          class="stage"
+          :style="{
+            background: PIPELINE_ACCENT[row.accent].soft,
+            color: PIPELINE_ACCENT[row.accent].text,
+          }"
+        >
+          <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
+          {{ row.stageTitle }}
+        </span>
+        <div class="card-foot">
+          <span class="date">
+            <UiIcon name="calendar" :size="14" />
+            {{ row.deal.date }}
+          </span>
+          <span class="amount" dir="ltr">
+            <strong>{{ money(row.deal).number }}</strong>
+            <small>{{ money(row.deal).unit }}</small>
+          </span>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.list {
+  min-width: 0;
+}
+
+.empty {
+  margin: 2rem 0;
+  text-align: center;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.table-wrap {
+  background: #fff;
+  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  overflow: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 640px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 0.85rem 1rem;
+  text-align: start;
+  border-bottom: 1px solid #f1f5f9;
+  vertical-align: middle;
+}
+
+.data-table th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
+  background: #f8fafc;
+}
+
+.data-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.data-table tbody tr:hover td {
+  background: #f8fafc;
+}
+
+.identity {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  text-align: right;
+  font: inherit;
+  color: inherit;
+}
+
+.badge {
+  flex: 0 0 auto;
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  font-size: 0.7rem;
+  font-weight: 800;
+}
+
+.titles {
+  display: grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+
+.titles strong {
+  font-size: 0.92rem;
+  font-weight: 800;
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.titles em {
+  font-style: normal;
+  color: var(--muted);
+  font-size: 0.78rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stage {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.28rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.stage i {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  display: block;
+}
+
+.amount {
+  display: grid;
+  justify-items: start;
+  gap: 0.05rem;
+}
+
+.amount strong {
+  font-weight: 800;
+  color: var(--ink);
+}
+
+.amount small {
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.date {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.menu-cell {
+  width: 2.5rem;
+}
+
+.menu {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  padding: 0.2rem;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.menu:hover,
+.menu:focus-visible {
+  color: var(--ink);
+  background: #f1f5f9;
+}
+
+.cards {
+  display: none;
+  gap: 0.7rem;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
+  border-radius: 16px;
+  padding: 0.95rem 1rem;
+  display: grid;
+  gap: 0.7rem;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+}
+
+.card-foot {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+@container pipeline (max-width: 720px) {
+  .table-wrap {
+    display: none;
+  }
+
+  .cards {
+    display: grid;
+  }
+}
+</style>

apps/web/src/components/pipeline/PipelineToolbar.vue

@@ -3,20 +3,33 @@ import UiIcon from '@/components/UiIcon.vue';
 
 export type PipelineViewMode = 'kanban' | 'list';
 
-defineProps<{
-  pipelineName: string;
-  pipelineOptions: Array<{ id: string; name: string }>;
-  selectedPipelineId: string;
-  viewMode: PipelineViewMode;
-  search: string;
-}>();
+withDefaults(
+  defineProps<{
+    pipelineName: string;
+    pipelineOptions: Array<{ id: string; name: string }>;
+    selectedPipelineId: string;
+    viewMode: PipelineViewMode;
+    search: string;
+    canCreate?: boolean;
+  }>(),
+  { canCreate: false },
+);
 
 const emit = defineEmits<{
   'update:viewMode': [PipelineViewMode];
   'update:search': [string];
   'update:selectedPipelineId': [string];
   filter: [];
+  create: [];
 }>();
+
+function onPick(value: string) {
+  if (value === '__create__') {
+    emit('create');
+    return;
+  }
+  emit('update:selectedPipelineId', value);
+}
 </script>
 
 <template>
@@ -25,7 +38,7 @@ const emit = defineEmits<{
       <span class="brand-ico" aria-hidden="true">
         <UiIcon name="briefcase" :size="18" />
       </span>
-      <h1>کاریز فروش</h1>
+      <h1>{{ pipelineName }}</h1>
     </div>
 
     <div class="view-toggle" role="group" aria-label="نوع نمایش">
@@ -37,7 +50,7 @@ const emit = defineEmits<{
         @click="emit('update:viewMode', 'kanban')"
       >
         <UiIcon name="grid" :size="16" />
-        نمای کاریز
+        <span class="seg-label">نمای کاریز</span>
       </button>
       <button
         type="button"
@@ -47,7 +60,7 @@ const emit = defineEmits<{
         @click="emit('update:viewMode', 'list')"
       >
         <UiIcon name="list" :size="16" />
-        نمای لیست
+        <span class="seg-label">نمای لیست</span>
       </button>
     </div>
 
@@ -55,12 +68,7 @@ const emit = defineEmits<{
       <span class="sr">انتخاب کاریز</span>
       <select
         :value="selectedPipelineId"
-        @change="
-          emit(
-            'update:selectedPipelineId',
-            ($event.target as HTMLSelectElement).value,
-          )
-        "
+        @change="onPick(($event.target as HTMLSelectElement).value)"
       >
         <option
           v-for="opt in pipelineOptions"
@@ -69,6 +77,7 @@ const emit = defineEmits<{
         >
           {{ opt.name }}
         </option>
+        <option v-if="canCreate" value="__create__">کاریز جدید…</option>
       </select>
       <UiIcon class="chev" name="chevron" :size="16" />
     </label>
@@ -94,17 +103,20 @@ const emit = defineEmits<{
 <style scoped>
 .toolbar {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 0.65rem;
-  margin-bottom: 1rem;
+  gap: 0.55rem;
+  margin-bottom: 0.85rem;
+  min-width: 0;
+  width: 100%;
 }
 
 .title-block {
   display: flex;
   align-items: center;
   gap: 0.55rem;
-  margin-inline-end: 0.25rem;
+  flex: 0 0 auto;
+  min-width: 0;
 }
 
 .brand-ico {
@@ -115,35 +127,42 @@ const emit = defineEmits<{
   place-items: center;
   background: #0f766e;
   color: #fff;
+  flex: 0 0 auto;
 }
 
 h1 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.2rem;
   font-weight: 800;
   color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .view-toggle {
   display: inline-flex;
-  background: #eef2f4;
+  background: #e8eef1;
   border-radius: 12px;
-  padding: 0.2rem;
-  gap: 0.15rem;
+  padding: 0.18rem;
+  gap: 0.12rem;
+  flex: 0 0 auto;
 }
 
 .seg {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.35rem;
   border: 0;
   background: transparent;
-  color: var(--muted);
+  color: #7b8794;
   font-weight: 700;
   font-size: 0.82rem;
-  padding: 0.45rem 0.75rem;
+  padding: 0.42rem 0.7rem;
   border-radius: 10px;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .seg.on {
@@ -161,7 +180,8 @@ h1 {
   position: relative;
   display: inline-flex;
   align-items: center;
-  min-width: 140px;
+  min-width: 8.5rem;
+  flex: 0 1 13rem;
 }
 
 .pipeline-pick select {
@@ -169,12 +189,16 @@ h1 {
   border: 1px solid var(--line);
   background: #fff;
   border-radius: 12px;
-  padding: 0.55rem 2rem 0.55rem 0.85rem;
+  padding: 0.52rem 2rem 0.52rem 0.85rem;
   font: inherit;
   font-weight: 600;
   color: var(--ink);
-  min-width: 150px;
+  width: 100%;
+  min-width: 0;
   cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .pipeline-pick .chev {
@@ -186,11 +210,11 @@ h1 {
 }
 
 .search {
-  flex: 1 1 180px;
-  min-width: 160px;
   display: flex;
   align-items: center;
   gap: 0.45rem;
+  flex: 1 1 8rem;
+  min-width: 6.5rem;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 12px;
@@ -203,6 +227,7 @@ h1 {
   outline: none;
   background: transparent;
   width: 100%;
+  min-width: 0;
   color: var(--ink);
   font: inherit;
 }
@@ -210,15 +235,17 @@ h1 {
 .filter-btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.35rem;
   border: 0;
   border-radius: 12px;
-  padding: 0.55rem 0.95rem;
+  padding: 0.52rem 0.95rem;
   background: var(--accent);
   color: #fff;
   font-weight: 700;
   cursor: pointer;
   white-space: nowrap;
+  flex: 0 0 auto;
 }
 
 .filter-btn:focus-visible,
@@ -236,25 +263,45 @@ h1 {
   clip: rect(0 0 0 0);
 }
 
-@media (max-width: 900px) {
+@container pipeline (max-width: 720px) {
   .toolbar {
-    align-items: stretch;
+    flex-wrap: wrap;
   }
 
   .title-block {
     width: 100%;
   }
 
-  .view-toggle,
-  .pipeline-pick,
-  .search,
-  .filter-btn {
-    flex: 1 1 auto;
+  .view-toggle {
+    width: 100%;
   }
 
-  .pipeline-pick select,
-  .filter-btn {
+  .seg {
+    flex: 1 1 0;
+  }
+
+  .pipeline-pick {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .search {
+    flex: 1 1 12rem;
+  }
+}
+
+@container pipeline (max-width: 520px) {
+  .seg-label {
+    display: none;
+  }
+
+  .filter-btn,
+  .pipeline-pick {
     width: 100%;
+    flex: 1 1 100%;
+  }
+
+  .filter-btn {
     justify-content: center;
   }
 }