From 070fc1bb443d5b0e3eee02989b98549d0b91e647 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 22 Sep 2021 07:42:05 +0300
Subject: [PATCH] Fix long name layout in Cluster Settings (#3854)

* Fix long name layout in Cluster Settings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 ...ttings.scss => entity-settings.module.css} | 32 ++++++-------------
 .../+entity-settings/entity-settings.tsx      |  7 ++--
 2 files changed, 13 insertions(+), 26 deletions(-)
 rename src/renderer/components/+entity-settings/{entity-settings.scss => entity-settings.module.css} (76%)

diff --git a/src/renderer/components/+entity-settings/entity-settings.scss b/src/renderer/components/+entity-settings/entity-settings.module.css
similarity index 76%
rename from src/renderer/components/+entity-settings/entity-settings.scss
rename to src/renderer/components/+entity-settings/entity-settings.module.css
index 30c01b8a67..604ecd5c5b 100644
--- a/src/renderer/components/+entity-settings/entity-settings.scss
+++ b/src/renderer/components/+entity-settings/entity-settings.module.css
@@ -19,26 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.EntitySettings {
-  $spacing: $padding * 3;
-
-
-  // TODO: move sub-component styles to separate files
-  .admin-note {
-    font-size: small;
-    opacity: 0.5;
-    margin-left: $margin;
-  }
-
-  .button-area {
-    margin-top: $margin * 2;
-  }
-
-  .file-loader {
-    margin-top: $margin * 2;
-  }
-
-  .Input, .Select {
-    margin-top: $padding;
-  }
-}
+.entityName {
+  @apply font-bold overflow-hidden;
+  word-break: break-word;
+  color: var(--textColorAccent);
+  display: -webkit-box;
+  /* Simulate text-overflow:ellipsis styles but for multiple text lines */
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
\ No newline at end of file
diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx
index f656b6fa9d..bcb5895413 100644
--- a/src/renderer/components/+entity-settings/entity-settings.tsx
+++ b/src/renderer/components/+entity-settings/entity-settings.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./entity-settings.scss";
+import styles from "./entity-settings.module.css";
 
 import React from "react";
 import { observable, makeObservable } from "mobx";
@@ -98,7 +98,9 @@ export class EntitySettings extends React.Component<Props> {
             source={this.entity.metadata.source}
             src={this.entity.spec.icon?.src}
           />
-          <h2>{this.entity.metadata.name}</h2>
+          <div className={styles.entityName}>
+            {this.entity.metadata.name}
+          </div>
         </div>
         <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
           { groups.map((group, groupIndex) => (
@@ -138,7 +140,6 @@ export class EntitySettings extends React.Component<Props> {
 
     return (
       <SettingLayout
-        className="CatalogEntitySettings"
         navigation={this.renderNavigation()}
         contentGaps={false}
       >