Skip to content

Instantly share code, notes, and snippets.

@Aldaviva
Last active April 2, 2024 00:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Aldaviva/39e4472ab7a5ee50473de74df826d928 to your computer and use it in GitHub Desktop.
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!

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