ui fix

src/routes/market-flow/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { numberOfUnreadNotification, screenWidth } from "$lib/store";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import {
@@ -472,7 +474,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-40 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -486,7 +488,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full">
+        <main class="w-full lg:w-3/4 lg:pr-5">
           <div class="mb-6 border-b-[2px]">
             <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
               Market Flow
@@ -534,7 +536,7 @@
                 </div>
               </div>
             {/if}
-            <div class="mb-3 mt-8">
+            <div class="mb-3 mt-10">
               <div class="flex flex-row items-center">
                 <label
                   for="sectorFlowInfo"
@@ -893,6 +895,66 @@
             </div>
           {/if}
         </main>
+        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href="/pricing"
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Pro Subscription
+                  </h2>
+                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Upgrade now for unlimited access to all data and tools.
+                </span>
+              </a>
+            </div>
+          {/if}
+
+          <div
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+          >
+            <a
+              href="/list/highest-open-interest-change"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
+              <div class="w-full flex justify-between items-center p-3 mt-3">
+                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  Highest OI Change
+                </h2>
+                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+              </div>
+              <span class="text-white p-3 ml-3 mr-3">
+                Stocks with the highest changes in open interest (OI).
+              </span>
+            </a>
+          </div>
+
+          <div
+            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary sm:hover:bg-secondary transition ease-out duration-100"
+          >
+            <a
+              href="/dark-pool-flow"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
+              <div class="w-full flex justify-between items-center p-3 mt-3">
+                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  Dark Pool Flow
+                </h2>
+                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
+              </div>
+              <span class="text-white p-3 ml-3 mr-3">
+                Follow the dark pool feed in realtime
+              </span>
+            </a>
+          </div>
+        </aside>
       </div>
     </div>
   </div>

src/routes/stocks/[tickerID]/+page.svelte

@@ -1100,7 +1100,7 @@
               class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
             >
               <table
-                class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px] xl:min-w-[300px]"
+                class="w-[50%] text-sm text-white sm:text-[1rem] lg:min-w-[250px] 2xl:min-w-[300px]"
               >
                 <tbody
                   ><tr
@@ -1219,7 +1219,7 @@
                 </tbody>
               </table>
               <table
-                class="w-[50%] text-sm text-white lg:min-w-[250px] xl:min-w-[300px]"
+                class="w-[50%] text-sm text-white lg:min-w-[250px] 2xl:min-w-[300px]"
               >
                 <tbody
                   ><tr