tweak layout

public/app/core/components/Page/Page.tsx

@@ -101,21 +101,28 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'relative',
     }),
     pageContent: css({
+      backgroundColor: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.weak}`,
+      borderRadius: theme.shape.radius.default,
       label: 'page-content',
       flexGrow: 1,
+      padding: theme.spacing(1),
+
+      [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(2),
+      },
     }),
     primaryBg: css({
       background: theme.colors.background.primary,
     }),
     pageInner: css({
       label: 'page-inner',
-      padding: theme.spacing(2),
       borderBottom: 'none',
-      background: theme.colors.background.primary,
       display: 'flex',
       flexDirection: 'column',
       flexGrow: 1,
       margin: theme.spacing(0, 0, 0, 0),
+      padding: theme.spacing(2),
 
       [theme.breakpoints.up('md')]: {
         padding: theme.spacing(4),

public/app/core/components/Page/PageTabs.tsx

@@ -1,44 +1,30 @@
-import { css } from '@emotion/css';
+import { NavModelItem } from '@grafana/data';
-
+import { TabsBar, Tab, toIconName } from '@grafana/ui';
-import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, TabsBar, Tab, toIconName } from '@grafana/ui';
 
 export interface Props {
   navItem: NavModelItem;
 }
 
 export function PageTabs({ navItem }: Props) {
-  const styles = useStyles2(getStyles);
-
   return (
-    <div className={styles.tabsWrapper}>
+    <TabsBar hideBorder>
-      <TabsBar>
+      {navItem.children!.map((child, index) => {
-        {navItem.children!.map((child, index) => {
+        const icon = child.icon ? toIconName(child.icon) : undefined;
-          const icon = child.icon ? toIconName(child.icon) : undefined;
+        return (
-          return (
+          !child.hideFromTabs && (
-            !child.hideFromTabs && (
+            <Tab
-              <Tab
+              label={child.text}
-                label={child.text}
+              active={child.active}
-                active={child.active}
+              key={`${child.url}-${index}`}
-                key={`${child.url}-${index}`}
+              icon={icon}
-                icon={icon}
+              counter={child.tabCounter}
-                counter={child.tabCounter}
+              href={child.url}
-                href={child.url}
+              suffix={child.tabSuffix}
-                suffix={child.tabSuffix}
+              onChangeTab={child.onClick}
-                onChangeTab={child.onClick}
+            />
-              />
+          )
-            )
+        );
-          );
+      })}
-        })}
+    </TabsBar>
-      </TabsBar>
-    </div>
   );
 }
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    tabsWrapper: css({
-      paddingBottom: theme.spacing(3),
-    }),
-  };
-};

public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx

@@ -113,8 +113,6 @@ function getStyles(theme: GrafanaTheme2, variant: LibraryPanelsSearchVariant) {
     }),
     container: css({
       width: '100%',
-      overflowY: 'auto',
-      padding: theme.spacing(1),
     }),
     libraryPanelsView: css({
       width: '100%',