TYPO3 Core

Sebastian Michaelsen wrote in #note-2:

Our editors have the exact same problem, but with the page module displaying content for all languages.

"Horizontal scrollbar is down here. No easy way to scroll right using a mouse."

The easy way for horizontal scrolling (left/right scrolling) is to press and hold [Shift] and then use the mouse scrolling wheel.

As mentioned by Sebastian this issue also exists in page module especially when using the language comparison. One of our customers already alerted us about this scrolling behaviour recently and expressed strong concerns. The workaround with shift-scroll does not work for our customer at this point and he is concerned that his editors will be seriously hindered.

I would vote for not closing this issue.

Horizontal scrolling is one of the most hated interactions for the users :)

I'd suggest to avoid it whenever it is possible using text-overflow:ellipsis or word-break:break-word for example...

What to do when it can't be avoided? I think the better thing to do is to include visual hints that suggest the users that the view can be scrolled and there are further things to see.

Altassian does this on its design system using a special case of "elevation" (that is: a shadow)
https://atlassian.design/foundations/elevation/#overflow

Another aspect I find important is to unify this behaviour across various lists (unless it absolutely doesn't make sense for some reason and you need a special behaviour). I already mentioned some variations between redirects module and reference list.

Also, for example in linkvalidator, this was changed some years ago (not by me) to a table with fixed column width so it does not scroll.

For a screen size with width < something, brofix (linkvalidators sister) breaks into a card layout where the columns are broken into individual rows. So, even a table is usable on small screens.

Multiple languages in page layout are another story, would be good to look at the workflow - do you even want all of them side-by-side? Not sure if that makes sense - maybe something else is needed.

Am no usability expert myself - ideally get the UX group involved.

POC: scrollbars always visible inside viewport¶

/* grid-container scrolling behaviour */
.module[data-module-name="web_layout"] {
  display: flex;
  flex-direction: column;
}
.module[data-module-name="web_layout"] > * {
  flex: 0 0 auto;
}
.module[data-module-name="web_layout"] > .module-body {
  flex: 0 1 auto;
  overflow: hidden;
}

.module[data-module-name="web_layout"] .module-body {
  display: flex;
  flex-direction: column;
}
.module[data-module-name="web_layout"] .module-body > * {
  flex: 0 0 auto;
}
.module[data-module-name="web_layout"] .module-body > #PageLayoutController {
  flex: 0 1 auto;
  overflow: hidden;
}

.module[data-module-name="web_layout"] #PageLayoutController {
  display: flex;
  flex-direction: column;

  margin-left: calc((1px + var(--pagemodule-grid-spacing)) * -1);
  margin-right: calc((1px + var(--pagemodule-grid-spacing)) * -1);
}
.module[data-module-name="web_layout"] #PageLayoutController > .t3-grid-container {
  flex: 0 1 auto;
  /* Scrollbars stay always inside visible viewport */
  overflow: scroll;
}

Sybille Peters wrote:

- In some other dialogs in the BE, in addition to the action icons on the far right, you can also click on a link in the columns. This is the case in the redirects module, for example. You can edit by clicking on source_path column. I do not find this intuitive, but in cases like these it would be helpful

Actually in most places you can click on the 'title' column to edit the record.
This is also the case for 'Example 1: Listing of references'.