Skip to content

Instantly share code, notes, and snippets.

@Aldaviva
Last active November 13, 2025 13:43
Show Gist options
  • Select an option

  • Save Aldaviva/39e4472ab7a5ee50473de74df826d928 to your computer and use it in GitHub Desktop.

Select an option

Save Aldaviva/39e4472ab7a5ee50473de74df826d928 to your computer and use it in GitHub Desktop.
How to make tabs wider in browsers and operating systems

By increasing the maximum width of tabs and taskbar buttons, you can

  • see more of their text labels without truncation,
  • have a larger hit area for your mouse pointer, and
  • make better use of the space on your wide monitor.

This does not break the resizing logic when you open more tabs, so the worst-case scenario behavior is unchanged. For example, you could set the maximum tab width to a size at least as wide as your monitor. Then, when you have one tab open, it will consume 100% of the available space. Next, when you open another tab, they will each consume 50% of the available space. When the minimum tab width is reached, the existing overflow or scrolling logic will still apply.

Make tabs wider in
  1. Create the file %APPDATA%\Mozilla\Firefox\Profiles\*\chrome\userChrome.css.
  2. Set its contents to
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    
    .tabbrowser-tab:not([pinned]) {
        max-width: 4000px !important;
    }
  3. Restart Firefox for the change to take effect.
  1. Copy skin\standard_skin.zip from the Opera installation directory to %APPDATA%\Opera\Opera\skin\custom_skin.zip.
  2. Open skin.ini inside custom_skin.zip using a text editor.
  3. Change [Info] Name to a custom name for your skin.
  4. Set both [Options] Pagebar max button width and [Options] Pagebar min button width to the number of pixels that you want tabs to expand horizontally to, like 4000.
  5. Restart Opera.
  6. Open the Appearance dialog and choose your custom skin.
  1. Open Application\*\resources\vivaldi\bundle.js from the Vivaldi installation directory in a text editor.
  2. Find the line that a constant declaration with the value 180,, which is the default maximum tab width. The name of the constant can change across different Vivaldi releases when the file is minified.
  3. Replace 180 with the number of pixels that you want tabs to expand horizontally to, like 4000.
  4. Restart Vivaldi for the change to take effect.

See Aldaviva/Vivaldi customizations.md for more details.

Hints

  • Allow the Developer Tools to inspect the browser chrome using the chrome://flags/#debug-packed-apps flag.
  • The constant is used by the getTabConfig method from the TabStrip.jsx file included in bundle.js.
  • bundle.js will be overwritten during upgrades, so you may want to develop a program that can automatically patch this file.

This applies to taskbar buttons, which aren't called tabs, but are functionally identical and benefit from these changes for the same reasons.

  1. Start Registry Editor.
  2. Go to HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics.
  3. Set the REG_SZ value MinWidth to -51600.
    • The value must be negative, or else minimized Command Prompt and PowerShell windows will show a floating title bar in Windows 10.
    • The unit is "twips."
    • One pixel is 15 twips.
    • A 3440 pixel wide screen is 51,600 twips wide.
  4. Log out of Windows for the change to take effect. Restarting Windows Explorer is insufficient.
@buglocker
Copy link

Oh man !!!!!
The hack of Vivaldi's bundle.js is the solution that we search for 2 years.
Thanks !!!!!!!!!!!!!! πŸ˜πŸ˜πŸ˜πŸ˜πŸ‘πŸ‘πŸ‘πŸ‘

@Aldaviva
Copy link
Author

Aldaviva commented Apr 2, 2024

I'm glad you found what you were looking for. Happy Vivaldi browsing!

@buglocker
Copy link

Hey.
I m at 6.8.3381.44 (Stable channel) , and it not works. Any idea ?
Thx.

@Aldaviva
Copy link
Author

I saw from an automated test that this tweak broke in 6.8. I will probably be looking into it in the next day or two and will try to remember to post an update here when I get a fix. Thanks for the heads-up.

@buglocker
Copy link

I found it.
Before it was const ipe=180
now it is const sue=180

Set the minimum width for the active tab is at :
[$.kTabsActiveMinSize],min:30,max:180,step:30
πŸ€™πŸ€™πŸ€™πŸ€™πŸ€™

@Aldaviva
Copy link
Author

Oh right, sorry I was thinking about a different tweak I have that gets rid of the + button to open a new tab that broke in 6.8.

Like you said, the max tab width tweak does suffer from the minified variable name changing all the time. Therefore, I use a regular expression to search for the =180 with some extra tokens to ensure the correct match. Take a look if you want to use that in the future.

=180(?=[;,].{0,300}"dragspace")

@Sibelius58
Copy link

Hi, apparently this method doesn't work anymore with version 7.6.
Vivaldi U.I. doesn't show on launch using the modified bundle.js.
May you confirm? Thanks

@Aldaviva
Copy link
Author

Hi, the minified code changes all the time (which is Vivaldi's right, of course). The matching pattern most recently changed in 7.5. I always keep VivaldiCustomLauncher updated, which successfully makes tabs wide in Vivaldi 7.6.3797.56 (latest stable as of 2025-09-27). Please refer to BundleScriptTweak:increaseMaximumTabWidth(string) for up-to-date modifications, or just run VivaldiCustomLauncher.exe to do it all for you automatically (including auto-update for new versions of Vivaldi and the launcher). Thanks.

@Sibelius58
Copy link

Thanks for answering. I originally learned this way of changing the width of the tabs in the following Vivaldi forum post:

https://forum.vivaldi.net/topic/94907/how-to-customize-maximum-tab-width-of-vivaldi

I can't say if its author took the method from you. It has always worked, until version 7.6.

I modified the following string inside bundle.js:

ohe=180,rhe=150,lhe=30,che=16 (current for 7.6 version)

Instead of 180 I entered my favorite value: 240. Now if I launch Vivaldi, the U.I. does not open.

Thank you for the suggestion to use your program (and who knows, maybe I will in the future) but for now I'd prefer to continue using one that synchronizes a bundle.js modified by me (as above) with the one in the Vivaldi folder.

I would appreciate if you could explain to me why the method used so far no longer works (please note that I don't know about js).

P.S. Sorry but I don't understand how I should use the string you suggested:

https://github.com/Aldaviva/VivaldiCustomLauncher/blob/master/VivaldiCustomLauncher/Tweaks/BundleScriptTweak.cs#L65

I can't find it inside bundle.js.

@Aldaviva
Copy link
Author

What you did should have worked, because I modified that same ohe variable assignment (to a larger value, although that shouldn't matter) and the UI renders fine for me with the same version. I wonder if something else went wrong and caused the UI to not appear.

One thing you can try is checking the Vivaldi logs to see if it encountered any errors, for example a JS syntax error in bundle.js. I have found this technique helpful to detect if I messed up any of the JS modifications.

  1. Make sure your bundle.js has your change saved (ohe=240,)
  2. Exit Vivaldi
  3. Start Vivaldi with the command-line arguments --enable-logging --v=1 (e.g. open Command Prompt and run "C:\Program Files\Vivaldi\Application\vivaldi.exe" --enable-logging --v=1, or whatever your installation directory is)
  4. Open %localappdata%\Vivaldi\User Data\chrome_debug.log in a text editor
  5. See if there are any log lines with errors that contain :ERROR:CONSOLE(, which could have been caused by editing bundle.js

@Sibelius58
Copy link

As I posted on Vivaldi forum, apparently this mod doesn't work anymore with version 7.6, not even with a brand new installation of Vivaldi (all previous data erased). I have no cue of the reason.

@Sibelius58
Copy link

I 've just posted on Vivaldi forum:

It works again with version 7.7.3851.48. Don't ask me why...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment