ssh: Ensure long server names (and nicknames) truncate (#19621)

Danilo Leal created 1 year ago

Just polishing the UI a bit more. One drawback of this, though, is that
if you _do_ have a big nickname or server name, with this current
solution, you won't be able to see it. Ideally, we should be able to
hover over it and see it in a tooltip, but the `div` still doesn't
support that out of the box.

| Main modal | Modal header |
|--------|--------|
| <img width="1136" alt="Screenshot 2024-10-23 at 12 49 18"
src="https://github.com/user-attachments/assets/ed5f0222-faa1-49bd-b249-2f22497566d8">
| <img width="1136" alt="Screenshot 2024-10-23 at 12 49 23"
src="https://github.com/user-attachments/assets/5a464b12-99e8-4934-aa6a-c9c4c40ea4d4">
|

Release Notes:

- N/A

Change summary

crates/recent_projects/src/remote_servers.rs  |  9 +++++----
crates/recent_projects/src/ssh_connections.rs | 21 +++++++++++++++------
crates/remote/src/ssh_session.rs              |  2 +-
3 files changed, 21 insertions(+), 11 deletions(-)

Detailed changes

crates/recent_projects/src/remote_servers.rs

@@ -660,11 +660,12 @@ impl RemoteServerProjects {
                     .px_3()
                     .gap_1()
                     .overflow_hidden()
-                    .whitespace_nowrap()
                     .child(
-                        Label::new(main_label)
-                            .size(LabelSize::Small)
-                            .color(Color::Muted),
+                        div().max_w_96().overflow_hidden().text_ellipsis().child(
+                            Label::new(main_label)
+                                .size(LabelSize::Small)
+                                .color(Color::Muted),
+                        ),
                     )
                     .children(
                         aux_label.map(|label| {

crates/recent_projects/src/ssh_connections.rs

@@ -336,17 +336,26 @@ impl RenderOnce for SshConnectionHeader {
             .child(
                 h_flex()
                     .gap_1()
-                    .child(Headline::new(main_label).size(HeadlineSize::XSmall))
+                    .overflow_x_hidden()
+                    .child(
+                        div()
+                            .max_w_96()
+                            .overflow_x_hidden()
+                            .text_ellipsis()
+                            .child(Headline::new(main_label).size(HeadlineSize::XSmall)),
+                    )
                     .children(
                         meta_label.map(|label| {
                             Label::new(label).color(Color::Muted).size(LabelSize::Small)
                         }),
                     )
-                    .children(self.paths.into_iter().map(|path| {
-                        Label::new(path.to_string_lossy().to_string())
-                            .size(LabelSize::Small)
-                            .color(Color::Muted)
-                    })),
+                    .child(div().overflow_x_hidden().text_ellipsis().children(
+                        self.paths.into_iter().map(|path| {
+                            Label::new(path.to_string_lossy().to_string())
+                                .size(LabelSize::Small)
+                                .color(Color::Muted)
+                        }),
+                    )),
             )
     }
 }

crates/remote/src/ssh_session.rs

@@ -1530,7 +1530,7 @@ impl SshRemoteConnection {
             run_cmd(self.socket.ssh_command("mkdir").arg("-p").arg(parent)).await?;
         }
 
-        delegate.set_status(Some("Downloading remote development server on host..."), cx);
+        delegate.set_status(Some("Downloading remote development server on host"), cx);
 
         let script = format!(
             r#"