From 0609c26c07e6a4b64b6b78795395336b94a969c8 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charliemeister@proton.me>
Date: Wed, 10 Apr 2024 17:55:58 +0200
Subject: [PATCH] Fix position of context menu in layer settings for layers
 with long names (#7747)

* fix position of context menu

* add PR number

* improve changelog
---
 CHANGELOG.unreleased.md                                |  1 +
 .../view/left-border-tabs/layer_settings_tab.tsx       | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 659cee55dbe..6c71a18306b 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -29,6 +29,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed that invisible nodes could be selected when using the skeleton tool. [#7732](https://github.com/scalableminds/webknossos/pull/7732)
 - Fixed a bug where users that have no team memberships were omitted from the user list. [#7721](https://github.com/scalableminds/webknossos/pull/7721)
 - Added an appropriate placeholder to be rendered in case the timetracking overview is otherwise empty. [#7736](https://github.com/scalableminds/webknossos/pull/7736)
+- The overflow menu in the layer settings tab for layers with long names can now be opened comfortably. [#7747](https://github.com/scalableminds/webknossos/pull/7747)
 
 ### Removed
 
diff --git a/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx b/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx
index a465864febe..b8e2cf26237 100644
--- a/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx
+++ b/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx
@@ -816,13 +816,13 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
             {isColorLayer ? null : this.getOptionalDownsampleVolumeIcon(maybeVolumeTracing)}
           </div>
         </div>
-        <Dropdown menu={{ items }} trigger={["hover"]} placement="bottomRight">
-          <div className="flex-container" style={{ cursor: "pointer" }}>
-            <div className="flex-item">
+        <div className="flex-container" style={{ cursor: "pointer" }}>
+          <div className="flex-item">
+            <Dropdown menu={{ items }} trigger={["hover"]} placement="bottomRight">
               <EllipsisOutlined />
-            </div>
+            </Dropdown>
           </div>
-        </Dropdown>
+        </div>
       </div>
     );
   };