From ca6ae24032c816ba8c7557e240f4dc631c2a0394 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Fri, 29 May 2020 09:19:14 -0400
Subject: [PATCH] makes whole card selectable

---
 .../src/components/AddRole/CheckboxCard.jsx   | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/awx/ui_next/src/components/AddRole/CheckboxCard.jsx b/awx/ui_next/src/components/AddRole/CheckboxCard.jsx
index a1b56939d0..361bf1a60d 100644
--- a/awx/ui_next/src/components/AddRole/CheckboxCard.jsx
+++ b/awx/ui_next/src/components/AddRole/CheckboxCard.jsx
@@ -1,19 +1,27 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox } from '@patternfly/react-core';
+import { Checkbox as PFCheckbox } from '@patternfly/react-core';
+import styled from 'styled-components';
+
+const CheckboxWrapper = styled.div`
+  display: flex;
+  border: 1px solid var(--pf-global--BorderColor--200);
+  border-radius: var(--pf-global--BorderRadius--sm);
+  padding: 10px;
+`;
+
+const Checkbox = styled(PFCheckbox)`
+  width: 100%;
+  & label {
+    width: 100%;
+  }
+`;
 
 class CheckboxCard extends Component {
   render() {
     const { name, description, isSelected, onSelect, itemId } = this.props;
     return (
-      <div
-        style={{
-          display: 'flex',
-          border: '1px solid var(--pf-global--BorderColor--200)',
-          borderRadius: 'var(--pf-global--BorderRadius--sm)',
-          padding: '10px',
-        }}
-      >
+      <CheckboxWrapper>
         <Checkbox
           isChecked={isSelected}
           onChange={onSelect}
@@ -27,7 +35,7 @@ class CheckboxCard extends Component {
           }
           value={itemId}
         />
-      </div>
+      </CheckboxWrapper>
     );
   }
 }