fix(desktop/eww): fixed the overflowing of the windows and workspaces

2 files changed, 72 insertions, 39 deletions

diff --git a/modules/desktop/eww/bar/bar.yuck b/modules/desktop/eww/bar/bar.yuck
index dc2d575..14e27e4 100644
--- a/modules/desktop/eww/bar/bar.yuck
+++ b/modules/desktop/eww/bar/bar.yuck
@@ -25,50 +25,56 @@
        :class "bar-container"
        :vexpand true
     (workspaces-widget :workspaces "${niri_status.workspaces}")
-    (windows-widget :windows "${niri_status.active_windows}")
+    (box :vexpand true
+      (windows-widget :windows "${niri_status.active_windows}"))
     (system-widget)))
 
 (defwidget workspaces-widget [workspaces]
-  (box :orientation "v"
-       :space-evenly false
-       :spacing 4
-       :halign "fill"
-       :class "workspaces"
-    (for ws in workspaces
-      (eventbox :onclick "niri msg action focus-workspace ${ws.idx}"
-                :cursor "pointer"
-                :halign "fill"
-                :tooltip "${ws.tooltip}"
-        (box :class "workspace-button ${ws.is_active ? 'active' : ''}"
-             :halign "fill"
-          (overlay :halign "fill"
-            (image :class "workspace-icon"
-                   :path "${ws.icon}"
-                   :image-width 20
-                   :image-height 20)
-            (label :class "workspace-idx"
-                   :text "${ws.idx}"
-                   :halign "end"
-                   :valign "end")))))))
+  (scroll :hscroll false
+          :vscroll true
+          :height 200
+    (box :orientation "v"
+         :space-evenly false
+         :spacing 4
+         :halign "fill"
+         :class "workspaces"
+      (for ws in workspaces
+        (eventbox :onclick "niri msg action focus-workspace ${ws.idx}"
+                  :cursor "pointer"
+                  :halign "fill"
+                  :tooltip "${ws.tooltip}"
+          (box :class "workspace-button ${ws.is_active ? 'active' : ''}"
+               :halign "fill"
+            (overlay :halign "fill"
+              (image :class "workspace-icon"
+                     :path "${ws.icon}"
+                     :image-width 20
+                     :image-height 20)
+              (label :class "workspace-idx"
+                     :text "${ws.idx}"
+                     :halign "end"
+                     :valign "end"))))))))
 
 (defwidget windows-widget [windows]
-  (box :orientation "v"
-       :space-evenly false
-       :spacing 4
-       :halign "center"
-       :class "windows"
-       :vexpand true
-    (for w in windows
-      (eventbox :onclick "niri msg action focus-window --id ${w.id}"
-                :cursor "pointer"
-                :halign "fill"
-                :tooltip "${w.app_id}: ${w.title != '' ? ' ' : ''}${w.title}"
-        (box :halign "fill"
-             :class "window-button ${w.is_focused ? 'focused' : ''}"
-          (image :class "window-icon"
-                 :path "${w.icon}"
-                 :image-width 20
-                 :image-height 20))))))
+  (scroll :hscroll false
+          :vscroll true
+          :vexpand true
+    (box :orientation "v"
+         :space-evenly false
+         :spacing 4
+         :halign "center"
+         :class "windows"
+      (for w in windows
+        (eventbox :onclick "niri msg action focus-window --id ${w.id}"
+                  :cursor "pointer"
+                  :halign "fill"
+                  :tooltip "${w.app_id}: ${w.title != '' ? ' ' : ''}${w.title}"
+          (box :halign "fill"
+               :class "window-button ${w.is_focused ? 'focused' : ''}"
+            (image :class "window-icon"
+                   :path "${w.icon}"
+                   :image-width 20
+                   :image-height 20)))))))
 
 (defwidget system-widget []
   (box :orientation "v"
diff --git a/modules/desktop/eww/eww.scss b/modules/desktop/eww/eww.scss
index 40ce183..8a19ffc 100644
--- a/modules/desktop/eww/eww.scss
+++ b/modules/desktop/eww/eww.scss
@@ -83,3 +83,30 @@ window#eww-bar {
 .workspace-button.active .workspace-idx {
   opacity: 1;
 }
+
+scroll {
+  min-height: 0;
+}
+
+scroll > box {
+  min-height: 0;
+}
+
+scrollbar {
+  background: transparent;
+}
+
+scrollbar slider {
+  background: #@@base03@@;
+  border-radius: 4px;
+  min-width: 6px;
+  min-height: 20px;
+}
+
+scrollbar slider:hover {
+  background: #@@base05@@;
+}
+
+scrollbar trough {
+  background: transparent;
+}