REMOVE: ScrollBar for Homepage and some other pages

frontend/src/pages/CategoryPage.tsx

@@ -96,7 +96,16 @@ const CategoryPage: React.FC = () => {
   if (hasMoreData && !streams.length) return <LoadingScreen />;
 
   return (
-    <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]">
+    <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]"style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+    >
+            {/* Hide Scrollbar for WebKit-based Browsers */}
+            <style>
+        {`
+          ::-webkit-scrollbar {
+            display: none;
+          }
+        `}
+      </style>
       <div className="pt-8">
         <ListRow
           type="stream"

frontend/src/pages/ResultsPage.tsx

@@ -38,7 +38,16 @@ const ResultsPage: React.FC = ({}) => {
         navbarVariant="no-navbar"
         className="flex flex-col items-stretch justify-stretch h-[70vh] my-[15vh] p-4"
         contentClassName="flex flex-col items-center h-full p-4"
+        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
       >
+        {/* Hide Scrollbar for WebKit-based Browsers */}
+        <style>
+          {`
+              ::-webkit-scrollbar {
+                display: none;
+              }
+            `}
+        </style>
         <h1 className="text-3xl font-bold mb-4">
           Search results for "{query}"
         </h1>
@@ -128,8 +137,7 @@ const ResultsPage: React.FC = ({}) => {
         </div>
 
         <div
-          className={`${
-            overflow && "absolute top-[5vh] right-[2vw]"
+          className={`${overflow && "absolute top-[5vh] right-[2vw]"
             } flex gap-[2vw]`}
         >
           <Button