fix: z-index issue with Page dropdown hidden behind files (#3463)

app/javascript/components/PreviewSidebar.tsx

@@ -23,7 +23,7 @@ export const PreviewSidebar = ({
   return (
     <aside
       className={cx(
-        "bg-filled sticky top-0 hidden min-h-screen flex-col gap-4 self-start p-6 lg:flex lg:border-l lg:border-border",
+        "bg-filled sticky top-0 hidden max-h-screen flex-col gap-4 self-start overflow-y-auto p-6 lg:flex lg:border-l lg:border-border",
         className,
       )}
       aria-labelledby={`${uid}-title`}

app/javascript/components/ProductEdit/ContentTab/PageTab.tsx

@@ -95,7 +95,7 @@ export const PageTab = ({
             <PopoverTrigger>
               <Icon name="three-dots" />
             </PopoverTrigger>
-            <PopoverContent className="border-0 p-0 shadow-none">
+            <PopoverContent className="border-0 p-0 shadow-none z-50">
               <div role="menu">
                 <div role="menuitem" onClick={() => setRenaming(true)}>
                   <Icon name="pencil" /> Rename

app/javascript/components/TiptapExtensions/Image.tsx

@@ -8,6 +8,7 @@ import { cast } from "ts-safe-cast";
 import { assertDefined } from "$app/utils/assert";
 
 import { LoadingSpinner } from "$app/components/LoadingSpinner";
+import { RemoveButton } from "$app/components/RemoveButton";
 import {
   getInsertAtFromSelection,
   ImageUploadSettings,
@@ -79,6 +80,12 @@ const ImageNodeView = ({ node, editor, getPos }: NodeViewProps) => {
     }
   }, [editor, getPos]);
 
+  const handleDelete = React.useCallback(() => {
+    if (getPos !== undefined) {
+      deleteImageInView(editor.view, attrs.src);
+    }
+  }, [editor, getPos, attrs.src]);
+
   useOnOutsideClick([nodeRef], () => setHasFocus(false));
 
   const [isImageLoaded, setIsImageLoaded] = React.useState(false);
@@ -100,6 +107,12 @@ const ImageNodeView = ({ node, editor, getPos }: NodeViewProps) => {
         data-has-focus={hasFocus || undefined}
         style={isUploading ? { position: "relative" } : undefined}
       >
+        {hasFocus && editor.isEditable && (
+          <RemoveButton
+            onClick={handleDelete}
+            style={{ position: "absolute", top: "-8px", right: "-8px", zIndex: 1 }}
+          />
+        )}
         {attrs.link ? (
           <a href={cast(attrs.link)} target="_blank" rel="noopener noreferrer nofollow">
             {imageMarkup}

app/javascript/pages/HelpCenter/Layout.tsx

@@ -40,7 +40,7 @@ function ReportBugButton() {
       rel="noopener noreferrer"
       className="flex items-center gap-2"
     >
-      <img src={githubIcon} alt="" className="h-4 w-4" />
+      <img src={githubIcon} alt="" className="h-4 w-4 invert" />
       Report a bug
     </NavigationButton>
   );
@@ -95,7 +95,7 @@ function HelpCenterHeader({
     if (showSearchButton) {
       return (
         <Link href={Routes.help_center_root_path()} className="button" aria-label="Search" title="Search">
-          <Icon name="solid-search" />
+          <Icon name="solid-search" className="w-5 h-5" />
         </Link>
       );
     }