From 8c4095a1d5714c94d13ccf0e2da59572259ceb80 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 26 Sep 2023 14:18:35 +0200
Subject: [PATCH] fix overlap issue

---
 src/serlo-editor/plugins/image/editor.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/serlo-editor/plugins/image/editor.tsx b/src/serlo-editor/plugins/image/editor.tsx
index d57c5a1009..5c325e8ba0 100644
--- 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} />