fix overlap issue

serlo · Sep 26, 2023 · 8c4095a · 8c4095a
1 parent cf62536
commit 8c4095a
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/serlo-editor/plugins/image/editor.tsx b/src/serlo-editor/plugins/image/editor.tsx
@@ -1,4 +1,5 @@
 import { faImages } from '@fortawesome/free-solid-svg-icons'
+import clsx from 'clsx'
 import { useEffect, useRef, useState } from 'react'
 
 import type { ImageProps } from '.'
@@ -73,7 +74,13 @@ export function ImageEditor(props: ImageProps) {
         />
       ) : null}
 
-      <div className="z-[2] [&_img]:min-h-[4rem]" data-qa="plugin-image-editor">
+      <div
+        className={clsx(
+          'z-[2] [&_img]:min-h-[4rem]',
+          hasFocus && showInlineImageUrl ? 'relative' : ''
+        )}
+        data-qa="plugin-image-editor"
+      >
         {hasFocus && showInlineImageUrl ? (
           <div className="absolute left-side top-side z-[3]">
             <InlineSrcControls {...props} urlInputRef={urlInputRef} />