From c29d6137747ec2b5cefd71e5a683dcdbd604c740 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 11 Aug 2024 16:04:55 +0200
Subject: [PATCH] bugfixng watchlist

---
 src/lib/components/MiniPlot.svelte            |   4 +-
 src/lib/components/WatchListCard.svelte       |  54 ++++------
 src/routes/+layout.svelte                     |  51 +--------
 src/routes/analysts/+page.svelte              |  44 ++++----
 src/routes/analysts/[slug]/+page.svelte       |  30 +++---
 src/routes/economic-calendar/+page.svelte     |  10 +-
 src/routes/market-mover/+page.svelte          |   6 +-
 src/routes/stock-splits-calendar/+page.svelte | 100 ++++--------------
 src/routes/watchlist/+page.svelte             |  29 ++---
 9 files changed, 97 insertions(+), 231 deletions(-)

diff --git a/src/lib/components/MiniPlot.svelte b/src/lib/components/MiniPlot.svelte
index 1108aa12..771df4e6 100644
--- a/src/lib/components/MiniPlot.svelte
+++ b/src/lib/components/MiniPlot.svelte
@@ -15,11 +15,11 @@
   const bottomLineColor = '#FF7070';
   const bottomFillColor1 = 'rgba(239, 83, 80, 0.2)';
 
-  let width = ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
+  let width = ($screenWidth <= 1200 && $screenWidth > 900) ? 360 : ($screenWidth <= 900 && $screenWidth > 700) ? 260 : ($screenWidth <= 700 && $screenWidth >=600 ) ? 200 : ($screenWidth < 600 && $screenWidth >=500 ) ? 150 : 80;
 
   
   //Initial height of graph
-  let height = 50;
+  let height = $screenWidth < 640 ? 50 : 60;
 
   let observer;
   let ref;
diff --git a/src/lib/components/WatchListCard.svelte b/src/lib/components/WatchListCard.svelte
index e2752b45..8d6feff4 100644
--- a/src/lib/components/WatchListCard.svelte
+++ b/src/lib/components/WatchListCard.svelte
@@ -1,27 +1,14 @@
 <script lang='ts'>
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
-  import { userRegion, switchWatchList, screenWidth } from '$lib/store';
+  import { switchWatchList, screenWidth } from '$lib/store';
   import { formatDate, abbreviateNumber } from '$lib/utils';
   import InfoModal from '$lib/components/InfoModal.svelte';
   
   export let watchListId;
-
-  const usRegion = ['cle1','iad1','pdx1','sfo1'];
-
-let apiURL;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
-
-
-userRegion.subscribe(value => {
-  if (usRegion.includes(value)) {
-    apiURL = import.meta.env.VITE_USEAST_API_URL;
-  } else {
-    apiURL = import.meta.env.VITE_EU_API_URL;
-  }
-});
-
-
+  export let apiKey;
+  export let apiURL;
+  
 
 
 const sortTickersByName = (tickerList) => {
@@ -148,6 +135,7 @@ async function getWatchlistData()
   });
 
 const output = await response.json();
+console.log(output)
 
 try {
   watchList = sortTickersByChange(output[0]);
@@ -340,7 +328,7 @@ if(watchList && isLoaded)
 
 
 
-<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-10 mb-40">
+<section class="w-full overflow-hidden m-auto min-h-screen pt-10 mb-40">
 
 
 
@@ -349,7 +337,7 @@ if(watchList && isLoaded)
       {#if watchList.length !== 0}
 
 
-      <div class="flex flex-row  items-center mb-5">
+      <div class="flex flex-row items-center mb-5">
         <div class="flex flex-row items-center">
           <label for="performanceInfo" class="ml-2 cursor-pointer text-xl font-bold text-gray-300">
             Performance
@@ -405,13 +393,13 @@ if(watchList && isLoaded)
           <!-- head -->
           <thead>
             <tr class="">
-              <th class="text-white hidden sm:table-cell font-medium text-sm ">Symbol</th>
-              <th class="text-white font-medium text-sm ">Company</th>
-              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">EPS</th>
-              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">PE Ratio</th>
-              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">Volume</th>
-              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">Market Cap</th>
-              <th class="text-white font-medium text-end text-sm ">Price</th>
+              <th class="text-white hidden sm:table-cell font-semibold text-[1rem] ">Symbol</th>
+              <th class="text-white font-semibold text-[1rem] ">Company</th>
+              <th class="text-white font-semibold text-center text-[1rem]  {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">EPS</th>
+              <th class="text-white font-semibold text-center text-[1rem]  {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">PE Ratio</th>
+              <th class="text-white font-semibold text-center text-[1rem]  {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">Volume</th>
+              <th class="text-white font-semibold text-center text-[1rem]  {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">Market Cap</th>
+              <th class="text-white font-semibold text-end text-[1rem] ">Price</th>
             </tr>
           </thead>
           <tbody class="p-0">
@@ -420,11 +408,11 @@ if(watchList && isLoaded)
             <tr on:click={() => goto(`/${item?.type === 'stock' ? 'stocks' : item?.type === 'etf' ? 'etf' : 'crypto'}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
               
 
-              <td class="hidden sm:table-cell text-blue-400 text-sm text-start border-b-[#09090B]">
+              <td class="hidden sm:table-cell text-blue-400 text-sm sm:text-[1rem] text-start border-b-[#09090B]">
                 {item?.symbol}
               </td>
 
-              <td class="text-white border-b-[#09090B]">
+              <td class="text-white text-sm sm:text-[1rem] border-b-[#09090B]">
                 <span class="hidden sm:block text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
                 <div class="sm:hidden flex flex-row">
                   <div class="flex flex-col">
@@ -434,27 +422,27 @@ if(watchList && isLoaded)
                 </div>
               </td>
 
-              <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">
+              <td class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">
                 {item?.eps !== null ? item?.eps?.toFixed(2) : '-'}
             </td>
 
-            <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">
+            <td class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">
                 {item?.pe !== null ? item?.pe?.toFixed(2) : '-'}
             </td>
 
-            <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">
+            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">
               {new Intl.NumberFormat("en", {
                 minimumFractionDigits: 2,
                 maximumFractionDigits: 2
             }).format(item?.volume)}
             </td>
 
-            <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">
+            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">
                 {abbreviateNumber(item?.marketCap,true)}
             </td>
 
 
-            <td class="border-b-[#09090B]">
+            <td class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
               <div class="flex flex-row justify-end items-center">
 
                 <div class="flex flex-col mt-3">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 66454f5d..94863306 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -267,59 +267,11 @@ $: {
 
 
 
-{#if !data?.user}
-<header
-  class="sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} inset-x-0 top-0 z-30 mx-auto w-full max-w-screen-md border border-[#202020] py-3 sm:py-4 shadow-lg sm:backdrop-blur-sm bg-[#202020] sm:bg-opacity-80 md:top-3 md:rounded-2xl lg:max-w-screen-lg">
-  <div class="px-4">
-      <div class="flex items-center justify-between">
-          <div class="flex shrink-0">
-              <a href="/" class="flex-shrink-0 flex flex-row items-center {!data?.user ? 'ml-4' : 'ml-2'}">
-                <img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"}
-                  alt="stocknear logo" loading="lazy" />
-                <div class="flex justify-center items-center text-lg sm:text-xl font-medium mr-auto ml-2">
-                    <span class="self-center text-gray-200 font-semibold whitespace-nowrap">Stocknear</span>
-                </div>
-              </a>
-          </div>
-          <div class="hidden md:flex md:items-center md:justify-center md:gap-5">
-            <a aria-current="page"
-                  class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-white transition-all duration-200 hover:bg-purple-600"
-                  href="/">Home</a>
-              <a aria-current="page"
-                  class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-white transition-all duration-200 hover:bg-purple-600"
-                  href="/about">About Us</a>
-              <a class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-white transition-all duration-200 hover:bg-purple-600"
-                  href="/pricing">Pricing</a>
-          </div>
-          <div class="flex items-center justify-end gap-3">
-              <a class="items-center justify-center rounded-xl bg-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition-all duration-150 hover:bg-white sm:inline-flex"
-                  href="/register">Start Trial</a>
-              <a class="inline-flex items-center justify-center rounded-xl bg-purple-600 px-3 py-2 text-sm font-semibold text-white  shadow-sm transition-all duration-150 hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
-                  href="/login">Login</a>
-          </div>
-      </div>
-  </div>
-</header>
-
-<main class="w-full">
-  <slot />
-  <Toaster class="bg-[#1A1A27] text-white text-medium"/>
-  {#if Cookie && $showCookieConsent === true}
-  <Cookie />
-  {/if}
-
-
-  {#if !hideFooter}
-  <Footer/>
-  {/if}
-</main>
-
-{:else }
 
 <div class="flex min-h-screen w-full flex-col bg-[#09090B]">
 
   <Splitpanes class="w-full" theme="no-splitter" horizontal dblClickSplitter={false}>
-    <Pane class="w-full navbar sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6" size={6} minSize={10} maxSize={6}>
+    <Pane size={6} minSize={10} maxSize={6} class="w-full navbar sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
         
           <Sheet.Root>
             <Sheet.Trigger asChild let:builder>
@@ -1005,7 +957,6 @@ $: {
 
 </div>
 
-{/if}
 </div>
 
 
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 93abae9c..a2e68b11 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -65,22 +65,22 @@ $: {
     
 
 
-<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-60">
+<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
       
-  <div class="text-sm breadcrumbs ml-4">
+  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li> 
       <li class="text-gray-300">Analysts</li>
     </ul>
   </div>
           
-  <div class="w-full max-w-4xl overflow-hidden m-auto mt-5">
+  <div class="w-full overflow-hidden m-auto mt-5">
     
-    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden max-w-4xl">
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
         <div class="relative flex justify-center items-center overflow-hidden w-full">
             <main class="w-full">
              
-              <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+              <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
               
                   <!-- Start Column -->
@@ -136,27 +136,27 @@ $: {
                     <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                       <thead>
                         <tr class="bg-[#09090B]">
-                          <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
+                          <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                             #
                           </th>
-                          <th class="text-start bg-[#09090B] text-white text-sm font-semibold">
+                          <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
                             Analyst
                           </th>
 
               
-                          <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
+                          <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                             Success Rate
                           </th>
-                          <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
+                          <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                             Average Return
                           </th>
-                          <th class="text-white font-semibold text-end text-sm">
+                          <th class="text-white font-semibold text-end text-[1rem]">
                             Total Ratings
                           </th>
-                          <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
+                          <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                             Main Sector
                           </th>
-                          <th class="text-white font-semibold  text-end text-sm">
+                          <th class="text-white font-semibold  text-end text-[1rem]">
                             Last Rating
                           </th>
                          
@@ -170,10 +170,10 @@ $: {
                             {item?.rank}
                           </td>
 
-                          <td class="text-sm text-start">
-                            <div class="flex flex-col items-star w-32">
-                              <span class="text-blue-400 text-sm font-medium">{item?.analystName} </span>
-                              <span class="text-white text-xs">{item?.companyName} </span>
+                          <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap">
+                            <div class="flex flex-col items-start">
+                              <span class="text-blue-400 font-medium">{item?.analystName} </span>
+                              <span class="text-white ">{item?.companyName} </span>
                                   <div class="flex flex-row items-center mt-1">
                                     {#each Array.from({ length: 5 }) as _, i}
                                     {#if i < Math.floor(item?.analystScore)}
@@ -187,7 +187,7 @@ $: {
                                           {/if}
                                       {/each}
                                 
-                                      <span class="ml-1 text-sm text-gray-400">
+                                      <span class="ml-1 text-gray-400">
                                           ({item?.analystScore !== null ? item?.analystScore : 0})
                                       </span>
                                   
@@ -198,13 +198,13 @@ $: {
 
                        
         
-                         <td class="text-end text-sm font-semibold text-white">
+                         <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white">
                             {#if Number(item?.successRate) >= 0}
                             <span class="text-[#37C97D]">{Number(item?.successRate)?.toFixed(2)}%</span>
                             {/if}
                           </td>
 
-                            <td class="text-end text-sm font-semibold text-white">
+                            <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white">
                               {#if Number(item?.avgReturn) >= 0}
                                 <span class="text-[#37C97D]">{Number(item?.avgReturn)?.toFixed(2)}%</span>
                               {:else}
@@ -212,16 +212,16 @@ $: {
                               {/if}
                             </td>
 
-                            <td class="text-end font-semibold text-white text-sm">
+                            <td class="text-end font-semibold text-white text-sm sm:text-[1rem] whitespace-nowrap">
                               {item?.totalRatings}
                             </td>
 
                           
-                            <td class="text-white text-sm text-white text-end">
+                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-end">
                               {item?.mainSectors?.at(0)}
                             </td>
 
-                            <td class="text-end text-sm whitespace-nowrap text-white">
+                            <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap  text-white">
                               {item?.lastRating !== null ? new Date(item?.lastRating)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                             </td>
                             
diff --git a/src/routes/analysts/[slug]/+page.svelte b/src/routes/analysts/[slug]/+page.svelte
index aecbb50e..1e03422b 100644
--- a/src/routes/analysts/[slug]/+page.svelte
+++ b/src/routes/analysts/[slug]/+page.svelte
@@ -122,9 +122,9 @@ function sectorSelector(sector) {
 
 
 
-  <section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-60">
+<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
 
-    <div class="text-sm breadcrumbs ml-4">
+    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
       <ul>
         <li><a href="/" class="text-gray-300">Home</a></li> 
         <li><a href="/analysts" class="text-gray-300">Analysts</a></li> 
@@ -133,9 +133,9 @@ function sectorSelector(sector) {
     </div>
             
             
-    <div class="w-full max-w-4xl overflow-hidden m-auto ">
+    <div class="w-full overflow-hidden m-auto ">
       
-      <div class="p-0 flex justify-center w-full m-auto overflow-hidden max-w-4xl">
+      <div class="p-0 flex justify-center w-full m-auto overflow-hidden">
           <div class="relative flex justify-center items-center overflow-hidden w-full">
               <main class="w-full">
               
@@ -231,17 +231,17 @@ function sectorSelector(sector) {
                         <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                           <thead>
                             <tr class="bg-[#09090B]">
-                              <th class="text-start bg-[#09090B] text-gray-200 text-sm font-bold">
+                              <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
                                 Stock
                               </th>
-                              <th class="text-start bg-[#09090B] text-white text-sm font-bold">
+                              <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
                                 Action
                               </th>
     
-                              <th class="text-end bg-[#09090B] text-white text-sm font-bold">
+                              <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                                 Price Target
                               </th>
-                              <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">
+                              <th class="text-white font-semibold text-end text-[1rem]">
                                 Date
                               </th>
                             </tr>
@@ -251,25 +251,25 @@ function sectorSelector(sector) {
     
                             <tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
     
-                              <td class="text-sm text-start whitespace-nowrap">
+                              <td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
                                 <div class="flex flex-col items-start ">
                                   <span class="text-blue-400 text-sm">{item?.ticker} </span>
-                                  <span class="text-white/80 text-xs ">{item?.name} </span>
+                                  <span class="text-white">{item?.name} </span>
                               </div>
                                   
                               </td>
                             
     
-                              <td class="text-sm text-start whitespace-nowrap">
+                              <td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
                                 <div class="flex flex-col sm:flex-row items-start">
-                                  <span class="text-sm font-medium text-white mr-1">{item?.action_company}:</span>
-                                  <span class="text-xs sm:text-sm font-medium {['Strong Buy', 'Buy']?.includes(item?.rating_current) ? 'text-[#10DB06]' : item?.rating_current === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(item?.rating_current) ? 'text-[#FF2F1F]' : 'text-gray-300'}"> 
+                                  <span class="font-medium text-white mr-1">{item?.action_company}:</span>
+                                  <span class="font-medium {['Strong Buy', 'Buy']?.includes(item?.rating_current) ? 'text-[#10DB06]' : item?.rating_current === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(item?.rating_current) ? 'text-[#FF2F1F]' : 'text-gray-300'}"> 
                                     {item?.rating_current}
                                   </span>
                                 </div>
                               </td>
     
-                              <td class="text-white text-sm whitespace-nowrap">
+                              <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap">
                                   <div class="flex flex-row items-center justify-end">
                                       {#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
                                       <span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span>
@@ -281,7 +281,7 @@ function sectorSelector(sector) {
                                   </div>
                             </td>
 
-                            <td class="text-white text-end font-medium text-sm whitespace-nowrap">
+                            <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                               {new Date(item?.date).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                             </td>
                                 
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index 9642685e..3e86cd52 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -119,11 +119,11 @@
       
       
       
-<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
+  <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
         
       
 
-          <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-10 sm:mt-3 mb-8">
+          <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-10 sm:mt-3 mb-8">
             <div class="grid grid-cols-1 sm:grid-cols-2">
           
               <!-- Start Column -->
@@ -171,11 +171,9 @@
           </div>
           
             <!-- Page wrapper -->
-            <div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
+            <div class="flex justify-center w-full m-auto h-full overflow-hidden">
         
-                
-              
-      
+    
                 <!-- Content area -->
                 <div class="relative flex flex-col flex-1 overflow-hidden">
       
diff --git a/src/routes/market-mover/+page.svelte b/src/routes/market-mover/+page.svelte
index 7e534151..c0a6d6d5 100644
--- a/src/routes/market-mover/+page.svelte
+++ b/src/routes/market-mover/+page.svelte
@@ -255,7 +255,7 @@ $: {
 
 </svelte:head>
   
-<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-2 pb-40 bg-[#09090B]">
+<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
     
 <!--
   <div class="text-sm breadcrumbs ml-4">
@@ -269,7 +269,7 @@ $: {
 -->
 
 
-  <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
+  <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
@@ -318,7 +318,7 @@ $: {
   </div>
 
   <div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-center items-center p-3 sm:p-0">
-    <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 ">
+    <div class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
     <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
     <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
     <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
diff --git a/src/routes/stock-splits-calendar/+page.svelte b/src/routes/stock-splits-calendar/+page.svelte
index 60e0fb1f..06b0c956 100644
--- a/src/routes/stock-splits-calendar/+page.svelte
+++ b/src/routes/stock-splits-calendar/+page.svelte
@@ -265,18 +265,17 @@
       
       
       
-<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-4 pb-40">
-  <!--
-  <div class="text-sm breadcrumbs ml-4">
+<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
+  
+  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li> 
       <li class="text-gray-300">Stock Splits Calendar</li>
     </ul>
   </div>
-  -->
-
+  
       
-          <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pt-10 sm:pb-10 sm:mt-3 mb-8">
+          <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pt-10 sm:pb-10 sm:mt-3 mb-8">
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
           
               <!-- Start Column -->
@@ -324,7 +323,7 @@
           </div>
           
             <!-- Page wrapper -->
-            <div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
+            <div class="flex justify-center w-full m-auto h-full overflow-hidden">
         
                 
               
@@ -366,14 +365,15 @@
                 {#each weekday as day,index}
                   {#if index === selectedWeekday}
                     {#if day?.length !== 0}
-                      <table class="hidden sm:inline-table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
+                    <div class="w-full overflow-x-scroll">
+                      <table class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
                           <thead>
                             <tr>
-                              <th class="text-slate-200 font-medium text-sm text-start">Symbol</th>
-                              <th class="text-slate-200 font-medium text-sm text-start">Company Name</th>
-                              <th class="text-slate-200 font-medium hidden sm:table-cell text-sm text-start">Earnings per Share</th>
-                              <th class="text-slate-200 font-medium text-sm text-start">Market Cap</th>
-                              <th class="text-slate-200 font-medium text-sm text-end">Split</th>
+                              <th class="text-slate-200 font-semibold text-[1rem] text-start">Symbol</th>
+                              <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Company Name</th>
+                              <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Earnings per Share</th>
+                              <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-start">Market Cap</th>
+                              <th class="text-slate-200 font-semibold whitespace-nowrap text-[1rem] text-end">Split</th>
                             </tr>
                           </thead>
                           <tbody>
@@ -381,23 +381,23 @@
                             <!-- row -->
                             <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
                               
-                              <td class="text-blue-400 border-b-[#09090B]">
+                              <td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
                                 {item?.symbol}
                               </td>
 
-                              <td class="text-white border-b-[#09090B]">
+                              <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
                                   {item?.name?.length > 40 ? item?.name?.slice(0,40) + "..." : item?.name}
                               </td>
           
-                            <td class="text-white font-medium hidden sm:table-cell border-b-[#09090B]">
+                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
                                 {item?.eps !== null ? item?.eps : '-'}
                             </td>
 
-                            <td class="text-white font-medium border-b-[#09090B]">
+                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
                                 {item?.marketCap !== null ? '$' + abbreviateNumber(item?.marketCap) : '-'}
                             </td>
 
-                            <td class="text-white font-medium text-sm text-end mr-1 border-b-[#09090B]">
+                            <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end mr-1 border-b-[#09090B]">
                                 <span class="">From {item?.denominator} to {item?.numerator}</span>
                             </td>
               
@@ -410,70 +410,8 @@
                             {/each}
                           </tbody>
                         </table>
+                      </div>
 
-
-                        <div class="relative p-2 sm:hidden pt-5">
-                          {#each day as item}
-                            <div class="bg-[#09090B] rounded-lg border border-slate-800 h-auto pb-3 pl-2 pr-2 pt-4 mb-7">
-                                <div class="flex flex-row items-center">
-                                  <div class="rounded-full w-10 h-10 relative bg-[#101112] flex items-center justify-center">
-                                    <img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy"/>
-                                  </div>
-                                  <label on:click={() => goto("/stocks/"+item?.symbol)} class="cursor-pointer flex flex-col ml-3 w-40">
-                                    <span class="text-blue-400 text-sm">{item?.symbol}</span>
-                                    <span class="text-white text-sm">{item?.name}</span>
-                                  </label>
-    
-                                  <div class="flex flex-col justify-end items-end ml-auto">
-                                    <span class="font-medium text-slate-300 text-ends">Split</span>
-                                    <span class="text-white text-md text-end">
-                                      From {item?.denominator} to {item?.numerator}
-                                    </span>
-                                  </div>
-                                </div>
-                                <div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
-    
-                                <div class="flex flex-row items-center">
-                                  <div class="flex flex-col ml-3 w-40">
-                                    <span class="font-medium text-slate-300">Market Cap</span>
-                                    <span class="text-white text-md">
-                                      {item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
-                                    </span>
-                                  </div>
-    
-                                  <div class="flex flex-col justify-end items-end ml-auto">
-                                    <span class="font-medium text-slate-300 text-end">EPS</span>
-                                    <span class="text-white text-md text-end">
-                                      {item?.eps !== null ? item?.eps : '-'}
-                                    </span>
-                                  </div>
-                                </div>
-    
-                                <div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
-    
-    
-                                <div class="flex flex-row items-center">
-                                  <div class="flex flex-col ml-3 w-40">
-                                    <span class="font-medium text-slate-300">Revenue</span>
-                                    <span class="text-white text-md">
-                                      {item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
-                                    </span>
-                                  </div>
-    
-                                  <div class="flex flex-col justify-end items-end ml-auto">
-                                    <span class="font-medium text-slate-300 text-ends">Profit</span>
-                                    <span class="text-white text-md text-end">
-                                      {item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
-                                    </span>
-                                  </div>
-                                </div>
-    
-    
-                            </div>
-                          {/each}
-                          <ScrollToTop />
-                        </div>
-                    
     
                         {:else}
                         <h2 class="mt-20 flex justify-center items-center text-xl sm:text-2xl font-bold text-slate-700 mb-5 m-auto">
diff --git a/src/routes/watchlist/+page.svelte b/src/routes/watchlist/+page.svelte
index 9bd5b37e..5cd0bde9 100644
--- a/src/routes/watchlist/+page.svelte
+++ b/src/routes/watchlist/+page.svelte
@@ -7,23 +7,12 @@ import { Drawer } from "vaul-svelte";
 
 import Input from '$lib/components/Input.svelte';
 import WatchListCard from '$lib/components/WatchListCard.svelte';
-import { userRegion, screenWidth, switchWatchList } from '$lib/store';
+import {screenWidth, switchWatchList } from '$lib/store';
 import MiniPlot from '$lib/components/MiniPlot.svelte';
 
 let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
 
-const usRegion = ['cle1','iad1','pdx1','sfo1'];
-
-let fastifyURL;
-
-userRegion.subscribe(value => {
-  if (usRegion.includes(value)) {
-    fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
-  } else {
-    fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
-  }
-});
 
 export let data;
 
@@ -122,7 +111,7 @@ async function createWatchList(event) {
   }
 
   try {
-    const response = await fetch(fastifyURL + '/create-watchlist', {
+    const response = await fetch(data?.fastifyURL + '/create-watchlist', {
       method: 'POST',
       headers: {
         "Content-Type": "application/json"
@@ -188,7 +177,7 @@ async function editNameWatchList(event) {
   }
 
   try {
-    const response = await fetch(fastifyURL + '/edit-name-watchlist', {
+    const response = await fetch(data?.fastifyURL + '/edit-name-watchlist', {
       method: 'POST',
       headers: {
         "Content-Type": "application/json"
@@ -249,7 +238,7 @@ async function deleteWatchList(event) {
 
   try {
     
-    const response = await fetch(fastifyURL + '/delete-watchlist', {
+    const response = await fetch(data?.fastifyURL + '/delete-watchlist', {
       method: 'POST',
       headers: {
         "Content-Type": "application/json"
@@ -296,7 +285,7 @@ async function deleteWatchList(event) {
 async function getAllListData()
 {
     const postData = {'userId': data?.user?.id}
-    const response = await fetch(fastifyURL+'/all-watchlists', {
+    const response = await fetch(data?.fastifyURL+'/all-watchlists', {
     method: 'POST',
     headers: {
     "Content-Type": "application/json"
@@ -376,7 +365,7 @@ onDestroy( () => {
         
     
     
-<div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
+<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
     
      
   <div  class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
@@ -424,7 +413,7 @@ onDestroy( () => {
     {#if isLoaded}
 
     <div class="w-full -mt-6 mb-8 m-auto flex justify-center items-center p-3">
-      <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-0 gap-x-3 ">
+      <div class="w-full grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
       <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
       <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
       <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
@@ -500,6 +489,8 @@ onDestroy( () => {
 
         <WatchListCard
           watchListId={displayWatchList?.id}
+          apiURL = {data?.apiURL}
+          apiKey = {data?.apiKey}
         />
         
         
@@ -515,7 +506,7 @@ onDestroy( () => {
 
     {/if}
     
-    </div>
+</section>