fixed padding in columnSelector items to render more on screen

 Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

diff --git a/.gitignore b/.gitignore
index 6a564a2bc75617053c888e76a6dce6ba769cb44b..ead5e35a7e8f3cc6b0c006cb153f9fb95b4abd03 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -33,6 +33,7 @@ yarn-error.log*
 
 .idea
 .vscode
+/public/config.json
 
 # see https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .pnp.*

diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx
index ba964502193f4110752d5af0204da7a68d988ef5..f9331e06320b14e40a5c3e744b58deaa65391168 100644 (file)
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -17,13 +17,19 @@ interface ColumnSelectorDataProps {
     className?: string;
 }
 
-type CssRules = "checkbox";
+type CssRules = "checkbox" | "listItem" | "listItemText";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     checkbox: {
         width: 24,
         height: 24
     },
+    listItem: {
+        padding: 0
+    },
+    listItemText: {
+        paddingTop: '0.2rem'
+    }
 });
 
 export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>;
@@ -39,13 +45,15 @@ export const ColumnSelector = withStyles(styles)(
                             <ListItem
                                 button
                                 key={index}
+                                className={classes.listItem}
                                 onClick={() => onColumnToggle(column)}>
                                 <Checkbox
                                     disableRipple
                                     color="primary"
                                     checked={column.selected}
                                     className={classes.checkbox} />
-                                <ListItemText>
+                                <ListItemText 
+                                    className={classes.listItemText}>
                                     {column.name}
                                 </ListItemText>
                             </ListItem>