--- a/sidebar/js/tab-collection-manager.js	Mon Nov 19 17:26:17 2018 +0100
+++ b/sidebar/js/tab-collection-manager.js	Wed Nov 21 11:39:07 2018 +0100
@@ -38,6 +38,8 @@
 
         document.body.addEventListener('click', this);
 
+        window.addEventListener('optimizedResize', this);
+
         this.isInitialized = true;
     }
 
@@ -104,6 +106,7 @@
                 'to tab collections');
         this.tabCollectionsElement
                 .prepend(this.createTabCollectionNode(tabCollection));
+        this.handleResize();
     }
 
     replaceTabCollection(tabCollection) {
@@ -111,6 +114,7 @@
         this.tabCollectionsElement.querySelector(`[data-tab-collection-uuid=` +
                 `"${tabCollection.uuid}"]`)
                 .replaceWith(this.createTabCollectionNode(tabCollection));
+        this.handleResize();
     }
 
     removeTabCollection(tabCollectionUuid) {
@@ -158,6 +162,31 @@
         this.sortTabCollections();
     }
 
+    handleTabCollectionChanged(tabCollectionContainerElement) {
+        let tabsElement = tabCollectionContainerElement
+                .querySelector('.tab-collection-tabs');
+        let scrollLeftElement = tabCollectionContainerElement
+                .querySelector('.scroll-left');
+        let scrollRightElement = tabCollectionContainerElement
+                .querySelector('.scroll-right');
+        if (tabsElement.scrollWidth > tabsElement.clientWidth) {
+            scrollLeftElement.classList.add('scroll-visible');
+            scrollRightElement.classList.add('scroll-visible');
+        } else {
+            scrollLeftElement.classList.remove('scroll-visible');
+            scrollRightElement.classList.remove('scroll-visible');
+        }
+    }
+
+    handleResize() {
+        let tabCollectionContainerElements =
+                document.querySelectorAll('.tab-collection-tabs-container');
+        for (let tabCollectionContainerElement of
+                tabCollectionContainerElements) {
+            this.handleTabCollectionChanged(tabCollectionContainerElement);
+        }
+    }
+
     handleEvent(ev) {
         console.log('DOM event', ev);
         if (ev.type === 'click') {
@@ -191,6 +220,19 @@
                     tabCollectionUuid,
                     tabUuid
                 });
+            } else if (ev.target.classList.contains('tabs-scroll-button')) {
+                // scroll tab list
+                let tabsElement = ev.target
+                        .closest('.tab-collection-tabs-container')
+                        .querySelector('.tab-collection-tabs');
+                if (ev.target.classList.contains('scroll-left')) {
+                    tabsElement.scrollLeft = Math.max(tabsElement.scrollLeft -
+                            tabsElement.clientWidth * .75, 0);
+                } else {
+                    tabsElement.scrollLeft = Math.min(tabsElement.scrollLeft +
+                            tabsElement.clientWidth * .75,
+                            tabsElement.scrollLeftMax);
+                }
             } else {
                 let tabItemElement = ev.target.closest('.tab-item');
                 if (tabItemElement !== null) {
@@ -207,6 +249,9 @@
                     });
                 }
             }
+        } else if (ev.type === 'optimizedResize') {
+            // window has been resized
+            this.handleResize();
         }
     }
 }
@@ -219,5 +264,23 @@
         return;
     }
 
+    function throttleResize(type, name, obj) {
+        obj = obj || window;
+        var isRunning = false;
+        var func = function() {
+            if (isRunning) {
+                return;
+            }
+
+            isRunning = true;
+            requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                isRunning = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+    throttleResize('resize', 'optimizedResize');
+
     tabManager = new TabManager();
 });