From da288f62e4c014fc6450eaafaaee147400649004 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 21 Nov 2024 17:29:43 +0100
Subject: [PATCH] ui fix: scroller bar in options flow page

---
 src/routes/+page.svelte              | 16 +++++++---------
 src/routes/options-flow/+page.svelte |  6 +++---
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 63a4789e..32ef275b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -227,7 +227,7 @@
       <main class="flex flex-1 flex-col gap-4 sm:p-4 md:gap-8">
         <div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
           <Card.Root
-            class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar max-h-[450px]"
+            class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar max-h-[450px]"
           >
             <Card.Header class="flex flex-row items-center">
               <div class="flex flex-col items-start w-full">
@@ -320,7 +320,7 @@
             </Card.Content>
           </Card.Root>
           <Card.Root
-            class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar max-h-[450px]"
+            class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar max-h-[450px]"
           >
             <Card.Header class="flex flex-row items-center">
               <div class="flex flex-col items-start w-full">
@@ -415,9 +415,7 @@
         </div>
 
         <div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
-          <Card.Root
-            class="overflow-x-scroll overflow-hidden overflow-y-scroll"
-          >
+          <Card.Root class="overflow-x-scroll overflow-hidden overflow-y-auto">
             <Card.Header class="flex flex-row items-center">
               <div class="flex flex-col items-start w-full">
                 <div class="flex flex-row w-full items-center">
@@ -438,7 +436,7 @@
                 <Card.Description class="mt-2 text-sm sm:text-[1rem]"
                   >Recent unusual options with the highest ...</Card.Description
                 >
-                <Tabs.Root value="premium" class="w-fit mt-5 ">
+                <Tabs.Root value="premium" class="w-full sm:w-fit mt-5 ">
                   <Tabs.List class="grid w-full grid-cols-3 bg-[#313131]">
                     <Tabs.Trigger
                       on:click={() => changeTable("premium")}
@@ -539,7 +537,7 @@
           </Card.Root>
 
           <Card.Root
-            class="order-3 sm:order-1 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[470px]"
+            class="order-3 sm:order-1 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar sm:max-h-[470px]"
           >
             <Card.Header class="flex flex-row items-center">
               <div class="flex flex-col items-start w-full">
@@ -635,7 +633,7 @@
           </Card.Root>
 
           <Card.Root
-            class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]"
+            class="order-1 sm:order-2 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar sm:max-h-[550px]"
           >
             <Card.Header class="flex flex-row items-center">
               <div class="flex flex-col items-start w-full">
@@ -722,7 +720,7 @@
           </Card.Root>
 
           <Card.Root
-            class="order-2 sm:order-3 overflow-x-scroll overflow-hidden overflow-y-scroll no-scrollbar sm:max-h-[550px]"
+            class="order-2 sm:order-3 overflow-x-scroll overflow-hidden overflow-y-auto no-scrollbar sm:max-h-[550px]"
           >
             <Card.Header class="flex flex-row items-center">
               <div class="flex flex-col items-start w-full">
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index decf248a..50a7e118 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -997,7 +997,7 @@ function sendMessage(message) {
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<body class="xl:fixed h-screen w-full max-w-screen-xl">
+<body class="overflow-y-auto">
   <section
     class="w-full max-w-screen sm:max-w-6xl xl:max-w-7xl flex justify-center items-center bg-[#09090B] pb-20"
   >
@@ -1297,7 +1297,7 @@ function sendMessage(message) {
                           </Button>
                         </DropdownMenu.Trigger>
                         <DropdownMenu.Content
-                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                          class="w-56 h-fit max-h-72 overflow-y-auto "
                         >
                           {#if !["put_call", "sentiment", "execution_estimate", "option_activity_type", "date_expiration", "underlying_type"]?.includes(row?.rule)}
                             <DropdownMenu.Label
@@ -1611,7 +1611,7 @@ function sendMessage(message) {
         <!-- Page wrapper -->
         <div class="flex w-full m-auto h-full overflow-hidden">
           {#if displayedData?.length !== 0}
-            <div class="mt-8 w-full overflow-x-auto overflow-y-auto h-[850px]">
+            <div class="mt-8 w-full overflow-x-auto h-[850px] overflow-hidden">
               <div class="table-container">
                 <div class="table">
                   <VirtualList