Skip to content

Instantly share code, notes, and snippets.

@Aldaviva

Aldaviva/Maximum tab width.md

Last active November 13, 2025 13:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Aldaviva/39e4472ab7a5ee50473de74df826d928 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Aldaviva/39e4472ab7a5ee50473de74df826d928 to your computer and use it in GitHub Desktop.
Download ZIP
How to make tabs wider in browsers and operating systems
Raw
Maximum tab width.md

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
Raw
| Firefox.md
  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.
Raw
| Opera Presto.md
  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.
Raw
| Vivaldi.md
  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.
Raw
| Windows Explorer.md

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.
@Aldaviva
Copy link
Author

Aldaviva commented Sep 28, 2025

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

Sibelius58 commented Sep 28, 2025

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

Aldaviva commented Sep 28, 2025

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

Sibelius58 commented Sep 30, 2025

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

Sibelius58 commented Nov 13, 2025

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