From 04cc36c33a6eabfd2906eb6b3b9c63a0f4574335 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Thu, 16 Jul 2026 10:43:39 +0330
Subject: [PATCH] fix: clean up selected-service chip layout in
 ServiceSlotPicker

Replace the .field-wrapped duration input (whose min-width + inner label
overflowed the fixed 92px box) with a self-contained inline duration editor;
drop flex-wrap and let the section->service name truncate with ellipsis so
each chip stays on one tidy row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../appointments/ServiceSlotPicker.tsx        | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/assets/admin/components/appointments/ServiceSlotPicker.tsx b/assets/admin/components/appointments/ServiceSlotPicker.tsx
index 3c840665..fd059c00 100644
--- a/assets/admin/components/appointments/ServiceSlotPicker.tsx
+++ b/assets/admin/components/appointments/ServiceSlotPicker.tsx
@@ -144,36 +144,41 @@ export default function ServiceSlotPicker({
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 6 }}>
             {selected.map(s => (
               <div key={s.uuid} style={{
-                display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
+                display: 'flex', alignItems: 'center', gap: 10,
                 padding: '8px 10px', borderRadius: 'var(--r-sm)', fontSize: 13,
                 background: 'var(--primary-soft)', border: '1px solid var(--primary)',
               }}>
-                <span style={{ flex: 1, minWidth: 120, color: 'var(--primary-700)', fontWeight: 600 }}>
+                <span style={{
+                  flex: 1, minWidth: 0, color: 'var(--primary-700)', fontWeight: 600,
+                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                }}>
                   <span style={{ color: 'var(--text-3)', fontWeight: 400 }}>{s.section}</span>
                   {' ← '}{s.name}
                 </span>
-                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
-                  {editableDuration ? (
-                    <span className="field" style={{ height: 34, width: 92, padding: '0 8px' }}>
-                      <DigitInput
-                        aria-label={`مدت ${s.name}`}
-                        value={String(s.duration || '')}
-                        onChange={v => setDuration(s.uuid, Number(v) || 0)}
-                        maxDigits={3}
-                        placeholder="دقیقه"
-                      />
-                      <span style={{ color: 'var(--text-3)', fontSize: 11.5 }}>دقیقه</span>
-                    </span>
-                  ) : (
-                    <span style={{ color: 'var(--text-3)', fontSize: 12 }}>{s.duration} دقیقه</span>
-                  )}
-                  <button type="button" aria-label={`حذف ${s.name}`} onClick={() => remove(s.uuid)}
-                    style={{
-                      display: 'grid', placeItems: 'center', width: 18, height: 18, borderRadius: 999,
-                      border: 'none', cursor: 'pointer', background: 'var(--primary)', color: '#fff',
-                      fontSize: 13, lineHeight: 1, fontFamily: 'inherit',
-                    }}>×</button>
-                </span>
+                {editableDuration ? (
+                  <span style={{
+                    display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0,
+                    height: 32, padding: '0 8px', borderRadius: 'var(--r-sm)',
+                    background: 'var(--surface)', border: '1px solid var(--border-2)',
+                  }}>
+                    <DigitInput
+                      aria-label={`مدت ${s.name}`}
+                      value={String(s.duration || '')}
+                      onChange={v => setDuration(s.uuid, Number(v) || 0)}
+                      maxDigits={3}
+                      style={{ width: 34, border: 'none', outline: 'none', background: 'transparent', textAlign: 'center', fontFamily: 'inherit', fontSize: 13, color: 'var(--text)' }}
+                    />
+                    <span style={{ color: 'var(--text-3)', fontSize: 11.5 }}>دقیقه</span>
+                  </span>
+                ) : (
+                  <span style={{ flexShrink: 0, color: 'var(--text-3)', fontSize: 12 }}>{s.duration} دقیقه</span>
+                )}
+                <button type="button" aria-label={`حذف ${s.name}`} onClick={() => remove(s.uuid)}
+                  style={{
+                    display: 'grid', placeItems: 'center', width: 18, height: 18, borderRadius: 999, flexShrink: 0,
+                    border: 'none', cursor: 'pointer', background: 'var(--primary)', color: '#fff',
+                    fontSize: 13, lineHeight: 1, fontFamily: 'inherit',
+                  }}>×</button>
               </div>
             ))}
           </div>