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 }}>
{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>