fix(sidebar): Make the hover/active background effect take up the full element. ie. flush with the sides (#6083)

Make the hover/active background effect take up the full element. ie. flush with the sides

Author: lerouxb

packages/compass-connections-navigation/src/base-navigation-item.tsx

@@ -37,8 +37,6 @@ const menuStyles = css({
 });
 
 const itemContainerStyles = css({
-  paddingLeft: spacing[300],
-  paddingRight: spacing[300],
   cursor: 'pointer',
   color: 'var(--item-color)',
   backgroundColor: 'var(--item-bg-color)',
@@ -59,10 +57,8 @@ const itemWrapperStyles = css({
   display: 'flex',
   height: ROW_HEIGHT,
   alignItems: 'center',
-  paddingLeft: spacing[100],
-  paddingRight: spacing[100],
+  paddingRight: spacing[400],
   gap: spacing[50],
-  borderRadius: spacing[100],
 });
 
 const labelAndIconWrapperStyles = css({

packages/compass-connections-navigation/src/utils.ts

@@ -5,7 +5,7 @@ export const getTreeItemStyles = ({
   level,
   isExpandable,
 }: Pick<SidebarTreeItem, 'isExpandable' | 'level'>): React.CSSProperties => {
-  const DEFAULT_PADDING = spacing[100];
+  const DEFAULT_PADDING = spacing[400];
   const EXPAND_ICON_WIDTH = spacing[400];
   const EXPAND_ICON_GAP = spacing[50];
   const EXPAND_ICON_SIZE = EXPAND_ICON_WIDTH + EXPAND_ICON_GAP;