From b9858b2c78ec4103da64465b02ec12712ab153d4 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 9 Mar 2026 00:24:44 -0500
Subject: [PATCH] Fix litter selection UI layout - separate radio buttons and
 dropdown properly

---
 client/src/components/DogForm.jsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/client/src/components/DogForm.jsx b/client/src/components/DogForm.jsx
index 56204ca..8da4300 100644
--- a/client/src/components/DogForm.jsx
+++ b/client/src/components/DogForm.jsx
@@ -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