Search: Fixes margins and paddings and left position (#50570) (#50578)

(cherry picked from commit c1d405a200)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-data/src/themes/createComponents.ts

@@ -90,7 +90,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.45)' : 'rgba(208, 209, 211, 0.24)',
     },
     sidemenu: {
-      width: 48,
+      width: 57,
     },
     menuTabs: {
       height: 41,

public/app/core/components/NavBar/Next/NavBarNext.tsx

@@ -206,7 +206,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     zIndex: theme.zIndex.sidemenu,
     padding: `${theme.spacing(1)} 0`,
     position: 'relative',
-    width: `calc(${theme.spacing(7)} + 1px)`,
+    width: theme.components.sidemenu.width,
     borderRight: `1px solid ${theme.colors.border.weak}`,
 
     [theme.breakpoints.down('md')]: {

public/app/features/search/components/DashboardSearch.tsx

@@ -144,10 +144,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       z-index: ${theme.zIndex.sidemenu};
       position: fixed;
       background: ${theme.colors.background.canvas};
+      padding: ${theme.spacing(1)};
 
       ${theme.breakpoints.up('md')} {
         left: ${theme.components.sidemenu.width}px;
         z-index: ${theme.zIndex.navbarFixed + 1};
+        padding: ${theme.spacing(2)};
       }
     `,
     container: css`
@@ -155,11 +157,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       flex-direction: column;
       max-width: 1400px;
       margin: 0 auto;
-      padding: ${theme.spacing(2)};
+      padding: ${theme.spacing(1)};
       background: ${theme.colors.background.primary};
       border: 1px solid ${theme.components.panel.borderColor};
-      margin-top: ${theme.spacing(4)};
-
       height: 100%;
 
       ${theme.breakpoints.up('md')} {