sidebar: news use monitor height

Use monitor height instead of absolute

scss/sidebar.scss

@@ -751,10 +751,6 @@
     .news {
         min-height: lib.s(200);
 
-        .expanded {
-            min-height: lib.s(500);
-        }
-
         .empty {
             margin-top: lib.s(40);
         }
@@ -795,10 +791,6 @@
     .headlines {
         min-height: lib.s(200);
 
-        .expanded {
-            min-height: lib.s(500);
-        }
-
         .empty {
             margin-top: lib.s(40);
         }

src/modules/sidebar/alerts.tsx

@@ -1,10 +1,11 @@
+import type { Monitor } from "@/services/monitors";
 import Headlines from "./modules/headlines";
 import Notifications from "./modules/notifications";
 
-export default () => (
+export default ({ monitor }: { monitor: Monitor }) => (
     <box vertical className="pane alerts" name="alerts">
         <Notifications />
         <box className="separator" />
-        <Headlines />
+        <Headlines monitor={monitor} />
     </box>
 );

src/modules/sidebar/index.tsx

@@ -33,12 +33,12 @@ export const awaitSidebar = (monitor: Monitor) =>
         idle(awaitSidebar);
     });
 
-const getPane = (name: PaneName) => {
+const getPane = (monitor: Monitor, name: PaneName) => {
     if (name === "dashboard") return <Dashboard />;
     if (name === "audio") return <Audio />;
     if (name === "connectivity") return <Connectivity />;
-    if (name === "packages") return <Packages />;
+    if (name === "packages") return <Packages monitor={monitor} />;
-    if (name === "alerts") return <Alerts />;
+    if (name === "alerts") return <Alerts monitor={monitor} />;
     return <Time />;
 };
 
@@ -76,7 +76,7 @@ export default class SideBar extends Widget.Window {
                         transitionDuration={200}
                         shown={bind(this.shown)}
                     >
-                        {paneNames.map(getPane)}
+                        {paneNames.map(n => getPane(monitor, n))}
                     </stack>
                 </box>
             </eventbox>

src/modules/sidebar/modules/headlines.tsx

@@ -1,3 +1,4 @@
+import type { Monitor } from "@/services/monitors";
 import News, { type IArticle } from "@/services/news";
 import Palette, { type IPalette } from "@/services/palette";
 import { capitalize } from "@/utils/strings";
@@ -143,7 +144,7 @@ const NoNews = () => (
     </box>
 );
 
-export default () => (
+export default ({ monitor }: { monitor: Monitor }) => (
     <box vertical className="headlines">
         <box className="header-bar">
             <label label="Top news headlines" />
@@ -163,7 +164,9 @@ export default () => (
         >
             <NoNews />
             <scrollable
-                className={bind(News.get_default(), "articles").as(a => (a.length > 0 ? "expanded" : ""))}
+                css={bind(News.get_default(), "articles").as(a =>
+                    a.length > 0 ? `min-height: ${Math.round(monitor.height * 0.4)}px;` : ""
+                )}
                 hscroll={Gtk.PolicyType.NEVER}
                 name="list"
             >

src/modules/sidebar/modules/news.tsx

@@ -1,3 +1,4 @@
+import type { Monitor } from "@/services/monitors";
 import Palette from "@/services/palette";
 import Updates from "@/services/updates";
 import { setupCustomTooltip } from "@/utils/widgets";
@@ -75,7 +76,7 @@ const NoNews = () => (
     </box>
 );
 
-export default () => (
+export default ({ monitor }: { monitor: Monitor }) => (
     <box vertical className="news">
         <box className="header-bar">
             <label
@@ -99,7 +100,9 @@ export default () => (
         >
             <NoNews />
             <scrollable
-                className={bind(Updates.get_default(), "news").as(n => (n ? "expanded" : ""))}
+                css={bind(Updates.get_default(), "news").as(n =>
+                    n ? `min-height: ${Math.round(monitor.height * 0.4)}px;` : ""
+                )}
                 hscroll={Gtk.PolicyType.NEVER}
                 name="list"
             >

src/modules/sidebar/packages.tsx

@@ -1,10 +1,11 @@
+import type { Monitor } from "@/services/monitors";
 import News from "./modules/news";
 import Updates from "./modules/updates";
 
-export default () => (
+export default ({ monitor }: { monitor: Monitor }) => (
     <box vertical className="pane packages" name="packages">
         <Updates />
         <box className="separator" />
-        <News />
+        <News monitor={monitor} />
     </box>
 );