Reduce Spacing Between All List Items [SOLVED]

g_bartsch

I have been unhappy with the amount of excessive (to me) space between bookmark (and other list items) ever since Vivaldi was started. Early on I had been able to hack the setting with CSS but that stopped working some years ago and I could not figure it out anymore. I gave up trying.

Recently @adacom posted that ...

return 24+

... in bundle.js is the line height setting for all UI list item spacing. It is and changing it does change the item line spacing but the highlighting behind the line item is off.

(NOTE: Bundle.js is in:)

(AppData\Local\Vivaldi\Application\6.10.3483.4\resources)

Now I'm very happy to say I've found the CSS to complete the hack and make the highlight behind the line item look perfect. It is:

.vivaldi-tree,
.sortselector {
  --treeViewRowHeight: calc(20px + 0px + var(--densityGap));
}

The hack needs to be effected in bundle.js and CSS and I'd have never found the solution without @adacom. Thank you so much for finding the base setting!

Additionally I modified the Item Counter with:

.item-count,
.vivaldi-tree .nickname {
  /* line-height: 1.3; */
  line-height: 1;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 400;
}

adacom

@g_bartsch - thats excellent - i believe you change the spacing in bundle.js to 20 which then fits with the 20 in the css code

i prefer 18 as the modified setting in bundle.js - to achieve even spacing i need to change your setting of 20 to 22 in your css code but thats just fine tuning

to anyone looking at this the code setting in bundle.js has changed a few times over time but it always seems to be the first reference to 24 in the code - i would assume that may change so the mod may need re visiting if it does

and whilst the css code will survive an update the change in bundle.js will have to be done after every update as the old file is over written

g_bartsch

@adacom Yes, you are right. I set mine to 20px in bundle.js so you will need to do as you say in your CSS to achieve a good result with your 18x (I'll test 18px too).

I'm going to play more with the Item Count setting:

/* line-height: 1.3; */
line-height: 1;

I just guessed on that and don't know exactly how that setting works.

g_bartsch

@adacom said in Reduce Spacing Between All List Items [SOLVED]:

i prefer 18 as the modified setting in bundle.js - to achieve even spacing i need to change your setting of 20 to 22 in your css code but thats just fine tuning

18px in bundle.js works with:

.vivaldi-tree,
.sortselector {
  --treeViewRowHeight: calc(18px + 0px + var(--densityGap));
}

There are no problems (including nothing being ugly when changing the text of the line item) for me with icons being cut off etc.

18px is probably the least height that can be used before bad things start happening. But since it's working I'm going to use it.

adacom

@g_bartsch its all down to what works for your eye

18 spacing and 18 in css

18 spacing and 22 in css

22 works for me

g_bartsch

@adacom
Yes, and I have my UI font set to 11px Arial so maybe that's why the setting works here.

g_bartsch

I've tweaked the CSS a little and the result is the text size is now set independently of the UI font size.

The difference between the default 24px line height and 18px is 33% so using 18px allows us to see 33% more items before needing to scroll. What a win!

/*
REDUCE THE HEIGHT OF HIGHLIGHT BEHIND ROW ITEMS
ROW HEIGHT IS SET IN BUNDLE.JS AND THE DEFAULT SETTING IS return24+
SEARCH FOR THAT VALUE AND CHANGE IT EACH TIME VIVALDI IS UPGRADED
SET THE FONT SIZE INDEPENDANTLY OF THE UI FONT SIZE
*/

.vivaldi-tree,
.sortselector {
  --treeViewRowHeight: calc(18px + 0px + var(--densityGap));
font-size: 10.5px !important;
}

/* MAKE THE TREE ROW COUNTER SMALLER */

.item-count,
.vivaldi-tree .nickname {
  line-height: 1;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px !important;
  font-weight: 400;
}

adacom

@g_bartsch that looks very good - font a bit small for my eyes and i still think a value of 22 sets the background more equal but as i said earlier its what works for the eye

the main thing is its easy to play and get what suits - pity the spacing in bundle.js cannot be automated as it used to be but that needs someone with far more knowledge than i have on js - thats assuming its even possible with an additional script

g_bartsch

@adacom Indeed it's personal preference. The beauty is now we know how to set the spacing in bundle.js and style the CSS so that anyone can make these list look exactly the way they like. I don't think most other programs have anything close to this capability. We're very lucky to have Vivaldi.

RogerWilco

Where and how do you do that?

You mention the file bundle.js which I located in /opt/vivaldi/resources/vivaldi/ . Then you mention CSS as well.

I know about those userChrome.css 'tweaks' you can apply to Firefox and its forks but how are these tweaks done for Vivaldi?

Am I not seeing the forest for the trees?

Thanks in advance.

mib2berlin

@RogerWilco
Hi, search bundle.js in the path @g_bartsch mention, open it in a text editor, search for return 24+ and change it to return 22+ for example.
This change the line height setting to 22 pixel.
The CSS code is only for fine tuning, you can add this later if you like.

Cheers, mib

RogerWilco

@mib2berlin Okay, so it is the file bundle.js that I had located in /opt/vivaldi/resources/vivaldi/ then; I'm not using Windows. Good to know, thanks. I'll give it a shot (incl. keeping a backup copy of the file).

I had opened the bundle.js file in a simple text editor (nano and xed) but its content formatting seemed off to me (which does not mean a lot).

#########
Follow-up: found it, edited it, tinkered around with values [18-28] to see what is actually affected by it. Settled with 18 for now, as I can not stand the space-wasting.
I hope that we won't have to do all these edits after each Vivaldi update (which may be the case).
Would you happen to know whether storing the bundle.js file somewhere in say ~/.config/vivaldi/ (should be the equivalent to Windows' %APPDATA% in this regard) is a possibility to have this customization survive the next Vivaldi update?

Is there a way to know or learn when such changes would collide with font sizes, mandatory spacing etc., other than trial&error? Like some other config files that I could check?

You seem to have looked into CSS aspects as well, may I ask what other 'dials' there are, and for what elements, as what @g_bartsch had stated on space-saving/information density, sounds quite appealing?
Yes, I'm sure that there'll be tons of places, and I don't expect a manpage of a reply, but maybe some pointers?

Thanks once again.

/Addendum 13.April 2025: after a Vivaldi update -no, I'm not really surprised by this after an update- I had to apply that change to bundle.js again, as Vivaldi would again waste screen real estate with 'white space' and their compact mode via the General Settings/Preferences simply doesn't do it for me.