Fixed sidebar

src/App.tsx

@@ -49,7 +49,7 @@ export default function App() {
                   minSize="4rem"
                   groupResizeBehavior="preserve-pixel-size"
                 >
-                  <div className="flex">
+                  <div className="h-screen flex overflow-y-hidden">
                     <ServerList appRef={appRef} />
                     <Sidebar appRef={appRef} />
                   </div>

src/components/sidebar/MainPageSidebar.tsx

@@ -5,6 +5,7 @@ import { openUrl } from "@tauri-apps/plugin-opener";
 import { Button } from "@/components/ui/button";
 import { RefreshCw, Rss } from "lucide-react";
 import { cn } from "@/lib/utils";
+import StatusCard from "../view/StatusCard";
 
 function formatTime(publishedAt: number): string {
   if (!publishedAt) return "";
@@ -73,7 +74,9 @@ function StaticFallback() {
   );
 }
 
-export default function MainPageSidebar(_props: {
+export default function MainPageSidebar({
+  appRef,
+}: {
   appRef: React.RefObject<Enclave | null>;
 }) {
   const [items, setItems] = useState<NewsItem[] | null>(null);
@@ -98,6 +101,7 @@ export default function MainPageSidebar(_props: {
   }, [load]);
 
   return (
+    <div className="h-full relative w-full @container">
       <div className="flex h-screen w-full flex-col">
         <header className="flex items-center justify-between px-3 py-2.5 border-b border-b-border">
           <h1 className="text-lg font-semibold flex items-center gap-2">
@@ -114,7 +118,7 @@ export default function MainPageSidebar(_props: {
           </Button>
         </header>
 
-      <section className="flex-1 overflow-y-scroll scrollbar-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden px-2 py-2">
+        <section className="flex-1 overflow-y-scroll scrollbar-none[&::-webkit-scrollbar]:hidden px-2 py-2 mb-28">
           {loading && items === null && (
             <p className="px-2 py-4 text-sm text-muted-foreground">
               Loading news…
@@ -151,5 +155,8 @@ export default function MainPageSidebar(_props: {
           )}
         </section>
       </div>
+
+      <StatusCard appRef={appRef} />
+    </div>
   );
 }

src/components/sidebar/ServerSidebar.tsx

@@ -156,20 +156,20 @@ export default function ServerSidebar({
   appRef: React.RefObject<Enclave | null>;
 }) {
   return (
-    <div className="h-screen relative w-full @container">
+    <div className="h-full relative w-full @container">
       {appRef.current?.server?.meta && (
-        <>
+        <div className="h-full">
           <header className="px-3 pt-2.5 pb-2.5 text-lg font-semibold border-b border-b-border">
             <h1>{appRef.current.server.meta.name}</h1>
           </header>
 
-          <section className="px-1.5 pt-3.5 w-full h-full flex flex-col gap-1 overflow-y-scroll scrollbar-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden pb-55">
+          <section className="px-1.5 pt-3.5 w-full h-full flex flex-col gap-1 overflow-y-scroll scrollbar-none [&::-webkit-scrollbar]:hidden mb-28">
             <RenderChannels
               appRef={appRef}
               channels={appRef.current.server.meta.channels}
             />
           </section>
-        </>
+        </div>
       )}
 
       <StatusCard appRef={appRef} />