From 7d7e7b2867c007001020e95ee2cfb8c8d019f863 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Tue, 31 Jan 2023 18:11:46 +0100
Subject: [PATCH 1/7] refactored input component TS types

---
 .../admin/dataset/dataset_upload_view.tsx     |  2 +-
 frontend/javascripts/libs/vector_input.tsx    | 17 +++---
 .../view/action-bar/dataset_position_view.tsx |  2 -
 .../view/components/input_component.tsx       | 57 +++++++++++++++----
 .../oxalis/view/components/markdown_modal.tsx |  2 +-
 .../comment_tab/comment_tab_view.tsx          | 13 ++++-
 6 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/frontend/javascripts/admin/dataset/dataset_upload_view.tsx b/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
index 04b1fde0ae9..31775d379d6 100644
--- a/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
+++ b/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
@@ -743,7 +743,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
                     width: 400,
                   }}
                   allowDecimals
-                  onChange={(scale) => {
+                  onChange={(scale: Vector3) => {
                     if (this.formRef.current == null) return;
                     this.formRef.current.setFieldsValue({
                       scale,
diff --git a/frontend/javascripts/libs/vector_input.tsx b/frontend/javascripts/libs/vector_input.tsx
index 3dd44e7d3ad..4a832c16279 100644
--- a/frontend/javascripts/libs/vector_input.tsx
+++ b/frontend/javascripts/libs/vector_input.tsx
@@ -2,14 +2,18 @@ import * as React from "react";
 import _ from "lodash";
 import type { ServerBoundingBoxTypeTuple } from "types/api_flow_types";
 import type { Vector3, Vector6 } from "oxalis/constants";
-import InputComponent, { InputComponentProps } from "oxalis/view/components/input_component";
+import InputComponent, {
+  InputComponentCommonProps,
+  InputElementProps,
+} from "oxalis/view/components/input_component";
 import * as Utils from "libs/utils";
 
-type BaseProps<T> = Omit<InputComponentProps, "value"> & {
+type BaseProps<T> = Omit<InputComponentCommonProps & InputElementProps, "value" | "onChange"> & {
   value: T | string;
   onChange: (value: T) => void;
   changeOnlyOnBlur?: boolean;
   allowDecimals?: boolean;
+  autoSize?: boolean;
 };
 type State = {
   isEditing: boolean;
@@ -51,7 +55,7 @@ class BaseVector<T extends Vector3 | Vector6> extends React.PureComponent<BasePr
     return value;
   }
 
-  handleBlur = () => {
+  handleBlur = (_: React.FocusEvent<HTMLInputElement>) => {
     this.setState({
       isEditing: false,
     });
@@ -89,7 +93,7 @@ class BaseVector<T extends Vector3 | Vector6> extends React.PureComponent<BasePr
     return vector;
   }
 
-  handleFocus = () => {
+  handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {
     this.setState({
       isEditing: true,
       text: this.getText(this.props.value),
@@ -127,7 +131,6 @@ class BaseVector<T extends Vector3 | Vector6> extends React.PureComponent<BasePr
 
     return (
       <InputComponent
-        // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
         onChange={this.handleChange}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
@@ -136,6 +139,7 @@ class BaseVector<T extends Vector3 | Vector6> extends React.PureComponent<BasePr
           autoSize ? { ...style, width: this.getText(this.state.text).length * 8 + 25 } : style
         }
         {...props}
+        isTextArea={false}
       />
     );
   }
@@ -147,7 +151,7 @@ export class Vector3Input extends BaseVector<Vector3> {
 export class Vector6Input extends BaseVector<Vector6> {
   defaultValue: Vector6 = [0, 0, 0, 0, 0, 0];
 }
-type BoundingBoxInputProps = Omit<InputComponentProps, "value"> & {
+type BoundingBoxInputProps = Omit<InputComponentCommonProps & InputElementProps, "value"> & {
   value: ServerBoundingBoxTypeTuple;
   onChange: (arg0: ServerBoundingBoxTypeTuple) => void;
 };
@@ -179,7 +183,6 @@ export class BoundingBoxInput extends React.PureComponent<BoundingBoxInputProps>
         {...props}
         value={vector6Value}
         changeOnlyOnBlur
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '([x, y, z, width, height, depth]: [any, any,... Remove this comment to see the full error message
         onChange={([x, y, z, width, height, depth]) =>
           onChange({
             topLeft: [x, y, z],
diff --git a/frontend/javascripts/oxalis/view/action-bar/dataset_position_view.tsx b/frontend/javascripts/oxalis/view/action-bar/dataset_position_view.tsx
index 3a49d5f60ec..be90f90322e 100644
--- a/frontend/javascripts/oxalis/view/action-bar/dataset_position_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/dataset_position_view.tsx
@@ -129,7 +129,6 @@ class DatasetPositionView extends PureComponent<Props> {
           </Tooltip>
           <Vector3Input
             value={position}
-            // @ts-expect-error ts-migrate(2322) FIXME: Type '(position: Vector3) => void' is not assignab... Remove this comment to see the full error message
             onChange={this.handleChangePosition}
             autoSize
             // @ts-expect-error ts-migrate(2322) FIXME: Type '{ textAlign: string; }' is not assignable to... Remove this comment to see the full error message
@@ -159,7 +158,6 @@ class DatasetPositionView extends PureComponent<Props> {
             </Tooltip>
             <Vector3Input
               value={rotation}
-              // @ts-expect-error ts-migrate(2322) FIXME: Type '(rotation: Vector3) => void' is not assignab... Remove this comment to see the full error message
               onChange={this.handleChangeRotation}
               style={{
                 textAlign: "center",
diff --git a/frontend/javascripts/oxalis/view/components/input_component.tsx b/frontend/javascripts/oxalis/view/components/input_component.tsx
index 7a3affafb50..5758c065ab1 100644
--- a/frontend/javascripts/oxalis/view/components/input_component.tsx
+++ b/frontend/javascripts/oxalis/view/components/input_component.tsx
@@ -3,11 +3,36 @@ import * as React from "react";
 import _ from "lodash";
 import TextArea, { TextAreaProps } from "antd/lib/input/TextArea";
 
-export type InputComponentProps = InputProps &
-  TextAreaProps & {
-    title?: React.ReactNode;
-    isTextArea?: boolean;
-  };
+export type InputComponentProps = InputComponentCommonProps &
+  (InputElementProps | TextAreaElementProps);
+
+export type InputComponentCommonProps = {
+  value: React.InputHTMLAttributes<HTMLInputElement>["value"];
+  title?: React.ReactNode;
+  style?: React.InputHTMLAttributes<HTMLInputElement>["style"];
+  placeholder?: React.InputHTMLAttributes<HTMLInputElement>["placeholder"];
+  disabled?: React.InputHTMLAttributes<HTMLInputElement>["disabled"];
+  size?: InputProps["size"];
+};
+
+export type InputElementProps = {
+  // The discriminated union
+  isTextArea?: false;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+};
+
+type TextAreaElementProps = {
+  isTextArea: true;
+  autoSize: TextAreaProps["autoSize"];
+  rows: TextAreaProps["rows"];
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+  onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+};
 
 type InputComponentState = {
   isFocused: boolean;
@@ -26,8 +51,6 @@ type InputComponentState = {
 class InputComponent extends React.PureComponent<InputComponentProps, InputComponentState> {
   static defaultProps: InputComponentProps = {
     onChange: _.noop,
-    onFocus: _.noop,
-    onBlur: _.noop,
     onPressEnter: undefined,
     placeholder: "",
     value: "",
@@ -96,19 +119,31 @@ class InputComponent extends React.PureComponent<InputComponentProps, InputCompo
 
   render() {
     const { isTextArea, onPressEnter, title, style, ...inputProps } = this.props;
-    const InputComponentType: typeof TextArea | typeof Input = isTextArea ? TextArea : Input;
-    const input = (
-      <InputComponentType
+    // const InputComponentType: typeof TextArea | typeof Input = isTextArea ? TextArea : Input;
+    const input = isTextArea ? (
+      <TextArea
+        {...inputProps}
+        style={title == null ? style : undefined}
+        onChange={this.handleChange}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        value={this.state.currentValue}
+        onPressEnter={onPressEnter}
+        onKeyDown={this.blurOnEscape}
+      />
+    ) : (
+      <Input
         {...inputProps}
         style={title == null ? style : undefined}
         onChange={this.handleChange}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         value={this.state.currentValue}
-        onPressEnter={onPressEnter != null ? onPressEnter : this.blurYourself}
+        onPressEnter={onPressEnter}
         onKeyDown={this.blurOnEscape}
       />
     );
+
     // The input needs to be wrapped in a span in order for the tooltip to work. See https://github.com/react-component/tooltip/issues/18#issuecomment-140078802.
     return title != null ? (
       <Tooltip title={title} style={style}>
diff --git a/frontend/javascripts/oxalis/view/components/markdown_modal.tsx b/frontend/javascripts/oxalis/view/components/markdown_modal.tsx
index 197d6878d2e..79e2059beb9 100644
--- a/frontend/javascripts/oxalis/view/components/markdown_modal.tsx
+++ b/frontend/javascripts/oxalis/view/components/markdown_modal.tsx
@@ -33,7 +33,7 @@ export function MarkdownModal({
   label: string;
   isOpen?: boolean;
   onOk: () => void;
-  onChange: (arg0: React.SyntheticEvent) => void;
+  onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
 }) {
   return (
     <Modal
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx
index ff980266bb7..dd2b8ac50d6 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx
@@ -241,7 +241,10 @@ class CommentTabView extends React.Component<PropsWithSkeleton, CommentTabState>
     this.nextComment(false);
   };
 
-  handleChangeInput = (evt: React.SyntheticEvent, insertLineBreaks: boolean = false) => {
+  handleChangeInput = (
+    evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    insertLineBreaks: boolean = false,
+  ) => {
     // @ts-ignore
     const commentText = evt.target.value;
 
@@ -456,8 +459,12 @@ class CommentTabView extends React.Component<PropsWithSkeleton, CommentTabState>
                         ? undefined
                         : messages["tracing.read_only_mode_notification"]
                     }
-                    onChange={(evt) => this.handleChangeInput(evt, true)}
-                    onPressEnter={(evt) => (evt.target as HTMLElement).blur()}
+                    onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+                      this.handleChangeInput(evt, true)
+                    }
+                    onPressEnter={(evt: React.KeyboardEvent<HTMLInputElement>) =>
+                      (evt.target as HTMLElement).blur()
+                    }
                     placeholder="Add comment"
                     style={{
                       width: "50%",

From 7ea37aa1f3ac6a0abb7a87c05fc822e7e8b8688d Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 1 Feb 2023 13:41:06 +0100
Subject: [PATCH 2/7] fix CSS line breaks for dataset description + name

---
 .../view/components/editable_text_label.tsx   | 96 +++++++++----------
 .../dataset_info_tab_view.tsx                 |  8 +-
 2 files changed, 51 insertions(+), 53 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/components/editable_text_label.tsx b/frontend/javascripts/oxalis/view/components/editable_text_label.tsx
index 560c860a954..c05108df4f2 100644
--- a/frontend/javascripts/oxalis/view/components/editable_text_label.tsx
+++ b/frontend/javascripts/oxalis/view/components/editable_text_label.tsx
@@ -58,9 +58,8 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
     }
   }
 
-  handleInputChange = (event: React.SyntheticEvent) => {
+  handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
     this.setState({
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'EventTarg... Remove this comment to see the full error message
       value: event.target.value,
     });
   };
@@ -113,6 +112,7 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
   render() {
     const iconStyle = {
       cursor: "pointer",
+      marginTop: 5
     };
     const margin = this.props.margin != null ? this.props.margin : "0 10px";
     const inputComponentProps: InputProps = {
@@ -132,7 +132,7 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
 
     if (this.state.isEditing) {
       return (
-        <span>
+        <span style={{ display: "inline-flex" }}>
           {this.props.rows === 1 ? (
             <React.Fragment>
               <Input {...inputComponentProps} onBlur={() => this.handleOnChange} />
@@ -159,56 +159,50 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
       );
     } else {
       return (
-        /* @ts-expect-error ts-migrate(2322) FIXME: Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message */
-        <span className={this.props.markdown ? "flex-container" : null}>
-          <span
-            style={{
-              margin,
-              display: "inline-block",
-            }}
-            /* @ts-expect-error ts-migrate(2322) FIXME: Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message */
-            className={this.props.onClick != null ? "clickable-text" : null}
-            onClick={this.props.onClick}
-            onContextMenu={this.props.onContextMenu}
-          >
-            {this.props.markdown ? (
-              <Markdown
-                className="flex-item"
-                source={this.props.value}
-                options={{
-                  html: false,
-                  breaks: true,
-                  linkify: true,
+        <div
+          style={{
+            margin,
+            display: "inline-flex",
+          }}
+          className={this.props.onClick != null ? "clickable-text" : undefined}
+          onClick={this.props.onClick}
+          onContextMenu={this.props.onContextMenu}
+        >
+          {this.props.markdown ? (
+            <Markdown
+              className="flex-item"
+              source={this.props.value}
+              options={{
+                html: false,
+                breaks: true,
+                linkify: true,
+              }}
+              container="span"
+              style={isInvalidStyleMaybe}
+            />
+          ) : (
+            <span style={isInvalidStyleMaybe}>{this.props.value}</span>
+          )}
+          {this.props.disableEditing ? null : (
+            <Tooltip key="edit" title={`Edit ${this.props.label}`} placement="bottom">
+              <EditOutlined
+                className={this.props.markdown ? "flex-item" : undefined}
+                style={{
+                  ...iconStyle,
+                  marginLeft: 5,
+                  display: "inline",
+                  whiteSpace: "nowrap",
+                }}
+                onClick={(evt) => {
+                  evt.stopPropagation();
+                  this.setState({
+                    isEditing: true,
+                  });
                 }}
-                container="span"
-                style={isInvalidStyleMaybe}
               />
-            ) : (
-              <span style={isInvalidStyleMaybe}>{this.props.value}</span>
-            )}
-            {this.props.disableEditing ? null : (
-              <Tooltip key="edit" title={`Edit ${this.props.label}`} placement="bottom">
-                <EditOutlined
-                  /* @ts-expect-error ts-migrate(2322) FIXME: Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message */
-                  className={this.props.markdown ? "flex-item" : null}
-                  style={{
-                    /* @ts-expect-error ts-migrate(2322) FIXME: Type '{ iconStyle: { cursor: string; }; marginLeft... Remove this comment to see the full error message */
-                    iconStyle,
-                    marginLeft: 5,
-                    display: "inline",
-                    whiteSpace: "nowrap",
-                  }}
-                  onClick={(evt) => {
-                    evt.stopPropagation();
-                    this.setState({
-                      isEditing: true,
-                    });
-                  }}
-                />
-              </Tooltip>
-            )}
-          </span>
-        </span>
+            </Tooltip>
+          )}
+        </div>
       );
     }
   }
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx
index 0b6e5f12dda..c9d82eeb89e 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx
@@ -459,7 +459,11 @@ class DatasetInfoTabView extends React.PureComponent<Props, State> {
     } else {
       // Or display the editable explorative tracing name
       annotationTypeLabel = (
-        <span>
+        <span
+          style={{
+            display: "inline-flex",
+          }}
+        >
           Annotation:
           <EditableTextLabel
             value={tracingName}
@@ -477,7 +481,7 @@ class DatasetInfoTabView extends React.PureComponent<Props, State> {
       descriptionEditField = (
         <span
           style={{
-            verticalAlign: "top",
+            display: "inline-flex",
           }}
         >
           Description:

From a6d1e58bb2bf96dc882e28c67f08710fc3b58a44 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 1 Feb 2023 13:41:28 +0100
Subject: [PATCH 3/7] fix some types

---
 frontend/javascripts/components/text_with_description.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/components/text_with_description.tsx b/frontend/javascripts/components/text_with_description.tsx
index 30414e7cdb4..21ef7e4b253 100644
--- a/frontend/javascripts/components/text_with_description.tsx
+++ b/frontend/javascripts/components/text_with_description.tsx
@@ -4,11 +4,13 @@ import Markdown from "react-remarkable";
 import * as React from "react";
 import type { EditableTextLabelProp } from "oxalis/view/components/editable_text_label";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
+
 type EditableProps = EditableTextLabelProp & {
   isEditable: true;
   description: string;
 };
 type NonEditableProps = {
+  markdown?: boolean 
   isEditable: false;
   description: string;
   value: string;
@@ -61,8 +63,7 @@ class TextWithDescription extends React.PureComponent<Props> {
             </Tooltip>
           ) : null}
         </span>
-        {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'string | null' is not assignable to type 'st... Remove this comment to see the full error message */}
-        <span className={hasDescription ? "flex-item" : null}>
+        <span className={hasDescription ? "flex-item" : undefined}>
           {isEditable ? (
             // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             <EditableTextLabel {...editableProps} />
@@ -73,7 +74,6 @@ class TextWithDescription extends React.PureComponent<Props> {
                 display: "inline-block",
               }}
             >
-              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'markdown' does not exist on type 'Readon... Remove this comment to see the full error message */}
               {this.props.markdown ? (
                 <Markdown
                   source={this.props.value}

From b4f4a067711b0e410e2b96b7d2baa35da10b629b Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 1 Feb 2023 13:47:41 +0100
Subject: [PATCH 4/7] fix segment list line breaks

---
 .../view/right-border-tabs/segments_tab/segment_list_item.tsx  | 3 +++
 1 file changed, 3 insertions(+)

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 c7bd26de746..42f856185cf 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
@@ -40,6 +40,7 @@ function ColoredDotIconForSegment({ segmentColorHSLA }: { segmentColorHSLA: Vect
       style={{
         paddingLeft: "10px",
         backgroundColor: hslaCss,
+        marginTop: 5,
       }}
     />
   );
@@ -470,6 +471,7 @@ function _SegmentListItem({
         trigger={["contextMenu"]}
       >
         <Tooltip title={getSegmentTooltip(segment)}>
+          <div style={{display: "inline-flex"}}>
           <ColoredDotIconForSegment segmentColorHSLA={segmentColorHSLA} />
           <EditableTextLabel
             value={segment.name || `Segment ${segment.id}`}
@@ -516,6 +518,7 @@ function _SegmentListItem({
               />
             </Tooltip>
           ) : null}
+          </div>
         </Tooltip>
       </Dropdown>
 

From 3802f862f991b194894c35420f7dd6a52464ea7b Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Wed, 1 Feb 2023 16:29:36 +0100
Subject: [PATCH 5/7] fixed lined breaks in segments list

---
 CHANGELOG.unreleased.md                       |  1 +
 .../components/text_with_description.tsx      |  2 +-
 .../view/components/editable_text_label.tsx   |  6 +-
 .../segments_tab/segment_list_item.tsx        | 89 +++++++++----------
 4 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index e4cbe1baca9..e4dcb0bb446 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -41,6 +41,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug where zarr-streamed datasets would produce (very rare) rendering errors. [#6782](https://github.com/scalableminds/webknossos/pull/6782)
 - Fixed a bug where publicly shared annotations were not viewable by users without an account. [#6784](https://github.com/scalableminds/webknossos/pull/6784)
 - Fixed that the proofreading tool allowed to split/merge with segment 0 which led to an inconsistent state. [#6793](https://github.com/scalableminds/webknossos/pull/6793)
+- Fixed some layouting issues with line breaks in segment list/dataset info tab [#6799](https://github.com/scalableminds/webknossos/pull/6799)
 
 ### Removed
 
diff --git a/frontend/javascripts/components/text_with_description.tsx b/frontend/javascripts/components/text_with_description.tsx
index 21ef7e4b253..999424c0d63 100644
--- a/frontend/javascripts/components/text_with_description.tsx
+++ b/frontend/javascripts/components/text_with_description.tsx
@@ -10,7 +10,7 @@ type EditableProps = EditableTextLabelProp & {
   description: string;
 };
 type NonEditableProps = {
-  markdown?: boolean 
+  markdown?: boolean;
   isEditable: false;
   description: string;
   value: string;
diff --git a/frontend/javascripts/oxalis/view/components/editable_text_label.tsx b/frontend/javascripts/oxalis/view/components/editable_text_label.tsx
index c05108df4f2..c49fe557f39 100644
--- a/frontend/javascripts/oxalis/view/components/editable_text_label.tsx
+++ b/frontend/javascripts/oxalis/view/components/editable_text_label.tsx
@@ -112,7 +112,6 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
   render() {
     const iconStyle = {
       cursor: "pointer",
-      marginTop: 5
     };
     const margin = this.props.margin != null ? this.props.margin : "0 10px";
     const inputComponentProps: InputProps = {
@@ -125,14 +124,12 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
       },
       size: "small",
       autoFocus: true,
-      // @ts-ignore
-      rows: this.props.rows,
     };
     const isInvalidStyleMaybe = this.props.isInvalid ? { color: "var(--ant-error)" } : {};
 
     if (this.state.isEditing) {
       return (
-        <span style={{ display: "inline-flex" }}>
+        <span style={{ display: "inline-flex", alignItems: "center" }}>
           {this.props.rows === 1 ? (
             <React.Fragment>
               <Input {...inputComponentProps} onBlur={() => this.handleOnChange} />
@@ -163,6 +160,7 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
           style={{
             margin,
             display: "inline-flex",
+            alignItems: "center",
           }}
           className={this.props.onClick != null ? "clickable-text" : undefined}
           onClick={this.props.onClick}
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 42f856185cf..10577c24540 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
@@ -40,7 +40,6 @@ function ColoredDotIconForSegment({ segmentColorHSLA }: { segmentColorHSLA: Vect
       style={{
         paddingLeft: "10px",
         backgroundColor: hslaCss,
-        marginTop: 5,
       }}
     />
   );
@@ -471,53 +470,53 @@ function _SegmentListItem({
         trigger={["contextMenu"]}
       >
         <Tooltip title={getSegmentTooltip(segment)}>
-          <div style={{display: "inline-flex"}}>
-          <ColoredDotIconForSegment segmentColorHSLA={segmentColorHSLA} />
-          <EditableTextLabel
-            value={segment.name || `Segment ${segment.id}`}
-            label="Segment Name"
-            onClick={() => onSelectSegment(segment)}
-            onChange={(name) => {
-              if (visibleSegmentationLayer != null) {
-                updateSegment(
-                  segment.id,
-                  {
-                    name,
-                  },
-                  visibleSegmentationLayer.name,
-                );
-              }
-            }}
-            margin="0 5px"
-            disableEditing={!allowUpdate}
-          />
-          <Tooltip title="Open context menu (also available via right-click)">
-            <EllipsisOutlined
-              onClick={() => handleSegmentDropdownMenuVisibility(segment.id, true)}
+          <div style={{ display: "inline-flex", alignItems: "center" }}>
+            <ColoredDotIconForSegment segmentColorHSLA={segmentColorHSLA} />
+            <EditableTextLabel
+              value={segment.name || `Segment ${segment.id}`}
+              label="Segment Name"
+              onClick={() => onSelectSegment(segment)}
+              onChange={(name) => {
+                if (visibleSegmentationLayer != null) {
+                  updateSegment(
+                    segment.id,
+                    {
+                      name,
+                    },
+                    visibleSegmentationLayer.name,
+                  );
+                }
+              }}
+              margin="0 5px"
+              disableEditing={!allowUpdate}
             />
-          </Tooltip>
-          {/* Show Default Segment Name if another one is already defined*/}
-          {getSegmentIdDetails()}
-          {segment.id === centeredSegmentId ? (
-            <Tooltip title="This segment is currently centered in the data viewports.">
-              <i
-                className="fas fa-crosshairs deemphasized-segment-name"
-                style={{
-                  marginLeft: 4,
-                }}
-              />
-            </Tooltip>
-          ) : null}
-          {segment.id === activeCellId ? (
-            <Tooltip title="The currently active segment id belongs to this segment.">
-              <i
-                className="fas fa-paint-brush deemphasized-segment-name"
-                style={{
-                  marginLeft: 4,
-                }}
+            <Tooltip title="Open context menu (also available via right-click)">
+              <EllipsisOutlined
+                onClick={() => handleSegmentDropdownMenuVisibility(segment.id, true)}
               />
             </Tooltip>
-          ) : null}
+            {/* Show Default Segment Name if another one is already defined*/}
+            {getSegmentIdDetails()}
+            {segment.id === centeredSegmentId ? (
+              <Tooltip title="This segment is currently centered in the data viewports.">
+                <i
+                  className="fas fa-crosshairs deemphasized-segment-name"
+                  style={{
+                    marginLeft: 4,
+                  }}
+                />
+              </Tooltip>
+            ) : null}
+            {segment.id === activeCellId ? (
+              <Tooltip title="The currently active segment id belongs to this segment.">
+                <i
+                  className="fas fa-paint-brush deemphasized-segment-name"
+                  style={{
+                    marginLeft: 4,
+                  }}
+                />
+              </Tooltip>
+            ) : null}
           </div>
         </Tooltip>
       </Dropdown>

From e57eb32a13866b4cd799d48cb18331c63203afd2 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Thu, 2 Feb 2023 15:40:33 +0100
Subject: [PATCH 6/7] applied PR feedback

---
 .../javascripts/oxalis/view/components/input_component.tsx   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/components/input_component.tsx b/frontend/javascripts/oxalis/view/components/input_component.tsx
index 5758c065ab1..a8f09f0f201 100644
--- a/frontend/javascripts/oxalis/view/components/input_component.tsx
+++ b/frontend/javascripts/oxalis/view/components/input_component.tsx
@@ -119,7 +119,6 @@ class InputComponent extends React.PureComponent<InputComponentProps, InputCompo
 
   render() {
     const { isTextArea, onPressEnter, title, style, ...inputProps } = this.props;
-    // const InputComponentType: typeof TextArea | typeof Input = isTextArea ? TextArea : Input;
     const input = isTextArea ? (
       <TextArea
         {...inputProps}
@@ -128,7 +127,7 @@ class InputComponent extends React.PureComponent<InputComponentProps, InputCompo
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         value={this.state.currentValue}
-        onPressEnter={onPressEnter}
+        onPressEnter={onPressEnter != null ? onPressEnter : this.blurYourself}
         onKeyDown={this.blurOnEscape}
       />
     ) : (
@@ -139,7 +138,7 @@ class InputComponent extends React.PureComponent<InputComponentProps, InputCompo
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         value={this.state.currentValue}
-        onPressEnter={onPressEnter}
+        onPressEnter={onPressEnter != null ? onPressEnter : this.blurYourself}
         onKeyDown={this.blurOnEscape}
       />
     );

From 973339a1c0ef8e45618440ad5999e7fce76d1646 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Tue, 7 Feb 2023 13:41:02 +0100
Subject: [PATCH 7/7] fix ENTER key for multiline text inputs

---
 frontend/javascripts/oxalis/view/components/input_component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/components/input_component.tsx b/frontend/javascripts/oxalis/view/components/input_component.tsx
index a8f09f0f201..88650198ab8 100644
--- a/frontend/javascripts/oxalis/view/components/input_component.tsx
+++ b/frontend/javascripts/oxalis/view/components/input_component.tsx
@@ -127,7 +127,7 @@ class InputComponent extends React.PureComponent<InputComponentProps, InputCompo
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         value={this.state.currentValue}
-        onPressEnter={onPressEnter != null ? onPressEnter : this.blurYourself}
+        onPressEnter={onPressEnter}
         onKeyDown={this.blurOnEscape}
       />
     ) : (