From 9de25e4869d056637ce1ce3e4c43e3ba4b158969 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Thu, 4 Apr 2024 00:55:36 +0800
Subject: [PATCH] truncate labels (#544)

---
 src/app/workspace/screen/screenview.less | 131 ----------------------
 src/app/workspace/workspace.less         | 135 +++++++++++++++++++++++
 src/app/workspace/workspaceview.tsx      |   4 +-
 3 files changed, 137 insertions(+), 133 deletions(-)

diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less
index ae2bd411a..5fc4849f1 100644
--- a/src/app/workspace/screen/screenview.less
+++ b/src/app/workspace/screen/screenview.less
@@ -159,134 +159,3 @@
         }
     }
 }
-
-.newtab-container {
-    margin: 8px 16px 0 16px;
-
-    .newtab-section {
-        display: flex;
-        padding: 10px 16px;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-        align-self: stretch;
-
-        &.conn-section {
-            gap: 8px;
-        }
-    }
-
-    .cr-help-text {
-        color: var(--screen-view-text-caption-color);
-        margin-left: 5px;
-    }
-
-    .newtab-spacer {
-        height: 1px;
-        background: var(--app-border-color);
-    }
-
-    .control-iconlist {
-        display: flex;
-        margin-left: -2px;
-        padding: 8px 0 8px 2px;
-        align-items: flex-start;
-        gap: 14px;
-
-        &.tabicon-list {
-            gap: 12px;
-        }
-
-        .icondiv {
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-            position: relative;
-            font-size: 14px;
-
-            &.tabicon {
-                display: flex;
-                align-items: center;
-                width: 22px;
-            }
-
-            .icon {
-                width: 20px;
-                height: 20px;
-            }
-
-            i {
-                padding-left: 3px;
-                padding-right: 3px;
-            }
-
-            .icon.square-icon {
-                position: relative;
-                top: 3px;
-                width: 16px;
-                height: 16px;
-            }
-
-            .check-icon {
-                width: 12px;
-                height: 12px;
-                position: absolute;
-                top: 4px;
-                left: 4px;
-
-                path {
-                    fill: black;
-                }
-            }
-
-            .status-div {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 16px;
-                height: 16px;
-                padding: 3px;
-
-                svg.status-icon {
-                    width: 10px;
-                    height: 10px;
-                }
-            }
-
-            .add-div {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 16px;
-                height: 16px;
-
-                svg.add-icon {
-                    width: 16px;
-                    height: 16px;
-
-                    path {
-                        fill: var(--app-text-primary-color);
-                    }
-                }
-            }
-
-            .text-standard {
-                color: var(--app-text-secondary-color);
-            }
-
-            .ellipsis {
-                text-overflow: ellipsis;
-            }
-
-            &:hover {
-                background-color: rgba(241, 246, 243, 0.08);
-            }
-
-            .icon.color-white + .check-icon {
-                path {
-                    fill: black;
-                }
-            }
-        }
-    }
-}
diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less
index 03e3693eb..6582a191b 100644
--- a/src/app/workspace/workspace.less
+++ b/src/app/workspace/workspace.less
@@ -53,3 +53,138 @@
         }
     }
 }
+
+.newtab-container {
+    margin: 8px 16px 0 16px;
+
+    .newtab-section {
+        display: flex;
+        padding: 10px 16px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        align-self: stretch;
+
+        .truncate {
+            max-width: 100%;
+        }
+
+        &.conn-section {
+            gap: 8px;
+        }
+    }
+
+    .cr-help-text {
+        color: var(--screen-view-text-caption-color);
+        margin-left: 5px;
+    }
+
+    .newtab-spacer {
+        height: 1px;
+        background: var(--app-border-color);
+    }
+
+    .control-iconlist {
+        display: flex;
+        margin-left: -2px;
+        padding: 8px 0 8px 2px;
+        align-items: flex-start;
+        gap: 14px;
+
+        &.tabicon-list {
+            gap: 12px;
+        }
+
+        .icondiv {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+            position: relative;
+            font-size: 14px;
+
+            &.tabicon {
+                display: flex;
+                align-items: center;
+                width: 22px;
+            }
+
+            .icon {
+                width: 20px;
+                height: 20px;
+            }
+
+            i {
+                padding-left: 3px;
+                padding-right: 3px;
+            }
+
+            .icon.square-icon {
+                position: relative;
+                top: 3px;
+                width: 16px;
+                height: 16px;
+            }
+
+            .check-icon {
+                width: 12px;
+                height: 12px;
+                position: absolute;
+                top: 4px;
+                left: 4px;
+
+                path {
+                    fill: black;
+                }
+            }
+
+            .status-div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 16px;
+                height: 16px;
+                padding: 3px;
+
+                svg.status-icon {
+                    width: 10px;
+                    height: 10px;
+                }
+            }
+
+            .add-div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 16px;
+                height: 16px;
+
+                svg.add-icon {
+                    width: 16px;
+                    height: 16px;
+
+                    path {
+                        fill: var(--app-text-primary-color);
+                    }
+                }
+            }
+
+            .text-standard {
+                color: var(--app-text-secondary-color);
+            }
+
+            .ellipsis {
+                text-overflow: ellipsis;
+            }
+
+            &:hover {
+                background-color: rgba(241, 246, 243, 0.08);
+            }
+
+            .icon.color-white + .check-icon {
+                path {
+                    fill: black;
+                }
+            }
+        }
+    }
+}
diff --git a/src/app/workspace/workspaceview.tsx b/src/app/workspace/workspaceview.tsx
index eeb27201b..48dc89fe3 100644
--- a/src/app/workspace/workspaceview.tsx
+++ b/src/app/workspace/workspaceview.tsx
@@ -162,13 +162,13 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
                 </div>
                 <div className="newtab-spacer" />
                 <div className="newtab-section conn-section">
-                    <div className="unselectable">
+                    <div className="unselectable truncate">
                         You're connected to "{getRemoteStrWithAlias(rptr)}". Do you want to change it?
                     </div>
                     <div>
                         <TabRemoteSelector screen={screen} errorMessage={this.errorMessage} />
                     </div>
-                    <div className="text-caption cr-help-text">
+                    <div className="text-caption cr-help-text truncate">
                         To change connection from the command line use `cr [alias|user@host]`
                     </div>
                 </div>