Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Bookmark list instead of scroll

more options

Is it possible to have folders with a lot of bookmarks displayed in multiple columns, instead of the scroll arrow?

Side question, is it possible to reduce bookmark list item thickness? I like the redesign, but the bookmarks are super thick, would much prefer the old, thin ones.

Is it possible to have folders with a lot of bookmarks displayed in multiple columns, instead of the scroll arrow? Side question, is it possible to reduce bookmark list item thickness? I like the redesign, but the bookmarks are super thick, would much prefer the old, thin ones.
Attached screenshots

Chosen solution

Yes and no?

In the past, various users have posted (unofficial, community-supported) style rules to split the bookmarks list over multiple columns. However, these rules are not "one size fits all" and require tweaking various parameters. I haven't gotten them to work well with folders that contain an enormous number of items (requiring more than 4 columns), but if you want to play around...

/*
  Multi-column Bookmarks Menu for Fx92
  Ref. https://www.reddit.com/r/FirefoxCSS/comments/m2iu4z/firefox_multicolumn_bookmarks/
  TODO: horizontal scroll for too many columns? [2021-09-23]
*/

/* USER PARAMETERS */

#bookmarksMenuPopup, #BMB_bookmarksPopup {
  --user-top-bottom-padding: 2px; /* spacing tightness; default is 8px */
  --user-items-per-column: 45; /* reduce if the menu doesn't fit */
}

/* RULES */

/* Modify bookmark spacing only in bookmark menus */
menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: var(--user-top-bottom-padding, inherit) !important;
  min-height: unset !important;
}

/* Keep width to a reasonable total */
#bookmarksMenuPopup, #BMB_bookmarksPopup {
  max-width: 80vw !important;
  overflow-x: scroll !important; /* DOESN'T WORK */
}

/* Apply grid layout */
.menupopup-arrowscrollbox * {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--user-items-per-column, 40), auto);
  grid-auto-columns: minmax(200px, 380px);
}
Read this answer in context 👍 1

All Replies (2)

more options

In the current Firefox 92 release you can only reduce the menu spacing via userChrome.css. In the next Firefox 93 release (current Beta/DE) they have added support to reduce the menu spacing via "Density: Compact" on the Customize page.

Note that "Compact" is no longer present by default as a Density choice in Customize.

more options

Chosen Solution

Yes and no?

In the past, various users have posted (unofficial, community-supported) style rules to split the bookmarks list over multiple columns. However, these rules are not "one size fits all" and require tweaking various parameters. I haven't gotten them to work well with folders that contain an enormous number of items (requiring more than 4 columns), but if you want to play around...

/*
  Multi-column Bookmarks Menu for Fx92
  Ref. https://www.reddit.com/r/FirefoxCSS/comments/m2iu4z/firefox_multicolumn_bookmarks/
  TODO: horizontal scroll for too many columns? [2021-09-23]
*/

/* USER PARAMETERS */

#bookmarksMenuPopup, #BMB_bookmarksPopup {
  --user-top-bottom-padding: 2px; /* spacing tightness; default is 8px */
  --user-items-per-column: 45; /* reduce if the menu doesn't fit */
}

/* RULES */

/* Modify bookmark spacing only in bookmark menus */
menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: var(--user-top-bottom-padding, inherit) !important;
  min-height: unset !important;
}

/* Keep width to a reasonable total */
#bookmarksMenuPopup, #BMB_bookmarksPopup {
  max-width: 80vw !important;
  overflow-x: scroll !important; /* DOESN'T WORK */
}

/* Apply grid layout */
.menupopup-arrowscrollbox * {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--user-items-per-column, 40), auto);
  grid-auto-columns: minmax(200px, 380px);
}