I increased the column width by 10%, which seems to have cleared the truncated filename problem on Chrome. (It always worked correctly on Firefox, FWIW.) I still do not understand why the menu bar is vertical scrolling by one pixel. Hints are welcomed.

On my system, even on Firefox it doesn't always display correctly. (Firefox 52.9.0 ESR on debian-8)

• If I change zoom factor (ctrl++ and ctrl+-), I get different result.

  On my actual system , It only shows correctly with 90% zoom.

• In all other zoom factor, sometimes I see the vertical scrollbar, sometimes not, but there's always missing pixels on bottom.

• I've Also got similar result on different browser / OSes combination:

  • Chrome on Debian-8
  • On Mobile (Safari and Chrome on IOS)
  • Chrome and Edge on Windows 10

The file names are now no longer truncated in Chromium, thanks for the fix!

Yeah, but the menu bar is still vertical scrolling by a single pixel. I do not understand why it is doing that. Suggestions on how to fix that will be greatly appreciated.

Such things can be very difficult to chase down, since they change between browsers, and they can often depend on order of operations.

Rather than fight past that, just tell the browser what you want it to do:

  div.mainmenu {
      overflow-y: hidden;
  } 

That means if it's got a choice between scrolling vertically and clipping the content off, it should clip it off.

It's tested and working here, though as I said, it can be state- and browser-dependent, so this might not be the last CSS workaround you need.

overflow-y: hidden;

I see that the skins on fossil-scm.org were updated recently, but this suggestion wasn't included in the new versions.

Consequently, I'm still occasionally getting unwanted scroll bars in the navbar. I see this in Chrome, Firefox, and Safari on macOS.

Should I just check this in as a change to the skins?

Yes, please.

It's done. See the checkin comment for details.

More thoughts on navbar responsive design:

1. You can see a demo of this before applying it to your own repos by visiting my MySQL++ repository. The skin is modified from the default, but the navbar overflow stuff is still stock, and updated to match Fossil tip-of-trunk.

2. A variation some may find valuable is to set both overflow values to "hidden" as I did on my PiDP-8/I repo. I like this better when the skin background is a warm color, since the white-and-gray macOS horizontal scroll bar added when the navbar is too wide clashes with the background.

3. I've moved my hamburger button to the start of the bar on both repos as a consequence of these recent changes, so it's always visible by default.

4. Avoid the temptation to combine the two overflow-* directives into one. Browsers haven't always followed the spec, which says Y first, then X, so combining them gives inconsistent results across platforms.

The vertical scrollbar is now gone, but the orange border at the bottom of the active menu item is still not visible (verified that .mainmenu { overflow-y: hidden; } is present).

Also note the split folder icons I was trying to explain earlier.

Screenshot (Imgur).

The Screenshot was taken with Chromium 71.0.3540.0 at 100% zoom level on Windows 10.0.17134.254 at 100% DPI scaling.

I'm sorry I didn't think of e-mail notifications getting bloated by the inline image.

Think of it this way: Someone had to try it, if only to test for edge cases, and you got to it first. Now that we have the test case, no one has to do that to anyone else ever again. :)

Alternate workaround: the email builder could find such tags and replace them just as a screen reader does. Use the alt tag if possible, else use stock text like "<inline image>".

Think of it this way: Someone had to try it ...

Thanks for the rehabilitation ... ;-)

Another issue: also with Chromium, if the window is wide enough to allow for more columns than there's files or directories(*), the file and folder icons are "split" into upper and lower halves, and are scattered across multiple columns, i.e. the upper half of the icon goes in a column by itself, and the lower half is near the text in the next column.

(*) Try the following links with a maximized browser window on a desktop PC:

• https://www.sqlite.org/src/dir?ci=1e29fd430dead641&name=contrib (does the check-in hash already call for trouble ... ?)
• https://www.fossil-scm.org/index.html/dir?ci=1d495e89e24896de&name=compat

I'm sorry I'm not helpful at all with CSS, apart form a few basics, I'm not brave enough for this jungle of vendor specifics and browser incompatibilities ...

Try it now, after check-in e585c3e676a9f415

Problem solved, thank you very much!

As there's no (public) ticket system to indicate whether a problem is acknowledged, assigned to somebody, and scheduled for fixing, I sometimes write another message on one and the same topic.

This is not necessarily because I'm impatient (I'm happy with Fossil 2.6 as my "daily driver"), but because I think small problems are easier to fix while working on the surrounding code, and not after shipping the next release.