sidebars: Add easily adjustable space below sidebar filters.

(cherry picked from commit 4f08718163)

web/styles/app_variables.css

@@ -297,6 +297,7 @@
        Value is chosen to avoid elements overlapping with the browser's URL
        display when hovering links, and should not scale with font size. */
     --sidebar-bottom-spacing: 25px;
+    --sidebar-filter-bottom-spacing: 3px;
 
     /* We base sidebar row heights on their line heights.
        Prominent rows include things like headers (e.g., VIEWS)

web/styles/left_sidebar.css

@@ -352,7 +352,8 @@
     top: 0;
     background: var(--color-background);
     /* Must be padding not margin so that the sticky headers don't show behind it */
-    padding: 0 var(--left-sidebar-right-margin) 0 5px;
+    padding: 0 var(--left-sidebar-right-margin)
+        var(--sidebar-filter-bottom-spacing) 5px;
 
     .channel-folders-sidebar-menu-icon {
         grid-area: channel-folders-option;

web/styles/right_sidebar.css

@@ -510,6 +510,7 @@
     /* The scrollbar doesn't extend this high, but we want the three-dot
        menus to line up. */
     padding-right: var(--width-simplebar-scroll-hover);
+    padding-bottom: var(--sidebar-filter-bottom-spacing);
     background-color: var(--color-background);
 
     #buddy-list-menu-icon {