jason/breedr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix litter selection UI layout - separate radio buttons and dropdown properly #7

Merged
jason merged 1 commits from fix/dog-form-litter-ui into master 2026-03-09 00:25:23 -05:00
Conversation 0 Commits 1 Files Changed 1 +14 -10
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/DogForm.jsx
View File

@@ -20,7 +20,7 @@ function DogForm({ dog, onClose, onSave }) {
const [litters, setLitters] = useState([]) const [litters, setLitters] = useState([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [error, setError] = useState('') const [error, setError] = useState('')
const [useManualParents, setUseManualParents] = useState(false) const [useManuaParents, setUseManualParents] = useState(false)
useEffect(() => { useEffect(() => {
fetchDogs() fetchDogs()
@@ -208,29 +208,33 @@ function DogForm({ dog, onClose, onSave }) {
</div> </div>
{/* Litter or Manual Parent Selection */} {/* Litter or Manual Parent Selection */}
<div style={{ marginTop: '1.5rem', padding: '1rem', background: '#f8fafc', borderRadius: '8px' }}> <div style={{ marginTop: '1.5rem', padding: '1rem', background: 'rgba(99, 102, 241, 0.05)', borderRadius: '8px', border: '1px solid rgba(99, 102, 241, 0.2)' }}>
<div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}> <label className="label" style={{ marginBottom: '0.75rem', display: 'block', fontWeight: '600' }}>Parent Information</label>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
<div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
<input <input
type="radio" type="radio"
checked={!useManualParents} checked={!useManualParents}
onChange={() => setUseManualParents(false)} onChange={() => setUseManualParents(false)}
style={{ width: '16px', height: '16px' }}
/> />
<span>Link to Litter</span> <span>Link to Litter</span>
</label> </label>
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}> <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
<input <input
type="radio" type="radio"
checked={useManualParents} checked={useManualParents}
onChange={() => setUseManualParents(true)} onChange={() => setUseManualParents(true)}
style={{ width: '16px', height: '16px' }}
/> />
<span>Manual Parent Selection</span> <span>Manual Parent Selection</span>
</label> </label>
</div> </div>
{!useManualParents ? ( {!useManualParents ? (
<div className="form-group"> <div className="form-group" style={{ marginTop: '0.5rem' }}>
<label className="label">Litter</label> <label className="label">Select Litter</label>
<select <select
name="litter_id" name="litter_id"
className="input" className="input"
@@ -245,13 +249,13 @@ function DogForm({ dog, onClose, onSave }) {
))} ))}
</select> </select>
{formData.litter_id && ( {formData.litter_id && (
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#64748b' }}> <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#6366f1', fontStyle: 'italic' }}>
Parents will be automatically set from the selected litter ✓ Parents will be automatically set from the selected litter
</div> </div>
)} )}
</div> </div>
) : ( ) : (
<div className="form-grid"> <div className="form-grid" style={{ marginTop: '0.5rem' }}>
<div className="form-group"> <div className="form-group">
<label className="label">Sire (Father)</label> <label className="label">Sire (Father)</label>
<select <select