Modal: Fix modal button row

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -79,7 +79,7 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
     modalContent: css({
       overflow: 'auto',
       padding: theme.spacing(3, 3, 0, 3),
-      marginBottom: theme.spacing(3),
+      marginBottom: theme.spacing(2.5),
       scrollbarWidth: 'thin',
       width: '100%',
 
@@ -91,7 +91,7 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
     modalButtonRow: css({
       background: theme.colors.background.primary,
       position: 'sticky',
-      bottom: 0,
+      bottom: 1,
       paddingTop: theme.spacing(2),
       paddingBottom: theme.spacing(0.5),
       zIndex: 1,

public/app/features/dashboard-scene/scene/DashboardDataLayerControls.tsx

@@ -15,13 +15,14 @@ export function DashboardDataLayerControls({ dashboard }: { dashboard: Dashboard
   const state = sceneGraph.getData(dashboard).useState();
   // It is possible to render the controls for the annotation data layers in separate places using the `placement` property.
   // In case it's not specified, we are rendering the controls here (default).
-  const isDefaultPlacement = (layer: SceneDataLayerProvider) => layer.state.placement === undefined;
+  const isDefaultPlacementAndNotHidden = (layer: SceneDataLayerProvider) =>
+    layer.state.placement === undefined && !layer.state.isHidden;
   const styles = useStyles2(getStyles);
 
   if (isDashboardDataLayerSetState(state)) {
     return (
       <>
-        {state.annotationLayers.filter(isDefaultPlacement).map((layer) => (
+        {state.annotationLayers.filter(isDefaultPlacementAndNotHidden).map((layer) => (
           <div key={layer.state.key} className={styles.container}>
             <DataLayerControl layer={layer} />
           </div>
@@ -35,6 +36,7 @@ export function DashboardDataLayerControls({ dashboard }: { dashboard: Dashboard
 
 const getStyles = (theme: GrafanaTheme2) => ({
   container: css({
+    label: 'dashboard-data-layer-controls',
     display: 'inline-flex',
     alignItems: 'center',
     verticalAlign: 'middle',

public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx

@@ -18,7 +18,7 @@ export function DashboardLinksControls({ links, dashboard }: Props) {
   const uid = dashboard.state.uid;
   const styles = useStyles2(getStyles);
 
-  if (!links || !uid) {
+  if (!links || !uid || links.length === 0) {
     return null;
   }
 
@@ -36,6 +36,7 @@ export function DashboardLinksControls({ links, dashboard }: Props) {
 function getStyles(theme: GrafanaTheme2) {
   return {
     linksContainer: css({
+      label: 'dashboard-links-controls',
       display: 'inline-flex',
       gap: theme.spacing(1),
       marginRight: theme.spacing(1),

public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx

@@ -47,5 +47,7 @@ export function DashboardControlsButton({ dashboard }: { dashboard: DashboardSce
 const getStyles = (theme: GrafanaTheme2) => ({
   dropdownButton: css({
     display: 'inline-flex',
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
   }),
 });