PageToolbar: add bottom padding (#34602)

* fix(pagetoolbar): pad elements top and bottom to keep vertical align and wrapper padding

* fix(sidemenu): prevent mobile sidemenu squashing dashboard, vertically align mobile sidemenu icon

* fix(dashboardsettings): prevent subheader overlap

* fix(pagetoolbar): center align all toolbar elements vertically

* refactor(pagetoolbar): combine vertical paddings to bring back original padding values

* refactor: update padding values for components that use PageToolbar

* fix(playlists): update Empty cta link route to prevent 404

* test(dashboard): update snapshot

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -185,7 +185,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
     display: flex;
   `,
   settingsWrapper: css`
-    margin: ${theme.spacing(2)};
+    margin: ${theme.spacing(0, 2, 2)};
     display: flex;
     flex-grow: 1;
   `,

public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx

@@ -67,7 +67,7 @@ const getStyles = (theme: GrafanaTheme) => {
       display: flex;
       flex: 1 1 0;
       flex-direction: column;
-      padding: ${theme.spacing.md} 0 0 0;
+      padding: 0;
     `,
     optionsWrapper: css`
       flex-grow: 1;

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -526,7 +526,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
     `,
     panelToolbar: css`
       display: flex;
-      padding: ${paneSpacing} 0 ${paneSpacing} ${paneSpacing};
+      padding: 0 0 ${paneSpacing} ${paneSpacing};
       justify-content: space-between;
       flex-wrap: wrap;
     `,