Do not line wrap comments

CHANGELOG.md

@@ -19,6 +19,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 
 ### Fixed
 
+- Fixed overlap in comment tab for long tree names or comments. [#3272](https://github.com/scalableminds/webknossos/pull/3272)
 - Fixed a bug which caused data to not be displayed correctly if adjacent data does not exist.[#3270](https://github.com/scalableminds/webknossos/pull/3270)
 - Fixed a bug which caused initial rendering to sometimes miss some buckets. [#3262](https://github.com/scalableminds/webknossos/pull/3262)
 - Fixed a bug which caused the save-button to never show success for volume tracings. [#3267](https://github.com/scalableminds/webknossos/pull/3267)

app/assets/javascripts/oxalis/view/right-menu/comment_tab/comment.js

@@ -55,16 +55,18 @@ export function Comment({ comment, isActive, style }: CommentProps) {
     Store.dispatch(setActiveNodeAction(comment.nodeId));
   };
 
-  const liClassName = classNames("markdown", "markdown-small", {
+  const liClassName = classNames("markdown", "markdown-small", "nowrap", {
     bold: isActive,
   });
   const iClassName = classNames("fa", "fa-fw", {
     "fa-angle-right": isActive,
   });
+  // eslint-disable-next-line no-unused-vars
+  const { width, ...liStyle } = style;
   const isMultiLine = comment.content.indexOf("\n") !== -1;
 
   return (
-    <li className={liClassName} style={style}>
+    <li className={liClassName} style={liStyle}>
       <span>
         <i className={iClassName} />
         <a onClick={handleClick}>{comment.nodeId}</a>

app/assets/javascripts/oxalis/view/right-menu/comment_tab/comment_tab_view.js

@@ -393,7 +393,7 @@ class CommentTabView extends React.PureComponent<Props, CommentTabStateType> {
             title="Collapse or expand groups"
           />
         </InputGroup>
-        <div style={{ flex: "1 1 auto", marginTop: 20 }}>
+        <div style={{ flex: "1 1 auto", marginTop: 20, listStyle: "none" }}>
           <AutoSizer>
             {({ height, width }) => (
               <div style={{ height, width }} className="flex-overflow">

app/assets/javascripts/oxalis/view/right-menu/comment_tab/tree_with_comments.js

@@ -16,14 +16,16 @@ function TreeWithComments(props: Props) {
     props.onExpand(props.tree.treeId);
   };
 
-  const liClassName = classNames({ bold: props.isActive });
+  const liClassName = classNames("nowrap", { bold: props.isActive });
   const iClassName = classNames("fa", "fa-fw", {
     "fa-chevron-right": props.collapsed,
     "fa-chevron-down": !props.collapsed,
   });
+  // eslint-disable-next-line no-unused-vars
+  const { width, ...liStyle } = props.style;
 
   return (
-    <li style={props.style} className={liClassName}>
+    <li style={liStyle} className={liClassName}>
       <a onClick={handleToggleComment}>
         <i className={iClassName} />
       </a>