From 078fc20a776a84735b43c55f756553b2e0ea0451 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charliemeister@proton.me>
Date: Mon, 11 Nov 2024 11:22:27 +0100
Subject: [PATCH] Remove unnecessary scrollbars in skeleton tab (#8148)

* make button bar flexbox

* remove unnessecary scrollbars

* line break group names

* style buttons

* remove stand-alone style

* add changelog

* adress review
---
 CHANGELOG.unreleased.md                       |  1 +
 .../segments_tab/segment_list_item.tsx        |  2 +
 .../trees_tab/skeleton_tab_view.tsx           | 97 ++++++++++---------
 .../trees_tab/tree_hierarchy_renderers.tsx    | 10 +-
 .../stylesheets/trace_view/_right_menu.less   | 21 ++++
 5 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 969eeeaa90..a0384b3cbc 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -40,6 +40,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug where you could not create annotations for public datasets of other organizations. [#8107](https://github.com/scalableminds/webknossos/pull/8107)
 - Users without edit permissions to a dataset can no longer delete sharing tokens via the API. [#8083](https://github.com/scalableminds/webknossos/issues/8083)
 - Fixed downloading task annotations of teams you are not in, when accessing directly via URI. [#8155](https://github.com/scalableminds/webknossos/pull/8155)
+- Removed unnecessary scrollbars in skeleton tab that occurred especially after resizing. [#8148](https://github.com/scalableminds/webknossos/pull/8148)
 - Deleting a bounding box is now possible independently of a visible segmentation layer. [#8164](https://github.com/scalableminds/webknossos/pull/8164)
 - S3-compliant object storages can now be accessed via HTTPS. [#8167](https://github.com/scalableminds/webknossos/pull/8167)
 
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
index b256d2ea30..ceca9671f8 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
@@ -60,6 +60,8 @@ export function ColoredDotIcon({ colorRGBA }: { colorRGBA: Vector4 }) {
       style={{
         paddingLeft: "10px",
         backgroundColor: rgbaCss,
+        alignSelf: "flex-start",
+        marginTop: 5,
       }}
     />
   );
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx
index bf1edfe0e2..2085d9f101 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx
@@ -852,7 +852,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
     );
 
     return (
-      <div id={treeTabId} className="padded-tab-content">
+      <div id={treeTabId} className="padded-tab-content" style={{ overflow: "hidden" }}>
         <DomVisibilityObserver targetId={treeTabId}>
           {(isVisibleInDom) =>
             !isVisibleInDom ? null : (
@@ -870,52 +870,57 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                   <Spin />
                 </Modal>
                 <Space.Compact className="compact-icons">
-                  <AdvancedSearchPopover
-                    onSelect={this.handleSearchSelect}
-                    data={this.getTreeAndTreeGroupList(trees, treeGroups, orderAttribute)}
-                    searchKey="name"
-                    provideShortcut
-                    targetId={treeTabId}
-                    onSelectAllMatches={this.handleSelectAllMatchingTrees}
-                  >
-                    <ButtonComponent title="Open the search via CTRL + Shift + F">
-                      <SearchOutlined />
+                  <div className="compact-buttons">
+                    <AdvancedSearchPopover
+                      onSelect={this.handleSearchSelect}
+                      data={this.getTreeAndTreeGroupList(trees, treeGroups, orderAttribute)}
+                      searchKey="name"
+                      provideShortcut
+                      targetId={treeTabId}
+                      onSelectAllMatches={this.handleSelectAllMatchingTrees}
+                    >
+                      <ButtonComponent
+                        title="Open the search via CTRL + Shift + F"
+                        className="firstButton"
+                      >
+                        <SearchOutlined />
+                      </ButtonComponent>
+                    </AdvancedSearchPopover>
+                    <ButtonComponent
+                      onClick={this.props.onCreateTree}
+                      title={isEditingDisabled ? isEditingDisabledMessage : "Create new Tree (C)"}
+                      disabled={isEditingDisabled}
+                    >
+                      <i className="fas fa-plus" />
                     </ButtonComponent>
-                  </AdvancedSearchPopover>
-                  <ButtonComponent
-                    onClick={this.props.onCreateTree}
-                    title={isEditingDisabled ? isEditingDisabledMessage : "Create new Tree (C)"}
-                    disabled={isEditingDisabled}
-                  >
-                    <i className="fas fa-plus" />
-                  </ButtonComponent>
-                  <ButtonComponent
-                    onClick={this.handleDelete}
-                    title={isEditingDisabled ? isEditingDisabledMessage : "Delete Selected Trees"}
-                    disabled={isEditingDisabled}
-                  >
-                    <i className="far fa-trash-alt" />
-                  </ButtonComponent>
-                  <ButtonComponent
-                    onClick={this.toggleAllTrees}
-                    title="Toggle Visibility of All Trees (1)"
-                    disabled={isEditingDisabled}
-                  >
-                    <i className="fas fa-toggle-on" />
-                  </ButtonComponent>
-                  <ButtonComponent
-                    onClick={this.toggleInactiveTrees}
-                    title="Toggle Visibility of Inactive Trees (2)"
-                    disabled={isEditingDisabled}
-                  >
-                    <i className="fas fa-toggle-off" />
-                  </ButtonComponent>
-                  <Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
-                    <ButtonComponent>
-                      More
-                      <DownOutlined />
+                    <ButtonComponent
+                      onClick={this.handleDelete}
+                      title={isEditingDisabled ? isEditingDisabledMessage : "Delete Selected Trees"}
+                      disabled={isEditingDisabled}
+                    >
+                      <i className="far fa-trash-alt" />
                     </ButtonComponent>
-                  </Dropdown>
+                    <ButtonComponent
+                      onClick={this.toggleAllTrees}
+                      title="Toggle Visibility of All Trees (1)"
+                      disabled={isEditingDisabled}
+                    >
+                      <i className="fas fa-toggle-on" />
+                    </ButtonComponent>
+                    <ButtonComponent
+                      onClick={this.toggleInactiveTrees}
+                      title="Toggle Visibility of Inactive Trees (2)"
+                      disabled={isEditingDisabled}
+                    >
+                      <i className="fas fa-toggle-off" />
+                    </ButtonComponent>
+                    <Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
+                      <ButtonComponent style={{ overflow: "clip" }} className="lastButton">
+                        More
+                        <DownOutlined />
+                      </ButtonComponent>
+                    </Dropdown>
+                  </div>
                 </Space.Compact>
                 <Space.Compact className="compact-icons compact-items">
                   <ButtonComponent
@@ -938,7 +943,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                     <i className="fas fa-arrow-right" />
                   </ButtonComponent>
                   <Dropdown menu={this.getSettingsDropdown()} trigger={["click"]}>
-                    <ButtonComponent title="Sort">
+                    <ButtonComponent title="Sort" style={{ overflow: "clip" }}>
                       <i className="fas fa-sort-alpha-down" />
                     </ButtonComponent>
                   </Dropdown>
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx
index c327ba0509..08039bc489 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx
@@ -87,10 +87,10 @@ export function renderTreeNode(
 
   return (
     <div
-      className="nowrap"
       onContextMenu={(evt) =>
         onOpenContextMenu(createMenuForTree(tree, props, hideContextMenu), evt)
       }
+      style={{ wordBreak: "break-word" }}
     >
       <ColoredDotIcon colorRGBA={[...tree.color, 1.0]} />
       {`(${tree.nodes.size()}) `} {maybeProofreadingIcon} {tree.name}
@@ -208,18 +208,16 @@ export function renderGroupNode(
   const displayableName = name.trim() || "<Unnamed Group>";
   return (
     <div
-      className="nowrap"
       onContextMenu={(evt) =>
         onOpenContextMenu(
           createMenuForTreeGroup(props, hideContextMenu, node, expandedNodeKeys),
           evt,
         )
       }
+      style={{ wordBreak: "break-word" }}
     >
-      <span>
-        <FolderOutlined className="icon-margin-right" />
-        {displayableName}
-      </span>
+      <FolderOutlined className="icon-margin-right" />
+      {displayableName}
     </div>
   );
 }
diff --git a/frontend/stylesheets/trace_view/_right_menu.less b/frontend/stylesheets/trace_view/_right_menu.less
index ff7dc47b44..dc74e8e0df 100644
--- a/frontend/stylesheets/trace_view/_right_menu.less
+++ b/frontend/stylesheets/trace_view/_right_menu.less
@@ -139,6 +139,27 @@
   }
 }
 
+.compact-buttons{
+  display: "inline-flex";
+  flex-wrap: "wrap";
+
+  button{
+    border-radius: 0px;
+    margin-inline: -1px;
+    margin-top: -1px;
+  }
+
+  button.firstButton{
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  
+  button.lastButton{
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+
 .margin-bottom {
   margin-bottom: 10px;
 }