From d8a18529359114ccb55dddba28398ae51697f81e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 2 Apr 2025 20:36:24 +0300
Subject: [PATCH] feat(launch_bar): make scrollable when icons don't fit

---
 .../app/widgets/containers/launcher_container.ts   | 14 +++++++++++++-
 src/public/stylesheets/style.css                   |  5 +++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/containers/launcher_container.ts b/src/public/app/widgets/containers/launcher_container.ts
index 7fa833182..87d25250e 100644
--- a/src/public/app/widgets/containers/launcher_container.ts
+++ b/src/public/app/widgets/containers/launcher_container.ts
@@ -11,7 +11,19 @@ export default class LauncherContainer extends FlexContainer<LauncherWidget> {
         super(isHorizontalLayout ? "row" : "column");
 
         this.id("launcher-container");
-        this.css(isHorizontalLayout ? "width" : "height", "100%");
+
+        if (isHorizontalLayout) {
+            this.css("width", "100%");
+            this.css("height", "100%");
+            this.css("overflow-x", "auto");
+            this.css("overflow-y", "hidden");
+        } else {
+            this.css("height", "100%");
+            this.css("overflow-x", "hidden");
+            this.css("overflow-y", "auto");
+        }
+
+        this.css("scrollbar-gutter", "stable both-edges");
         this.filling();
         this.isHorizontalLayout = isHorizontalLayout;
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index e04801943..c20edef76 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1177,6 +1177,10 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     left: calc(-100% + 10px);
 }
 
+.right-dropdown-widget {
+    flex-shrink: 0;
+}
+
 #launcher-pane.horizontal .right-dropdown-widget {
     width: 53px;
 }
@@ -1303,6 +1307,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 #launcher-pane.horizontal .quick-search {
     width: 350px;
+    min-width: 150px;
 }
 
 #launcher-pane .icon-action:hover {