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] 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>