web: product selection page fixes and improvements

web/package/agama-web-ui.changes

@@ -1,3 +1,13 @@
+-------------------------------------------------------------------
+Mon Jan 19 09:00:12 UTC 2026 - David Diaz <dgonzalez@suse.com>
+
+- Enhance product selection page (gh#agama-project/agama#3039):
+  - Keep the selected product’s radio button checked after
+    interacting with other controls.
+  - Improved UX with persistent product details on large screens,
+    clearer submission-disabled messages, and other minor yet
+    useful UI tweaks.
+
 -------------------------------------------------------------------
 Fri Jan 16 12:58:15 UTC 2026 - David Diaz <dgonzalez@suse.com>
 

web/src/assets/styles/index.scss

@@ -256,13 +256,16 @@ strong {
   }
 }
 
+.sticky-top {
+  position: sticky;
+  top: 1em;
+}
+
 #productSelectionForm {
   input[type="radio"] {
-    vertical-align: middle;
-    margin-inline-end: 1ch;
-    flex-shrink: 0;
-    inline-size: 20px;
-    block-size: 20px;
+    align-self: center;
+    inline-size: 1.2em;
+    block-size: 1.2em;
   }
 
   .pf-v6-c-card {
@@ -273,17 +276,10 @@ strong {
     label {
       cursor: pointer;
     }
+  }
 
-    label::after {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
+  .pf-v6-c-radio {
+    row-gap: 0;
   }
 }