Saved Templates: fix buttons being hidden under elements

packages/story-editor/src/components/library/panes/pageTemplates/savedPageTemplate.js

@@ -84,6 +84,14 @@ PreviewPageWrapper.propTypes = {
   pageSize: PageSizePropType.isRequired,
 };
 
+const ElementsWrapper = styled.div`
+  z-index: 10;
+`;
+
+const TemplateInsertionOverlay = styled(InsertionOverlay)`
+  z-index: 11;
+`;
+
 const DeleteButton = styled(ActionButton)`
   top: 4px;
   right: 4px;
@@ -218,18 +226,24 @@ function SavedPageTemplate(
             draggable={false}
           />
         ) : (
-          <UnitsProvider
-            pageSize={{
-              height: pageSize.height,
-              width: pageSize.width,
-            }}
-          >
-            {page.elements.map((element) => (
-              <DisplayElement key={element.id} previewMode element={element} />
-            ))}
-          </UnitsProvider>
+          <ElementsWrapper>
+            <UnitsProvider
+              pageSize={{
+                height: pageSize.height,
+                width: pageSize.width,
+              }}
+            >
+              {page.elements.map((element) => (
+                <DisplayElement
+                  key={element.id}
+                  previewMode
+                  element={element}
+                />
+              ))}
+            </UnitsProvider>
+          </ElementsWrapper>
         )}
-        {isActive && <InsertionOverlay showIcon={false} />}
+        {isActive && <TemplateInsertionOverlay showIcon={false} />}
         <ActionButton
           ref={insertButtonRef}
           onClick={(e) => {

packages/story-editor/src/components/library/panes/shared/index.js

@@ -20,6 +20,11 @@
 import styled, { css } from 'styled-components';
 import { Button, BUTTON_VARIANTS } from '@googleforcreators/design-system';
 
+/**
+ * Internal dependencies
+ */
+import { Z_INDEX_LIBRARY_ACTION_BUTTON } from '../../../../constants/zIndex';
+
 export const PANE_PADDING = '1em';
 
 const Pane = styled.section.attrs(({ isActive }) => ({
@@ -62,6 +67,7 @@ const ActionButton = styled(Button).attrs({ variant: BUTTON_VARIANTS.ICON })`
   width: ${ACTION_BUTTON_SIZE}px;
   height: ${ACTION_BUTTON_SIZE}px;
   opacity: ${({ $display }) => ($display ? '1' : '0')};
+  z-index: ${Z_INDEX_LIBRARY_ACTION_BUTTON};
 `;
 
 const PageTemplateTitleContainer = styled.div`

packages/story-editor/src/components/library/panes/shared/insertionOverlay.js

@@ -49,12 +49,12 @@ const Scrim = styled.div`
   pointer-events: none;
 `;
 
-function InsertionOverlay({ showIcon = true }) {
+function InsertionOverlay({ showIcon = true, className = '' }) {
   // The icon looks like a button but is just representational.
   // The real interactive element is the containing element.
   // If the showIcon is `false`, we still display the scrim for shade.
   return (
-    <Scrim>
+    <Scrim className={className}>
       {showIcon && (
         <IconContainer role="presentation">
           <Icons.PlusFilledSmall />
@@ -66,6 +66,7 @@ function InsertionOverlay({ showIcon = true }) {
 
 InsertionOverlay.propTypes = {
   showIcon: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 export default InsertionOverlay;

packages/story-editor/src/constants/zIndex.js

@@ -49,3 +49,6 @@ export const Z_INDEX_GRID_VIEW_SLIDER = 11;
 // In PublishTime, the time picker's tooltip's z-index needs to be higher than
 // the z-index of the date picker popup itself.
 export const Z_INDEX_TIME_PICKER_TOOLTIP = 11;
+
+// In the library, the action button has to be on top of the other layers.
+export const Z_INDEX_LIBRARY_ACTION_BUTTON = 20;