hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clean up selected-service chip layout in ServiceSlotPicker

Browse Source 
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>
This commit is contained in:
hamed
2026-07-16 10:43:39 +03:30
co-authored by Claude Opus 4.8
parent 78396d3275
commit 04cc36c33a
1 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/components/appointments/ServiceSlotPicker.tsx
+29 -24
View File
@@ -144,36 +144,41 @@ export default function ServiceSlotPicker({
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 6 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 6 }}>
{selected.map(s => ( {selected.map(s => (
<div key={s.uuid} style={{ <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, padding: '8px 10px', borderRadius: 'var(--r-sm)', fontSize: 13,
background: 'var(--primary-soft)', border: '1px solid var(--primary)', 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> <span style={{ color: 'var(--text-3)', fontWeight: 400 }}>{s.section}</span>
{' ← '}{s.name} {' ← '}{s.name}
</span> </span>
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}> {editableDuration ? (
{editableDuration ? ( <span style={{
<span className="field" style={{ height: 34, width: 92, padding: '0 8px' }}> display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0,
<DigitInput height: 32, padding: '0 8px', borderRadius: 'var(--r-sm)',
aria-label={`مدت ${s.name}`} background: 'var(--surface)', border: '1px solid var(--border-2)',
value={String(s.duration || '')} }}>
onChange={v => setDuration(s.uuid, Number(v) || 0)} <DigitInput
maxDigits={3} aria-label={`مدت ${s.name}`}
placeholder="دقیقه" value={String(s.duration || '')}
/> onChange={v => setDuration(s.uuid, Number(v) || 0)}
<span style={{ color: 'var(--text-3)', fontSize: 11.5 }}>دقیقه</span> maxDigits={3}
</span> 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: 12 }}>{s.duration} دقیقه</span> <span style={{ color: 'var(--text-3)', fontSize: 11.5 }}>دقیقه</span>
)} </span>
<button type="button" aria-label={`حذف ${s.name}`} onClick={() => remove(s.uuid)} ) : (
style={{ <span style={{ flexShrink: 0, color: 'var(--text-3)', fontSize: 12 }}>{s.duration} دقیقه</span>
display: 'grid', placeItems: 'center', width: 18, height: 18, borderRadius: 999, )}
border: 'none', cursor: 'pointer', background: 'var(--primary)', color: '#fff', <button type="button" aria-label={`حذف ${s.name}`} onClick={() => remove(s.uuid)}
fontSize: 13, lineHeight: 1, fontFamily: 'inherit', style={{
}}>×</button> display: 'grid', placeItems: 'center', width: 18, height: 18, borderRadius: 999, flexShrink: 0,
</span> border: 'none', cursor: 'pointer', background: 'var(--primary)', color: '#fff',
fontSize: 13, lineHeight: 1, fontFamily: 'inherit',
}}>×</button>
</div> </div>
))} ))}
</div> </div>