Actual: page title truncates without wrapping but URL and timestamp wrap. This is true even at the max width
Expected: Page title and URL truncate. No list items wrap. Timestamps do not truncate.

While I know this might be easier said than done in a responsive environment, it should at least be true at the max width.

Screenshot of max width attached.

A few things to note here. First, we've changed the requirements for the URL (but looks like figma wasn't updated...) and so those are expected to wrap when needed; truncating domain names at the end can lead to misleading information being presented to the user, so we avoid doing so. There are also non-domain cases (like about: pages, local files, data: URLs, etc.) that aren't necessarily cleanly presentable with very short strings.

There was also discussion about using min. rather than minutes for the time, which will help a bit here because it will make the text in the time column shorter for the minutes/seconds bit especially (which are the longest texts in English). I'm not sure there's a bug on file for that...

Even taking those things into account though, the current behaviour is clearly suboptimal.

Unfortunately, I don't think there's currently a spec for the column layout. Or at least, how the columns are supposed to interact - on figma the bits of text just have a width corresponding to their inner content, not to the column size, so when reviewing the original implementation I couldn't determine what the intent of the design really is. One last note: if we pick a fixed proportion (e.g. say 5/2/1 column widths for title/url/time respectively), there is also no guarantee that that doesn't lead to wrapping in languages other than English.

Josh, can you clarify what you think the solution looks like here? I think we might want the time column to be sized min-content and enforce that the text doesn't wrap (whitespace: pre or something like that), and maybe that's sufficient? But I'm not sure.

Just confirming that I will respond to this next week. We spoke on Friday and it was agreed that we can revisit this decision but also that what we have now is thoughtful and correct. We might be able to optimize more but need to be conscientious of security.

Following up to close the loop. After several conversations on this topic, and considering tradeoffs for various solutions, we've decided to preserve the wrapping behavior to prioritize potential security concerns.

So you don't even plan to improve the display of the time? That's disappointing since bug 1784008 was closed as a duplicate of this bug. I have to admit that the current state looks unfinished and decreases the UX quality. Why not use more of the screen width? The left side with the Firefox View logo is wasted and could be used to give the columns more space for content instead. Of course it's difficult to have three columns and to restrict the width at the same time. And if it's really needed to have the logo on this page (I would argue that if I already use Firefox, I don't need a logo to remember me that I use Firefox…) it could be put above the content.

(In reply to Sören Hentzschel from comment #6)

So you don't even plan to improve the display of the time? That's disappointing since bug 1784008 was closed as a duplicate of this bug. I have to admit that the current state looks unfinished and decreases the UX quality. Why not use more of the screen width? The left side with the Firefox View logo is wasted and could be used to give the columns more space for content instead. Of course it's difficult to have three columns and to restrict the width at the same time. And if it's really needed to have the logo on this page (I would argue that if I already use Firefox, I don't need a logo to remember me that I use Firefox…) it could be put above the content.

This feature is still being worked on and there was a separate bug filed just now to improve the display of time.

(In reply to Ray Fambro from comment #5)

Following up to close the loop. After several conversations on this topic, and considering tradeoffs for various solutions, we've decided to preserve the wrapping behavior to prioritize potential security concerns.

This statement covers the wrapping behaviour for the URL, and as Sarah suggested in comment 7, bug 1787009 and bug 1785234 cover the timestamps.

What I would like to see is a definition from UX of the grid column layout / proportions we want (ie how much of the space is used for the title, the URL and the timestamps). If we use more space for the URL, that will partially resolve the cosmetic wrapping issues as there will simply be fewer cases in which wrapping occurs. Josh, can you help with that and can we use this bug to resolve that question?

So I took a look at what's in Nightly vs in Figma.

In nightly the percentage of space being dedicated to each of the three columns (title, URL, timestamp) respectively is roughly
Title: 65%
URL: 24%
Timestamp: 11%
(I cant quite tell the spacing in between each column via dev tools but it looks to be a bit more than the 16px, 8px in figma. I'm ok with a bit more whitespace but still want to get closer to the proportions from Figma for each of the respective columns)

In Figma percentage of space being dedicated to each of the three columns (title, URL, timestamp) respectively is roughly
Title: 52%

• 16px space
  URL: 34%
• 8px space
  Timestamp: 14%

Gijs let me know if this is helpful / the type of info you'd like to see or if a visual diagram in figma would be helpful. Also happy to collab as I know static screens don't always do justice to the complexity of the responsive web.

Additionally, in Figma all text for the rows is 13px (.85em) and in Nightly its 15px (1em). I filed a bug for font size separately and this should help too (1784345).

Using the shortened timestamp format should also help.

(In reply to Josh Berman from comment #9)

So I took a look at what's in Nightly vs in Figma.

In nightly the percentage of space being dedicated to each of the three columns (title, URL, timestamp) respectively is roughly
Title: 65%
URL: 24%
Timestamp: 11%
(I cant quite tell the spacing in between each column via dev tools but it looks to be a bit more than the 16px, 8px in figma. I'm ok with a bit more whitespace but still want to get closer to the proportions from Figma for each of the respective columns)

In Figma percentage of space being dedicated to each of the three columns (title, URL, timestamp) respectively is roughly
Title: 52%

• 16px space
  URL: 34%
• 8px space
  Timestamp: 14%

Gijs let me know if this is helpful / the type of info you'd like to see or if a visual diagram in figma would be helpful. Also happy to collab as I know static screens don't always do justice to the complexity of the responsive web.

Yep, thank you! Per discussion on zoom, let's use the content size for the timestamp column, and then split the title + url space 60/40, with the pixel spacing suggested.

The request from UX is for 16px column gaps but 8px between the URL and timestamp.
CSS grid doesn't support individual columns having different gaps, so I've made
the gap 8px and filled in the other 8px by incrementing inline start padding on
the title and URL.

https://hg.mozilla.org/mozilla-central/rev/84685571ca87

https://hg.mozilla.org/mozilla-central/rev/84685571ca87

Reproduced the initial issue using an old Nightly build from 2022-08-04. Verified that using latest Firefox 106.0b2 across platforms (macOS 11, Windows 10 and Ubuntu 20.04) that at max width no list items are wrapped, timestamp is not truncated but the page title and url is nicely truncated.