From 706dc62b22d6796603caa5adb8bacc122b04e626 Mon Sep 17 00:00:00 2001
From: Marius Tobiassen Bungum <marius@mh2.no>
Date: Tue, 7 Jan 2025 10:04:52 +0100
Subject: [PATCH] :lipstick: Remove padding around Select MenuItems

---
 src/molecules/Select/Select.styles.ts   | 6 ++++--
 src/molecules/Select/SelectMenuItem.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/molecules/Select/Select.styles.ts b/src/molecules/Select/Select.styles.ts
index 82301055..5755ebb1 100644
--- a/src/molecules/Select/Select.styles.ts
+++ b/src/molecules/Select/Select.styles.ts
@@ -214,7 +214,6 @@ interface CustomMenuItemProps {
 
 const StyledMenuItem = styled(EDSMenu.Item)<CustomMenuItemProps>`
   flex-grow: 1;
-  border-radius: 2px;
   ${({ $paddedLeft }) => $paddedLeft && `margin-left: 36px`};
   padding-left: 10px;
   
@@ -235,6 +234,10 @@ const StyledMenuItem = styled(EDSMenu.Item)<CustomMenuItemProps>`
       $selected
         ? css`
             background: ${colors.interactive.primary__selected_highlight.rgba};
+
+            &:hover {
+              background: ${colors.interactive.primary__selected_hover.rgba};
+            }
           `
         : ''}}
 `;
@@ -281,7 +284,6 @@ const StyledMenu = styled(EDSMenu)`
 const MenuItemWrapper = styled.div`
   display: flex;
   align-items: center;
-  padding: 0 ${spacings.small};
 `;
 
 const SmallButton = styled(Button)`
diff --git a/src/molecules/Select/SelectMenuItem.tsx b/src/molecules/Select/SelectMenuItem.tsx
index b048c953..82624bfc 100644
--- a/src/molecules/Select/SelectMenuItem.tsx
+++ b/src/molecules/Select/SelectMenuItem.tsx
@@ -11,6 +11,7 @@ import { tokens } from '@equinor/eds-tokens';
 
 import { getChildOffset } from './Select.utils';
 import { getParentIcon } from './SelectMenuItem.utils';
+import { spacings } from 'src/atoms/style/spacings';
 import {
   MenuItemSpacer,
   MenuItemWrapper,
@@ -117,7 +118,9 @@ export const SelectMenuItem = <T extends SelectOptionRequired>(
   if (item.children && item.children.length > 0 && multiselect) {
     return (
       <>
-        <MenuItemWrapper>
+        <MenuItemWrapper
+          style={{ paddingLeft: depth === 0 ? spacings.small : 0 }}
+        >
           {spacers}
           <SmallButton
             variant="ghost_icon"