Fossil Forum

Web UI: truncated diffs II
Login

Web UI: truncated diffs II

(1) By Florian Balmer (florian.balmer) on 2022-09-23 15:13:39 [source]

I've noticed another minor web UI glitch:

The side-by-side diffs are truncated at the right, along with the scrollbar.

A possible simple fix seems to be to add the box-sizing: border-box style to the elements containing the diff text, as accomplished by the patch below.

The following screenshots demonstrate the bug (top row) and the fix (bottom row) with FF and Chromium:

https://i.imgur.com/eUvo28q.png

So far, I've only tested the fix on Windows desktops at 100% DPI with various page zoom levels, so not sure if it also works for *nix/mobile systems, other browsers, non-standard DPI settings, etc.

Since the fix is quite easy to apply through the browser Developer Tools (right-click the diff text, select "Inspect", and append box-sizing: border-box; to the style attribute of the <pre> element) -- could people who also see the bug on systems and browsers different from mine please take a quick check of the fix and post feedback here whether it works, so this could be weaved into a proper commit?

Thank you!

Index: src/default.css
==================================================================
--- src/default.css
+++ src/default.css
@@ -584,12 +584,13 @@
 table.diff td > pre {
   /* Workaround for "slight wiggle" when using mouse-wheel in some FF
      versions, apparently caused by the increased line-height forcing
      these elements to be a *tick* larger than they should be but not
      large enough to force a scroll bar to show up. */
   overflow-y: hidden;
+  box-sizing: border-box;
 }
 tr.diffskip.jchunk {
   /* jchunk gets added from JS to diffskip rows when they are
      plugged into the /jchunk route. */
   background-color: aliceblue;
   padding: 0;

(2) By Stephan Beal (stephan) on 2022-09-23 15:19:10 in reply to 1 [link] [source]

so this could be weaved into a proper commit?

Please do :). i've seen this numerous times in Firefox on Linux, both on "low resolution" screens (1080p) and 4k, but it's never bothered me enough to experiment with a fix.

(3) By Florian Balmer (florian.balmer) on 2022-09-23 15:31:28 in reply to 2 [link] [source]

Thanks for the quick feedback!

I think both your and my systems already cover quite a reasonable range. Because I'm currently online only sporadically, this commit may take a few days -- but maybe we also get feedback from a Mac user in the meantime (but I wouldn't expect Safari to be too different from Chromium, in this case).

(4) By Florian Balmer (florian.balmer) on 2022-09-25 07:49:04 in reply to 1 [link] [source]

After some more tests with different skins I was confident enough to commit the solution.