Bug 1761651 Comment 7 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Also: this isn't exactly a regression; it reproduces in old builds as well (e.g. in Firefox 70 on Windows 10 for me), depending on the conditions.   If you're not seeing it, try making your window skinnier (to cause overflow). 

The scrollbar appears here (and these topics don't "condense" to make better use of the space) because the elements here are deceptively wide; they sort of **look** like they're just some text with space being evenly-distributed by the browser or something, but in fact each one is just text with 7px of padding and 15px of margin on each side, i.e. 44px of empty-space per item (including the first and last one).

If the fonts/text/available-space/etc. work out just right so that the last item in this list happens to "mostly fit" **except for its right-side margin and padding**, then bug 1697349 will be the crucial difference as to whether a scrollbar appears or not.  So, that's why (under certain conditions) this looks like a regression from that bug. But really, it was possible to trigger this before then, just under slightly-different circumstances (e.g. skinnier window, or different/larger snippets of text or font-choice for the text in this list.)

So: one other thing that Toms Hardware might consider doing here would be to include a rule to take away that trailing margin and/or padding on the last item here.  e.g.:
```css
.trending__item:last-child {
  margin-right:0;
  padding-right:0;
}
```

This makes the unwanted horizontal-scrollbar disappear entirely for me (on Linux at least), when my browser window is maximized & the page has all the space that it wants to use here.
Also: this isn't exactly a regression; it reproduces in old builds as well (e.g. in Firefox 70 on Windows 10 for me), depending on the conditions.   If you're not seeing it, try making your window skinnier (to intentionally cause the component in question to get skinnier & for its contents to trigger a scrollbar). 

The elements here are deceptively wide; they sort of **look** like they're just some text with space being evenly-distributed by the browser or something, but in fact each one is just text with 7px of padding and 15px of margin on each side, i.e. 44px of empty-space per item (including the first and last one).

If the fonts/text/available-space/etc. work out just right so that the last item in this list happens to "mostly fit" **except for its right-side margin and padding**, then bug 1697349 will be the crucial difference as to whether a scrollbar appears or not.  So, that's why (under certain conditions) this looks like a regression from that bug. But really, it was possible to trigger this before then, just under slightly-different circumstances (e.g. skinnier window, or different/larger snippets of text or font-choice for the text in this list.)

So: one other thing that Toms Hardware might consider doing here would be to include a rule to take away that trailing margin and/or padding on the last item here.  e.g.:
```css
.trending__item:last-child {
  margin-right:0;
  padding-right:0;
}
```

This makes the unwanted horizontal-scrollbar disappear entirely for me (on Linux at least), when my browser window is maximized & the page has all the space that it wants to use here.
Also: this isn't exactly a regression; it reproduces in old builds as well (e.g. in Firefox 70 on Windows 10 for me), depending on the conditions.   If you're not seeing it, try making your window skinnier (to intentionally cause the component in question to get skinnier & for its contents to trigger a scrollbar). 

The elements here are deceptively wide; they sort of **look** like they're just some text with space being evenly-distributed by the browser or something, but in fact each one is just text with 7px of padding and 15px of margin on each side, i.e. 44px of empty bonus-space per item (including 22px before the first one and 22px after the last one).

If the fonts/text/available-space/etc. work out just right so that the last item in this list happens to "mostly fit" **except for its right-side margin and padding**, then bug 1697349 will be the crucial difference as to whether a scrollbar appears or not.  So, that's why (under certain conditions) this looks like a regression from that bug. But really, it was possible to trigger this before then, just under slightly-different circumstances (e.g. skinnier window, or different/larger snippets of text or font-choice for the text in this list.)

So: one other thing that Toms Hardware might consider doing here would be to include a rule to take away that trailing margin and/or padding on the last item here.  e.g.:
```css
.trending__item:last-child {
  margin-right:0;
  padding-right:0;
}
```

This makes the unwanted horizontal-scrollbar disappear entirely for me (on Linux at least), when my browser window is maximized & the page has all the space that it wants to use here.
Also: this isn't exactly a regression; it reproduces in old builds as well (e.g. in Firefox 70 on Windows 10 for me), depending on the conditions.   If you're not seeing it, try making your window skinnier (to intentionally cause the component in question to get skinnier & for its contents to trigger a scrollbar). 

The elements here are deceptively wide; they sort of **look** like they're just some text with space being evenly-distributed by the browser or something, but in fact each one is just text with 7px of padding and 15px of margin on each side, i.e. 44px of empty bonus-space per item (including 22px before the first one and 22px after the last one).

If the fonts/text/available-space/etc. work out just right so that the last item in this list happens to "mostly fit" **except for its right-side margin and padding**, then bug 1697349 will be the crucial difference as to whether a scrollbar appears or not.  So, that's why (under certain conditions) this looks like a regression from that bug. But really, it was possible to trigger this before then, just under slightly-different circumstances (e.g. skinnier window, or wider snippets of text, or larger font-choice for the text in this list.)

So: one other thing that Toms Hardware might consider doing here would be to include a rule to take away that trailing margin and/or padding on the last item here.  e.g.:
```css
.trending__item:last-child {
  margin-right:0;
  padding-right:0;
}
```

This makes the unwanted horizontal-scrollbar disappear entirely for me (on Linux at least), when my browser window is maximized & the page has all the space that it wants to use here.

Back to Bug 1761651 Comment 7