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>

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;
+}

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