From e97b9bdba4ce33fc11bb35feba8b3d9e6df974df Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 22 Nov 2023 14:13:40 +0200
Subject: [PATCH] scrollable trending column

---
 packages/app/src/Pages/Layout/RightColumn.tsx | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/Pages/Layout/RightColumn.tsx b/packages/app/src/Pages/Layout/RightColumn.tsx
index c9172f45..9204754a 100644
--- a/packages/app/src/Pages/Layout/RightColumn.tsx
+++ b/packages/app/src/Pages/Layout/RightColumn.tsx
@@ -6,27 +6,29 @@ import { FormattedMessage } from "react-intl";
 
 export default function RightColumn() {
   return (
-    <div className="flex-col hidden lg:flex lg:w-1/3 sticky top-0 h-screen p-2 border-l border-neutral-900 gap-8">
-      <div>
+    <div className="flex-col hidden lg:flex lg:w-1/3 h-screen p-2 border-l border-neutral-900 gap-8">
+      <div className="sticky top-0">
         <SearchBox />
       </div>
-      <div>
-        <div className="font-bold">
-          <FormattedMessage defaultMessage="Trending hashtags" id="CbM2hK" />
+      <div className="overflow-y-auto flex-grow">
+        <div>
+          <div className="font-bold">
+            <FormattedMessage defaultMessage="Trending hashtags" id="CbM2hK" />
+          </div>
+          <TrendingHashtags count={5} />
         </div>
-        <TrendingHashtags count={5} />
-      </div>
-      <div>
-        <div className="font-bold">
-          <FormattedMessage defaultMessage="Trending notes" id="6k7xfM" />
+        <div>
+          <div className="font-bold">
+            <FormattedMessage defaultMessage="Trending notes" id="6k7xfM" />
+          </div>
+          <TrendingNotes count={5} />
         </div>
-        <TrendingNotes count={5} />
-      </div>
-      <div>
-        <div className="font-bold">
-          <FormattedMessage defaultMessage="Trending users" id="arZnG2" />
+        <div>
+          <div className="font-bold">
+            <FormattedMessage defaultMessage="Trending users" id="arZnG2" />
+          </div>
+          <TrendingUsers count={5} />
         </div>
-        <TrendingUsers count={5} />
       </div>
     </div>
   );