Multi Row Tabs in Firefox 83 - userChrome.css Fix 2023

[autentik]

• Open about:config and set     toolkit.legacyUserProfileCustomizations.stylesheets to true.
• Open a new tab on about:support and click the button next to     "Profile Folder"
• Go to the "chrome" directory at the profile folder, or create it if it doesn't exist.
• Create a file named "userChrome.css" (if it doesn't exist) and open it in a text editor.
• Copy the css code from below
• Paste it into userChrome.css and save.
• Restart Firefox

Kod [Izaberi] Expand



#PersonalToolbar{
  --multirow-bmb-n-rows: 5; / Control how many rows are shown before scrolling /
  --multirow-bmb-row-margin: 2px; / Control how much spacing is between rows /
  max-height: none !important;
}

#PlacesToolbar > hbox{
  display: block;
  width: 100vw;
}

#PlacesToolbarItems{
  display: flex;
  flex-wrap: wrap;
  / --uc-bm-padding is defined in autohide_bookmarks_toolbar.css /
  max-height: calc(var(--multirow-bmb-n-rows)  (5px + 1em + (2  (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,2px))))) !important;
  overflow-y:auto;
  scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;
  scrollbar-width: thin;
}

/ Hide the all-bookmarks button /
#PlacesChevron{ display: none }

/ Add some spacing between rows /
#PlacesToolbarItems > .bookmark-item{ margin: var(--multirow-bmb-row-margin) 3px !important;  }


[autentik]

2022.  fix

Kod [Izaberi] Expand

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
  /* Override max-height */
  min-height: unset !important;
  max-height: unset !important;
}

#PersonalToolbar #PlacesToolbarItems {
  /* Override hiding */
  overflow-x: visible !important;
  overflow-y: visible !important;
  display: inline-block !important;
  padding-bottom: 1px;
}

#PersonalToolbar #PlacesToolbarItems .bookmark-item {
  /* Reduce padding to fit rows closer together */
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

[kevintexas0106]

One of the important steps you need to take is to go to Firefox's configuration folder by typing "about:support" in Firefox's address bar and pressing Enter. Then, in the "Configuration" section, you will see the path to Firefox's configuration folder.

[ratketyree]

The purpose of the CSS code you supplied is to make the bookmarks toolbar more personalized and to add more rows of bookmarks. If you're seeking a tab-related solution, you might want to consider exploring other CSS codes or extensions that cater to multi-row tabs.

[lorde]

This guide provides a step-by-step process to enable multi-row tabs in Firefox 83 using the userChrome.css file. By following these instructions, you can customize Firefox to display multiple rows of tabs, enhancing your browsing experience.