feat(activities): keep multi-assignee completion readable for large teams

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/ActivityFormView.vue

@@ -1285,6 +1285,9 @@ watch([id, isNew], () => void load(), { immediate: true });
                   <input v-model="completionMode" type="radio" value="all" />
                   همهٔ مسئول‌ها باید انجام دهند
                 </label>
+                <p v-if="completionMode === 'all'" class="completion-hint">
+                  هر کدام از همین افراد باید جداگانه سهم خودش را انجام دهد.
+                </p>
               </div>
               <small class="hint">
                 {{
@@ -1819,14 +1822,16 @@ watch([id, isNew], () => void load(), { immediate: true });
 .completion-mode {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.65rem 1rem;
+  align-items: center;
+  gap: 0.4rem;
   margin-top: 0.75rem;
-  color: #334155;
-  font-size: 0.88rem;
 }
 
-.completion-mode span {
+.completion-mode > span {
   width: 100%;
+  margin: 0;
+  color: #64748b;
+  font-size: 0.75rem;
   font-weight: 600;
 }
 
@@ -1834,9 +1839,46 @@ watch([id, isNew], () => void load(), { immediate: true });
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
+  margin: 0;
+  padding: 0.2rem 0.65rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #fff;
+  color: #334155;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
   cursor: pointer;
 }
 
+.completion-mode label:has(input:checked) {
+  border-color: #14b8a6;
+  background: #f0fdfa;
+  color: #0f766e;
+}
+
+.completion-mode input {
+  width: 14px;
+  height: 14px;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  flex: 0 0 14px;
+  accent-color: #0d9488;
+  background: transparent;
+}
+
+.completion-hint {
+  width: 100%;
+  margin: 0.15rem 0 0;
+  color: #64748b;
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
 .assignee-chips {
   display: flex;
   flex-wrap: wrap;