AddPanelWidget: Add padding to prevent top being cut off (#34806)

* fix(dashboardpage): add padding so add panel chrome isnt cut off

* fix(addpanelwidget): introduce wrapping element to cater for pulsate animation offset

* refactor(addpanelwidget): use spacing.xs rather than spacing.sm

* test(addpanelwidget): update snapshot

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

@@ -136,7 +136,8 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
   const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []);
 
   return (
-    <div className={cx('panel-container', styles.wrapper)}>
+    <div className={styles.wrapper}>
+      <div className={cx('panel-container', styles.callToAction)}>
         <AddPanelWidgetHandle onCancel={onCancelAddPanel} onBack={addPanelView ? onBack : undefined} styles={styles}>
           {addPanelView ? 'Add panel from panel library' : 'Add panel'}
         </AddPanelWidgetHandle>
@@ -169,6 +170,7 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
           </div>
         )}
       </div>
+    </div>
   );
 };
 
@@ -213,7 +215,12 @@ const getStyles = (theme: GrafanaTheme) => {
   `;
 
   return {
+    // wrapper is used to make sure box-shadow animation isn't cut off in dashboard page
     wrapper: css`
+      height: 100%;
+      padding-top: ${theme.spacing.xs};
+    `,
+    callToAction: css`
       overflow: hidden;
       outline: 2px dotted transparent;
       outline-offset: 2px;

public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap

@@ -2,8 +2,11 @@
 
 exports[`Render should render component 1`] = `
 <div
-  className="panel-container css-e4b3m6"
+  className="css-1q8dxo2"
 >
+  <div
+    className="panel-container css-e4b3m6"
+  >
     <AddPanelWidgetHandle
       onCancel={[Function]}
       styles={
@@ -11,9 +14,10 @@ exports[`Render should render component 1`] = `
           "actionsRow": "css-l02n0m",
           "actionsWrapper": "css-gxxmom",
           "backButton": "css-1cdxa9p",
+          "callToAction": "css-e4b3m6",
           "headerRow": "css-3sdqvi",
           "noMargin": "css-u023fv",
-        "wrapper": "css-e4b3m6",
+          "wrapper": "css-1q8dxo2",
         }
       }
     >
@@ -59,5 +63,6 @@ exports[`Render should render component 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;