fix: spacing and positioning table header cell

chanzuckerberg · Jul 18, 2022 · f6012dd · f6012dd
1 parent 74c8b5c
commit f6012dd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
@@ -153,6 +153,8 @@
 * 2) When column is sortable, add an inline icon after the title
 */
 .table__header-cell-button {
+  display: inline-flex;
+  gap: var(--eds-size-half);
   padding: 0;
   background: none;
   border: none;
@@ -165,6 +167,11 @@
   }
 }
 
+.table__header-cell-icon {
+  position: relative;
+  bottom: 1px;
+}
+
 /*
 * Table header cell contents
 * 1) A wrapper for the title and sort icon. Uses a flex row so that icon remains at the bottom when one or more titles breaks into multiple lines 

diff --git a/src/components/TableHeaderCell/TableHeaderCell.tsx b/src/components/TableHeaderCell/TableHeaderCell.tsx
@@ -126,6 +126,7 @@ export const TableHeaderCell = ({
           {children}
           <div className={clsx(styles['table__header-cell-sort'])}>
             <Icon
+              className={styles['table__header-cell-icon']}
               name={iconName}
               purpose="informative"
               size="1rem"