fix(web) avoid PF/Radio complaint at product selection (#1689)

## Problem

The ProductSelectionPage component was laying out PF/Radio inputs in a
not expected way, making such a component complain because missing prop

>
https://github.com/patternfly/patternfly-react/blob/a3ffb39a0cc2c9130f7db86ad3186787ba12648e/packages/react-core/src/components/Radio/Radio.tsx#L61-L64

## Solution

Use a plain input[type="radio"] which the corresponding CSS class to
look like a PF/Radio

## Testing

- Tested manually

web/src/assets/styles/app.scss

@@ -37,15 +37,16 @@ button.remove-link:hover {
 }
 
 #productSelectionForm {
-  .pf-v5-c-radio input {
+  input[type="radio"] {
     align-self: center;
-    width: 20px;
-    height: 20px;
+    flex-shrink: 0;
+    inline-size: 20px;
+    block-size: 20px;
   }
 
   .pf-v5-c-card {
     img {
-      width: 80px;
+      max-inline-size: 80px;
     }
 
     label {

web/src/components/product/ProductSelectionPage.tsx

@@ -28,7 +28,6 @@ import {
   Form,
   Grid,
   GridItem,
-  Radio,
   List,
   ListItem,
   Split,
@@ -39,7 +38,8 @@ import {
 import { Page } from "~/components/core";
 import { Center } from "~/components/layout";
 import { useConfigMutation, useProduct } from "~/queries/software";
-import styles from "@patternfly/react-styles/css/utilities/Text/text";
+import pfTextStyles from "@patternfly/react-styles/css/utilities/Text/text";
+import pfRadioStyles from "@patternfly/react-styles/css/components/Radio/radio";
 import { slugify } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
@@ -63,16 +63,21 @@ const Option = ({ product, isChecked, onChange }) => {
       <Card isRounded>
         <CardBody>
           <Split hasGutter>
-            <Radio
+            <input
               id={id}
+              type="radio"
               name="product"
-              isChecked={isChecked}
+              className={pfRadioStyles.radioInput}
+              checked={isChecked}
               onChange={onChange}
               aria-details={detailsId}
             />
             <img aria-hidden src={logoSrc} alt={logoAltText} />
             <Stack hasGutter>
-              <label htmlFor={id} className={`${styles.fontSizeLg} ${styles.fontWeightBold}`}>
+              <label
+                htmlFor={id}
+                className={`${pfTextStyles.fontSizeLg} ${pfTextStyles.fontWeightBold}`}
+              >
                 {product.name}
               </label>
               <p id={detailsId}>{product.description}</p>