Remote Host status bar entry has no max width

[jrieken]

• see attached screen capture
• the remote host entry is too wide, we should crop it

[bpasero]

Yes I do agree. However more interesting is why the remote entry looks like that, it should not be so cryptic.

This is what I see:

Was this eventually going away?

[bpasero]

Oh I get it, you did not use web but desktop. I wonder if maybe @legomushroom or @srivatsn could comment why desktop is rendered different from web. I suspect a different label formatter maybe?

[bpasero]

@aeschli maybe when you detect the remote label to be very long you simply crop it in the middle adding a "..." or so?

[aeschli]

@bpasero Not sure what you mean. You suggest we should crop it before setting to the statas bar? I think that should better be in the status bar in CSS.
It looks like the text-overflow: ellipsis; is there, but doesn't work together with display: flex

[srivatsn]

Originally the thinking was that in web, the URL has the context but in desktop it's not there but since GH codespaces names are too long, I agree this doesn't look good. @lostintangent @2percentsilk thoughts?

[2percentsilk]

Yeah I'd agree that it's too long and a bit unsightly. Given the name of the codespace is also a part of the title bar, I don't think we need to have it fully duplicated at the bottom. Setting a max width and truncating the codespace name seems reasonable to me. For what exactly the max width would be I'd lean on @misolori :)

[miguelsolorio]

I agree on keeping it shorter, just throwing a random number of 40 characters seems to look better. As @2percentsilk mentioned that the name is already repeated in other areas we don't need it as much here. It would also keep the width of the item ~275px.

[bpasero]

@aeschli the reason I suggested a manual solution without CSS is that as far as I know there is no CSS rule to crop a label in the middle. But if we think that the label can be cropped at the end, I think a CSS rule could work.

Since each status item has a id, a CSS rule from the remoteIndicator such as:

#status\.host {
	max-width: 40px;
}

Should work. Maybe @misolori could advise for a good rule that works together with flex.

I am not sure I would go as far as to apply this rule to every item, not sure about the consequences for extensions. Related issue is #84258

[miguelsolorio]

I think in order for the ellipsis to work in flexbox the remote text needs to be wrapped in its own tag. We currently only wrap the codicon in a span. See example.

[aeschli]

First of all, the remote extension should use a compact, human readable host name.
Still, I suggest to fix the status bar entry (which already has a max-width) so it gets the ... at the end. That way all status bar entries will profit and it's guaranteed that the maximum space is used. I personally don't think ... in the middle make anything better (really depends on the label), and it's not a good idea to to have RemoteStatusIndicator do any shorting as it will have to make assumptions on the current width of the status bar entry.

[aeschli]

Assigning to @bpasero to consider the change in the status bar as sketched by @misolori .

[bpasero]

I ended up pushing a change to trim the remote label to max 40 chars as suggested by Miguel:

I don't to turn this into a general solution for all status bar entries because this is challenging, might not be the right solution for all status bar entries, and we have related issues to cover that in particular, namely #84258