From 8a8a2f0f298609c5c1a083f5738c68a2d9ecd53d Mon Sep 17 00:00:00 2001
From: Edwin van den Houdt <eho@respellion.nl>
Date: Fri, 26 Jun 2026 10:57:56 +0200
Subject: [PATCH] Fix radio selection visual and trailing divider in data rows

- radio-group: the Utrecht radio paints its dot only with the
  `utrecht-radio-button--checked` class (not the native :checked); we set
  [checked] but not the class, so a selected radio looked empty. Bind the class
  too. The intake step-1 choice now visibly selects.
- data-row: drop the border-block-end on the last row (:host:last-child) so a
  summary ends cleanly instead of showing a trailing empty row (visible in the
  concepts discriminated-unions card).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/shared/ui/data-row/data-row.component.ts       | 3 +++
 src/app/shared/ui/radio-group/radio-group.component.ts | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/app/shared/ui/data-row/data-row.component.ts b/src/app/shared/ui/data-row/data-row.component.ts
index 17ac8a1..421ee9f 100644
--- a/src/app/shared/ui/data-row/data-row.component.ts
+++ b/src/app/shared/ui/data-row/data-row.component.ts
@@ -4,6 +4,9 @@ import { Component, input } from '@angular/core';
     Wrap several of these in .rhc-data-summary (see registration-summary). */
 @Component({
   selector: 'app-data-row',
+  // The RHC item draws a divider below every row; drop it on the last one so the
+  // list ends cleanly instead of looking like a trailing empty row.
+  styles: [`:host:last-child .rhc-data-summary__item { border-block-end-style: none; }`],
   template: `
     <div class="rhc-data-summary__item">
       <dt class="rhc-data-summary__item-key">{{ key() }}</dt>
diff --git a/src/app/shared/ui/radio-group/radio-group.component.ts b/src/app/shared/ui/radio-group/radio-group.component.ts
index 93031a0..382cf71 100644
--- a/src/app/shared/ui/radio-group/radio-group.component.ts
+++ b/src/app/shared/ui/radio-group/radio-group.component.ts
@@ -16,6 +16,7 @@ export interface RadioOption {
         <label class="utrecht-form-label utrecht-form-label--radio-button" style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0">
           <input
             class="utrecht-radio-button"
+            [class.utrecht-radio-button--checked]="value === opt.value"
             type="radio"
             [name]="name()"
             [value]="opt.value"