From ce9dd1460f5e702a25d8129436e32ef2025765d8 Mon Sep 17 00:00:00 2001
From: Navya Govind <ngovind@bol.com>
Date: Mon, 15 Jan 2024 11:30:34 +0100
Subject: [PATCH] refactor css stuff

Signed-off-by: Navya Govind <ngovind@bol.com>
---
 .../EntityOwnerPicker/EntityOwnerPicker.tsx   | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index c4311ce896..685279b83e 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
@@ -48,6 +48,12 @@ export type CatalogReactEntityOwnerPickerClassKey = 'input';
 const useStyles = makeStyles(
   {
     input: {},
+    fullWidth: { width: '100%' },
+    boxLabel: {
+      width: '100%',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
   },
   {
     name: 'CatalogReactEntityOwnerPicker',
@@ -56,13 +62,7 @@ const useStyles = makeStyles(
 
 const FixedWidthFormControlLabel = withStyles(
   _theme => ({
-    root: {
-      width: '100%',
-    },
     label: {
-      root: {
-        width: '100%',
-      },
       width: '100%',
     },
   }),
@@ -182,9 +182,9 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
               humanizeEntityRef(entity, { defaultKind: entity.kind }),
             );
             return (
-              <Box style={{ width: '100%' }}>
+              <Box className={classes.fullWidth}>
                 <FixedWidthFormControlLabel
-                  style={{ width: '100%' }}
+                  className={classes.fullWidth}
                   control={
                     <Checkbox
                       icon={icon}
@@ -202,13 +202,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
                           <PersonIcon fontSize="small" />
                         )}
                         &nbsp;
-                        <Box
-                          style={{
-                            width: '100%',
-                            textOverflow: 'ellipsis',
-                            overflow: 'hidden',
-                          }}
-                        >
+                        <Box className={classes.boxLabel}>
                           <Typography noWrap>{humanizedName}</Typography>
                         </Box>
                       </Box>