Fix misalignment checkbox final build

Fix misalignment checkbox final build on Organization Lookup. See: ansible#9433
kivra-sweden · Apr 27, 2021 · 2b5fe0e · 2b5fe0e
1 parent 6267b26
commit 2b5fe0e
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {
   DataListItem,
-  DataListItemRow,
+  DataListItemRow as PFDataListItemRow,
   DataListItemCells,
   DataListCheck,
   Radio,
 } from '@patternfly/react-core';
-import DataListCell from '../DataListCell';
+import _DataListCell from '../DataListCell';
 
 const Label = styled.label`
   ${({ isDisabled }) =>
@@ -18,6 +18,18 @@ const Label = styled.label`
   `}
 `;
 
+const DataListItemRow = styled(PFDataListItemRow)`
+  && {
+    align-items: center;
+  }
+`;
+
+const DataListCell = styled(_DataListCell)`
+  && {
+    margin-left: 10px;
+  }
+`;
+
 const CheckboxListItem = ({
   isDisabled = false,
   isRadio = false,
@@ -29,7 +41,6 @@ const CheckboxListItem = ({
   onSelect,
 }) => {
   const CheckboxRadio = isRadio ? Radio : DataListCheck;
-
   return (
     <DataListItem
       key={itemId}