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