fix(web): mobile automation canvas/inspector, compact activity row, timestamped comments

apps/web/src/components/automations/AutomationCanvas.vue

@@ -674,9 +674,80 @@ strong {
   font-size: 0.78rem;
 }
 
+/* موبایل: چیدمان عمودی؛ هر شاخه یک کارت زیر کارت قبلی */
 @media (max-width: 700px) {
+  .canvas {
+    min-height: 0;
+    padding: 1rem 0.75rem;
+  }
+
+  .flow,
+  .flow:has(.branches) {
+    flex-direction: column;
+    align-items: center;
+    min-width: 0;
+    min-height: 0;
+    padding-bottom: 0;
+  }
+
   .node.trigger {
-    width: 13rem;
+    width: min(100%, 15rem);
+  }
+
+  .wire,
+  .wire.stub {
+    width: 2px;
+    height: 2.1rem;
+  }
+
+  .wire::after {
+    inset-inline-end: auto;
+    top: auto;
+    bottom: -1px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-block: 0;
+    border-inline: 5px solid transparent;
+    border-top: 7px solid #cbd5e1;
+  }
+
+  .wire.end {
+    width: 2px;
+    height: 2.4rem;
+    background: repeating-linear-gradient(180deg, #cbd5e1 0 6px, transparent 6px 10px);
+  }
+
+  .branches {
+    align-items: stretch;
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .branch {
+    flex-direction: column;
+    align-items: center;
+    padding: 1.9rem 0.5rem 0.5rem;
+    border: 1px dashed #fed7aa;
+    border-radius: var(--radius);
+    background: rgba(255, 255, 255, 0.55);
+  }
+
+  .branch::before {
+    display: none;
+  }
+
+  .branch-tag {
+    top: 0.45rem;
+    inset-inline-start: 0.6rem;
+  }
+
+  .add-branch {
+    position: static;
+    align-self: center;
+  }
+
+  .picker {
+    max-width: none;
   }
 }
 </style>

apps/web/src/components/automations/AutomationInspector.vue

@@ -506,6 +506,7 @@ watch(
 <style scoped>
 .inspector {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   align-content: start;
   gap: 0.75rem;
   padding: 1rem;
@@ -534,6 +535,7 @@ label,
   gap: 0.35rem;
   font-size: 0.84rem;
   color: #64748b;
+  min-width: 0;
 }
 
 .field-label {
@@ -550,6 +552,9 @@ textarea {
   font: inherit;
   color: #0f172a;
   background: #fff;
+  min-width: 0;
+  max-width: 100%;
+  text-overflow: ellipsis;
 }
 
 .channels {