DockedMenu: only set the menu state to be `docked` if the window size is big enough (#80379)

* only set the menu docked in state if the window size is big enough

* adjust sizes

* remove top border on dockedMegaMenu

* another css tweak

* use xxl consistently

* CONSISTENTLY

* ok maybe not

public/app/core/components/AppChrome/AppChrome.tsx

@@ -131,7 +131,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     dockedMegaMenu: css({
       background: theme.colors.background.primary,
       borderRight: `1px solid ${theme.colors.border.weak}`,
-      borderTop: `1px solid ${theme.colors.border.weak}`,
       display: 'none',
       zIndex: theme.zIndex.navbarFixed,
 

public/app/core/components/AppChrome/AppChromeMenu.tsx

@@ -76,7 +76,7 @@ export function AppChromeMenu({}: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
-  const topPosition = (searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2) + 1;
+  const topPosition = searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2;
 
   return {
     backdrop: css({

public/app/core/components/AppChrome/AppChromeService.tsx

@@ -33,6 +33,7 @@ export class AppChromeService {
 
   private megaMenuDocked = Boolean(
     config.featureToggles.dockedMegaMenu &&
+      window.innerWidth >= config.theme2.breakpoints.values.xl &&
       store.getBool(
         DOCKED_LOCAL_STORAGE_KEY,
         Boolean(config.featureToggles.dockedMegaMenu && window.innerWidth >= config.theme2.breakpoints.values.xxl)