diff --git a/app/common/lib/bookmarkUtil.js b/app/common/lib/bookmarkUtil.js index f1beea204f0..12df705feb5 100644 --- a/app/common/lib/bookmarkUtil.js +++ b/app/common/lib/bookmarkUtil.js @@ -75,7 +75,7 @@ const getToolbarBookmarks = (state) => { .sort(siteUtil.siteSort) .filter((bookmark) => !bookmark.get('parentFolderId')) let widthAccountedFor = 0 - const overflowButtonWidth = 25 + const onlyFavicon = showOnlyFavicon() const favicon = showFavicon() @@ -92,7 +92,11 @@ const getToolbarBookmarks = (state) => { const fontFamily = domUtil.getStyleConstants('default-font-family') const chevronWidth = chevronMargin + fontSize const margin = favicon && onlyFavicon ? 0 : bookmarkItemMargin + const windowWidth = window.innerWidth + const overflowButtonWidth = 25 + const maximumBookmarksToolbarWidth = windowWidth - overflowButtonWidth + widthAccountedFor += toolbarPadding // Loop through until we fill up the entire bookmark toolbar width @@ -106,15 +110,38 @@ const getToolbarBookmarks = (state) => { } const currentChevronWidth = favicon && current.get('folderId') ? chevronWidth : 0 if (favicon && onlyFavicon) { - widthAccountedFor += padding + iconWidth + currentChevronWidth + const extraWidth = padding + iconWidth + currentChevronWidth + + widthAccountedFor += extraWidth + + if (widthAccountedFor >= maximumBookmarksToolbarWidth) { + widthAccountedFor -= extraWidth + i-- + + break + } } else { const text = current.get('customTitle') || current.get('title') || current.get('location') - widthAccountedFor += Math.min(calculateTextWidth(text, `${fontSize} ${fontFamily}`) + padding + iconWidth + currentChevronWidth, maxWidth) + const extraWidth = Math.min(calculateTextWidth(text, `${fontSize} ${fontFamily}`) + padding + iconWidth + currentChevronWidth, maxWidth) + + widthAccountedFor += extraWidth + + if (widthAccountedFor >= maximumBookmarksToolbarWidth) { + widthAccountedFor -= extraWidth + i-- + + break + } } widthAccountedFor += margin - if (widthAccountedFor >= windowWidth - overflowButtonWidth) { + + if (widthAccountedFor >= maximumBookmarksToolbarWidth) { + widthAccountedFor -= margin + i-- + break } + i++ }