SDK-R Fixed text alignment in selectable card component (#499)

Co-authored-by: tumms2021389 <[email protected]>

Author: tammy-a11y

packages/react-sdk-components/src/components/field/RadioButtons/RadioButtons.tsx

@@ -108,10 +108,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div
-          className='selectable-card-grid-style'
-          style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))', gridAutoRows: '1fr', gap: '0.5rem' }}
-        >
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(30%, 40ch), 1fr))', gridAutoRows: '1fr', gap: '0.5rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}

packages/react-sdk-components/src/components/field/SelectableCard/SelectableCard.tsx

@@ -152,7 +152,7 @@ export default function SelectableCard(props) {
                         margin: '5px'
                       }}
                     >
-                      <div style={{ color: 'rgba(0, 0, 0, 0.6)' }}>{field.name}</div>
+                      {field.name && <div>{field.name}</div>}
                       <div>{field?.value?.props.value}</div>
                     </div>
                   ))}

packages/react-sdk-components/src/samples/Embedded/styles.css

@@ -43,7 +43,3 @@
 #pega-part-of-page img {
   background-color: transparent !important;
 }
-
-.selectable-card-grid-style {
-  grid-template-columns: repeat(auto-fit, minmax(min(30%, 40ch), 1fr)) !important;
-}