fix: column icon css for partition keys (pinterest#987)

jczhong84 · web-flow · commit 6b08a88d97fd · 2022-08-30T10:49:58.000-07:00
diff --git a/querybook/webapp/components/DataTableViewMini/ColumnIcon.tsx b/querybook/webapp/components/DataTableViewMini/ColumnIcon.tsx
@@ -22,12 +22,12 @@ export const ColumnIcon: React.FunctionComponent<IColumnIconProps> = ({
     };
     if (tooltip) {
         spanProps['aria-label'] = tooltip;
-        spanProps['data-balloon-pos'] = 'up';
+        spanProps['data-balloon-pos'] = 'right';
     }
 
     return (
         <span {...spanProps}>
-            <Icon name={name} size={16} fill={fill} />
+            <Icon name={name} size={14} fill={fill} />
         </span>
     );
 };
diff --git a/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx b/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx
@@ -6,11 +6,11 @@ import { DataTableTags } from 'components/DataTableTags/DataTableTags';
 import { useDataTable } from 'hooks/redux/useDataTable';
 import { generateFormattedDate } from 'lib/utils/datetime';
 import { getHumanReadableByteSize } from 'lib/utils/number';
+import { AllLucideIconNames } from 'ui/Icon/LucideIcons';
 import { Loader } from 'ui/Loader/Loader';
 
-import { PanelSection, SubPanelSection } from './PanelSection';
-import { AllLucideIconNames } from 'ui/Icon/LucideIcons';
 import { ColumnIcon } from './ColumnIcon';
+import { PanelSection, SubPanelSection } from './PanelSection';
 
 interface ITablePanelViewProps {
     tableId: number;
@@ -120,6 +120,7 @@ const StyledColumnRow = styled.div<IStyledColumnRowProps>`
     margin-bottom: 4px;
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     .column-row-name {
         user-select: none;
@@ -170,7 +171,7 @@ const ColumnRow: React.FunctionComponent<{
             {icon && (
                 <ColumnIcon
                     name={icon}
-                    tooltip={'Partitioned Column'}
+                    tooltip={'Partition key'}
                     fill={false}
                 />
             )}
