Is this correct code for address bar padding

jaunny

I reduced my UI zoom to 75%, but now there is too much blank field padding above and below the navigation buttons/search field. This css code (c/o chat gpt) I tried did nothing:

#header {
padding-top: 2px !important; /* Reduce space above navigation /
padding-bottom: 2px !important; / Reduce space below navigation */
}

.UrlBar-AddressField, .toolbar-mainbar {
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}

Pathduck

@jaunny Why do you think an AI will give you the correct codes? What you're basically asking is for someone else to troubleshoot code written by an idiot AI.

I suggest you learn yourself to inspect the UI so you can figure out the codes yourself.
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools
If you're going to any sort of modding learning this is kind of required.

jaunny

Sorry. I didn't know that was not ok.

Pathduck

@jaunny Of course it's OK to talk to an AI - just don't expect any useful answers. And don't expect others to parse mumbo-jumbo written by an AI.

The best way is Do It Yourself. Learn to inspect the UI and find the exact code you need.

Try that first, and if you have questions ask

jaunny

Actually, I was apologizing to you. I've seen other peoples set-ups with narrower fields at the top and I just thought someone might have that code readily available. But, thank you for your time.

Pathduck

@jaunny OK try this. It's not about the "padding" it's about the height of the mainbar (address bar).

/* Address Bar height */
#browser .toolbar-mainbar {
    min-height: calc(25px / var(--uiZoomLevel)) !important;
}

/* Vivaldi button */
#browser .vivaldi {
    height: 25px !important;
}

/* Window controls */
#browser .window-buttongroup {
    height: 25px !important;
}

25px is the smallest possible I guess.
Also the height of the Vivaldi button and the Windows buttongroup need to be changed otherwise they will look ugly.

You did not say what OS you're on.
Nor did you say if you already use other CSS that might interfere with this code.

Note also that if you change stuff around in the UI, or change zoom level etc, things will probably look bad again. I based this on 75% zoom and tabs on sides since that's what it looks like you use.

That's the problem with delivering "ready-made" solutions - there will be no code that will cover every single possible UI setup, that's why it's so important to learn to do this yourself.

npro

There's nothing more disgusting than those unethical, corp-driven, money-hungry AIs https://arstechnica.com/ai/2025/03/devs-say-ai-crawlers-dominate-traffic-forcing-blocks-on-entire-countries/