fix(ui) : radio button issue (#1599)

apps/web/src/components/RoutinesSection.tsx

@@ -14,6 +14,10 @@ import { navigate } from '../router';
 
 type ProjectSummary = { id: string; name: string };
 
+type RoutinesSectionProps = {
+  onClose?: () => void;
+};
+
 type ScheduleKind = RoutineSchedule['kind'];
 
 const SCHEDULE_KINDS: { kind: ScheduleKind; label: string }[] = [
@@ -360,7 +364,7 @@ function RunHistory({ routineId, refreshKey, onClose }: { routineId: string; ref
   );
 }
 
-export function RoutinesSection({ onClose }: { onClose?: () => void }) {
+export function RoutinesSection({ onClose }: RoutinesSectionProps) {
   const [routines, setRoutines] = useState<Routine[]>([]);
   const [projects, setProjects] = useState<ProjectSummary[]>([]);
   const [loading, setLoading] = useState(true);
@@ -571,6 +575,7 @@ export function RoutinesSection({ onClose }: { onClose?: () => void }) {
 
           <fieldset className="routines-fieldset">
             <legend>Project</legend>
+
             <label className="routines-radio">
               <input
                 type="radio"
@@ -582,6 +587,7 @@ export function RoutinesSection({ onClose }: { onClose?: () => void }) {
                 <small>A fresh, isolated workspace per fire.</small>
               </span>
             </label>
+
             <label className="routines-radio">
               <input
                 type="radio"
@@ -593,7 +599,8 @@ export function RoutinesSection({ onClose }: { onClose?: () => void }) {
                 <small>Each run lives as a new conversation inside the project.</small>
               </span>
             </label>
-            {form.mode === 'reuse' ? (
+
+            {form.mode === 'reuse' && (
               <select
                 className="routines-project-select"
                 value={form.projectId}
@@ -607,7 +614,7 @@ export function RoutinesSection({ onClose }: { onClose?: () => void }) {
                   </option>
                 ))}
               </select>
-            ) : null}
+            )}
           </fieldset>
 
           <div className="routines-form-actions">

apps/web/src/index.css

@@ -18662,28 +18662,74 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   flex-direction: column;
   gap: 8px;
 }
+
 .routines-fieldset legend {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-muted);
   padding: 0 6px;
 }
-.routines-radio {
-  display: grid;
-  grid-template-columns: 16px minmax(0, 1fr);
-  gap: 8px 10px;
-  padding: 10px 8px;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: background 120ms ease;
-  align-items: flex-start;
-}
-.routines-radio:hover { background: var(--bg-subtle); }
-.routines-radio input { margin-top: 3px; }
-.routines-radio span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.routines-radio strong { font-size: 14px; color: var(--text); font-weight: 600; }
-.routines-radio small { font-size: 12px; color: var(--text-muted); }
 
+.routines-radio {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.routines-radio:hover {
+  background: var(--bg-subtle);
+  border-color: var(--border-strong);
+}
+
+.routines-radio:has(input:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.routines-radio input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.routines-radio:has(input[type="radio"]:checked) {
+  border-color: var(--accent);
+  background: var(--accent-tint);
+}
+
+.routines-radio:has(input[type="radio"]:checked) strong {
+  color: var(--accent-strong);
+}
+
+.routines-radio span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.routines-radio strong {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.routines-radio small {
+  font-size: 12px;
+  color: var(--text-muted);
+}
 .routines-form-actions {
   display: flex;
   gap: 8px;
@@ -18956,4 +19002,4 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
   border: 1px dashed var(--border-strong, var(--border)); border-radius: 4px;
 }
 .palette-tweaks-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.palette-tweaks-check { display: inline-flex; align-items: center; color: var(--text-muted); }
+.palette-tweaks-check { display: inline-flex; align-items: center; color: var(--text-muted); }