From ae1f00a82ebe5d4dcffc4a59aac466d6bf7595d7 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 11 Aug 2024 16:29:26 +0200
Subject: [PATCH] ui fixes

---
 src/routes/community/profile/+page.svelte     |  6 +--
 .../community/user/[userId]/+page.svelte      | 20 +++++-----
 src/routes/etf/+page.svelte                   | 22 +++++------
 src/routes/etf/etf-providers/+layout.svelte   | 11 +++---
 src/routes/etf/etf-providers/+page.svelte     | 28 +++++++-------
 .../etf/etf-providers/[slug]/+page.svelte     | 38 ++++++++-----------
 src/routes/etf/new-launches/+page.svelte      | 31 +++++++--------
 src/routes/market-mover/+page.svelte          |  6 +--
 src/routes/market-news/+layout.svelte         |  6 +--
 src/routes/most-shorted-stocks/+page.svelte   | 38 +++++++++----------
 10 files changed, 100 insertions(+), 106 deletions(-)

diff --git a/src/routes/community/profile/+page.svelte b/src/routes/community/profile/+page.svelte
index acf95cb0..8af345f6 100644
--- a/src/routes/community/profile/+page.svelte
+++ b/src/routes/community/profile/+page.svelte
@@ -562,10 +562,10 @@ onDestroy(async () => {
       <main class="grow">
         
 
-         
+
           <!-- Page content -->
           <section>
-              <div class="w-full max-w-6xl m-auto sm:px-20 ml-auto ">
+              <div class="w-full max-w-7xl m-auto sm:px-20 ml-auto ">
 
 
             <div class="w-full flex flex-row">
@@ -619,7 +619,7 @@ onDestroy(async () => {
             </div>
 
                       <!-- Sidebar -->
-            <aside class="hidden lg:inline-block h-sh lg:w-1/2 lg:pr-2 xl:pr-0">
+            <aside class="hidden lg:inline-block h-sh lg:w-1/3 lg:pr-2 xl:pr-0">
               <div class="lg:pl-5 z-20 h-full">
             
                     <!-- Sidebar content -->
diff --git a/src/routes/community/user/[userId]/+page.svelte b/src/routes/community/user/[userId]/+page.svelte
index 97cdc7db..4eed00a6 100644
--- a/src/routes/community/user/[userId]/+page.svelte
+++ b/src/routes/community/user/[userId]/+page.svelte
@@ -244,12 +244,12 @@ onMount(async () => {
            
             <!-- Page content -->
             <section>
-                <div class="w-full max-w-6xl m-auto sm:px-20 ml-auto ">
+                <div class="w-full max-w-7xl m-auto sm:px-20 ml-auto ">
   
   
               <div class="w-full flex flex-row">
               <!--Start Profile Pic-->
-              <div class="flex items-center justify-start mb-5 w-screen sm:w-full bg-[#09090B] h-48 sm:rounded-xl border border-gray-700 sm:hover:border-gray-600">
+              <div class="flex items-center justify-start mb-5 w-screen sm:w-full bg-[#141417] h-48 sm:rounded-xl border border-gray-700 sm:hover:border-gray-600">
                   <label class="ml-5 avatar w-20 h-20 sm:w-24 sm:h-24 rounded-full hover:cursor-pointer">
                       <img style="clip-path: circle(50%);" class="w-24 bg-slate-300 border border-slate-400 rounded-full inline-block "
                       src={userData?.avatar
@@ -284,14 +284,14 @@ onMount(async () => {
               </div>
   
                         <!-- Sidebar -->
-                        <aside class="hidden lg:inline-block h-sh lg:w-1/2 lg:pr-2 xl:pr-0">
+                        <aside class="hidden lg:inline-block h-sh lg:w-1/3 lg:pr-2 xl:pr-0">
                           <div class="lg:pl-5 z-20 h-full">
                         
                                 <!-- Sidebar content -->
             
                                   <!--Start User Profile -->
                                   <div class="space-y-6 ml-4">  
-                                  <div class="rounded-xl bg-[#09090B] h-48 w-full border border-gray-700 font-mono">
+                                  <div class="rounded-xl bg-[#141417] h-48 w-full border border-gray-700 font-mono">
                                     <!--Start Header-->
                                     <div class="ml-2 w-full p-3">
                                         <span class="text-white text-lg font-medium ml-0.5">User Profile</span>
@@ -301,17 +301,17 @@ onMount(async () => {
                                     <!--Start Content-->
                                     <div class="w-full p-2">
             
-                                      <table class="font-semibold table table-compact bg-[#09090B] text-start flex justify-start items-center w-full px-3 m-auto">
-                                        <tbody class="bg-[#09090B]">
+                                      <table class="font-semibold table table-compact bg-[#141417] text-start flex justify-start items-center w-full px-3 m-auto">
+                                        <tbody class="bg-[#141417]">
                                           <!-- row 1 -->
                                           <tr class="text-gray-300">
-                                            <td class="bg-[#09090B] border-b border-[#27272A]">Karma: {userData?.karma}</td>
+                                            <td class="bg-[#141417] border-b border-[#27272A]">Karma: {userData?.karma}</td>
                                             <td class="bg-[#27272A border-b border-[#27272A]">Posts: {userStats?.numberOfPosts}</td>
                                           </tr>
                                           <!-- row 2 -->
                                           <tr class="text-gray-300">
-                                            <td class="bg-[#09090B]">Comments: {userStats?.numberOfComments}</td>
-                                            <td class="bg-[#09090B]"></td>
+                                            <td class="bg-[#141417]">Comments: {userStats?.numberOfComments}</td>
+                                            <td class="bg-[#141417]"></td>
                                           </tr>
                                         </tbody>
                                       </table>
@@ -320,7 +320,7 @@ onMount(async () => {
             
                                 {#if userData?.tier === 'Pro'}
                                 <!--Start Badge-->
-                                  <div class="rounded-xl bg-[#09090B] h-48 w-full border border-gray-700 mt-14">
+                                  <div class="rounded-xl bg-[#141417] h-48 w-full border border-gray-700 mt-14">
                                     <!--Start Header-->
                                     <div class="ml-2 w-full p-3">
                                         <span class="text-white text-lg font-medium ml-0.5 ">Badge</span>
diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index 06f471a7..1977af93 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -74,17 +74,17 @@ $: {
 
 </svelte:head>
           
-        <section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
-            <!--
-            <div class="text-sm breadcrumbs ml-4">
-                <ul>
-                  <li><a href="/" class="text-gray-300">Home</a></li> 
-                  <li><a class="text-gray-300">All ETF Symbols</a></li> 
-                </ul>
-            </div>
-          -->
+<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><a class="text-gray-300">All ETF Symbols</a></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: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 -->
@@ -140,7 +140,7 @@ $: {
         
     
         
-        <div class="w-full max-w-4xl mt-10 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
+        <div class="w-full mt-10 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
         
         
             <!--Start Top Winners/Losers-->
diff --git a/src/routes/etf/etf-providers/+layout.svelte b/src/routes/etf/etf-providers/+layout.svelte
index 18351752..286a7248 100644
--- a/src/routes/etf/etf-providers/+layout.svelte
+++ b/src/routes/etf/etf-providers/+layout.svelte
@@ -44,9 +44,9 @@
     
     
           
-<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="text-sm breadcrumbs mb-2 ml-4">
+    <div class="text-sm sm:text-[1rem] breadcrumbs mb-2 ml-4">
         <ul>
             <li><a href="/" class="text-gray-300">Home</a></li> 
             <li><a href="/etf/etf-providers" class="text-gray-300">ETF Providers</a></li> 
@@ -58,7 +58,7 @@
 
 
 
-<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 -->
@@ -105,11 +105,10 @@
 
 
 
-<div class="w-full max-w-4xl m-auto mb-10 bg-[#09090B] overflow-hidden">
+<div class="w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
 
 
-    <!--Start Top Winners/Losers-->
-    <div class="flex flex-col justify-center items-center">
+    <div class="w-full flex flex-col justify-center items-center">
         
 
         <slot />
diff --git a/src/routes/etf/etf-providers/+page.svelte b/src/routes/etf/etf-providers/+page.svelte
index aed44575..b308f636 100644
--- a/src/routes/etf/etf-providers/+page.svelte
+++ b/src/routes/etf/etf-providers/+page.svelte
@@ -36,10 +36,10 @@ let etfProviderList = data?.getAllETFProviders;
   
 
 
-    <section class="w-full max-w-4xl overflow-hidden m-auto">
+    <section class="w-full overflow-hidden m-auto">
             
           
-        <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
+        <div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
           <svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
           
           Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is a list of companies offering actively traded ETFs on the U.S. stock market.
@@ -47,23 +47,23 @@ let etfProviderList = data?.getAllETFProviders;
         </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">
+              <div class="w-full overflow-x-scroll">
       
     
            
                 <table class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
                     <thead>
                       <tr class="border border-slate-800">
-                        <th class="text-slate-200 font-semibold text-[0.95rem]">Provider Name</th>
-                        <th class="text-slate-200 font-semibold text-center text-[0.95rem]">Total Assets</th>
-                        <th class="text-slate-200 font-semibold text-[0.95rem] text-end">Funds</th>
-                        <th class="text-slate-200 font-semibold hidden sm:table-cell text-[0.95rem] text-end">Avg. Cost</th>
-                        <th class="text-slate-200 font-semibold hidden sm:table-cell text-[0.95rem] text-end">Avg. Holdings</th>
+                        <th class="text-slate-200 font-semibold text-[1rem]">Provider Name</th>
+                        <th class="text-slate-200 font-semibold text-center text-[1rem]">Total Assets</th>
+                        <th class="text-slate-200 font-semibold text-[1rem] text-end">Funds</th>
+                        <th class="text-slate-200 font-semibold text-[1rem] text-end">Avg. Cost</th>
+                        <th class="text-slate-200 font-semibold text-[1rem] text-end">Avg. Holdings</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -72,24 +72,24 @@ let etfProviderList = data?.getAllETFProviders;
                       <tr on:click={() => goto("/etf/etf-providers/"+item?.etfProvider)} 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 font-medium border-b-[#09090B]">
+                        <td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
                             {formatETFName(item?.etfProvider)}
                         </td>
     
-                        <td class="text-white font-medium  border-b-[#09090B] text-end sm:text-center">
+                        <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end sm:text-center">
                             {abbreviateNumber(item?.totalAssets, true)}
                         </td>
       
-                        <td class="text-white font-medium text-end border-b-[#09090B]">
+                        <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
                             {item?.funds}
                         </td>
                 
       
-                        <td class="text-white font-medium text-end hidden sm:table-cell border-b-[#09090B]">
+                        <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
                             {item?.avgExpenseRatio}%
                         </td>
 
-                        <td class="text-white font-medium text-end hidden sm:table-cell border-b-[#09090B]">
+                        <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
                             {item?.avgHoldings}
                         </td>
       
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index 312d3bb7..33c31ddb 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -71,11 +71,11 @@
 </svelte:head>
 
 
-<section class="w-full max-w-4xl overflow-hidden m-auto">
+<section class="w-full overflow-hidden m-auto">
                 
 
             {#if rawData?.length !== 0}
-            <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
+            <div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
               <svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
               
               {etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(totalAssets,true)} 
@@ -107,18 +107,18 @@
             {#if rawData?.length !== 0}
         
               <!-- 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 pt-5">
+                  <div class="w-full overflow-x-scroll pt-5">
           
-                    <table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
+                    <table class="table table-sm  table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
                         <thead>
                           <tr class="border border-slate-800">
-                            <th class="text-slate-200 sm:font-semibold hidden sm:table-cell text-sm sm:text-[0.95rem]">Symbol</th>
-                            <th class="text-slate-200 sm:font-semibold text-sm sm:text-[0.95rem]">Fund Name</th>
-                            <th class="text-slate-200 sm:font-semibold text-center text-sm sm:text-[0.95rem]">Total Assets</th>
-                            <th class="text-slate-200 sm:font-semibold  text-sm sm:text-[0.95rem] text-end">Holdings</th>
-                            <th class="text-slate-200 sm:font-semibold hidden sm:table-cell text-sm sm:text-[0.95rem] text-end">Expense Ratio</th>
+                            <th class="text-white font-semibold  text-[1rem]">Symbol</th>
+                            <th class="text-white font-semibold text-[1rem]">Fund Name</th>
+                            <th class="text-white font-semibold text-center text-[1rem]">Total Assets</th>
+                            <th class="text-white font-semibold  text-[1rem] text-end">Holdings</th>
+                            <th class="text-white font-semibold text-[1rem] text-end">Expense Ratio</th>
                           </tr>
                         </thead>
                         <tbody>
@@ -126,30 +126,24 @@
                           <!-- row -->
                           <tr on:click={() => goto("/etf/"+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="hidden sm:table-cell text-blue-400 font-medium  border-b-[#09090B]">
+                            <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
                               {item?.symbol}
                             </td>
     
-                            <td class="text-gray-200 border-b-[#09090B]">
-                              <span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
-                              <div class="sm:hidden flex flex-row">
-                                <div class="flex flex-col">
-                                  <span class="text-blue-400 font-medium">{item?.symbol}</span>
-                                  <span class="text-gray-200 text-xs sm:text-md font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
-                                </div>
-                              </div>
+                            <td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
+                              {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
                             </td>
         
-                            <td class="text-white font-medium  border-b-[#09090B] text-end sm:text-center">
+                            <td class="text-white font-medium  border-b-[#09090B] text-end sm:text-center text-sm sm:text-[1rem] whitespace-nowrap">
                                 {abbreviateNumber(item?.totalAssets, true)}
                             </td>
           
-                            <td class="text-white font-medium text-end  border-b-[#09090B]">
+                            <td class="text-white font-medium text-end  border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
                                 {item?.numberOfHoldings}
                             </td>
                     
           
-                            <td class="text-white font-medium text-end hidden sm:table-cell border-b-[#09090B]">
+                            <td class="text-white font-medium text-end border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
                                 {item?.expenseRatio}%
                             </td>
     
diff --git a/src/routes/etf/new-launches/+page.svelte b/src/routes/etf/new-launches/+page.svelte
index d523a7c4..78f23a43 100644
--- a/src/routes/etf/new-launches/+page.svelte
+++ b/src/routes/etf/new-launches/+page.svelte
@@ -46,16 +46,16 @@ $: {
 <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
               
-<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="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 class="text-gray-300">New Launches of ETFs</a></li> 
         </ul>
     </div>
 
-  <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
+  <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
@@ -111,7 +111,7 @@ $: {
 
 
 
-<div class="w-full max-w-4xl mt-5 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
+<div class="w-full mt-5 m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
 
 
     <!--Start Top Winners/Losers-->
@@ -125,40 +125,40 @@ $: {
 
       <div class="border-b mt-2 border-gray-800 w-full mb-4" />
 
-
+    <div class="w-full overflow-x-scroll">
     <table class="mt-5 table table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden">
       <thead>
         <tr>
-          <th class="text-white font-medium text-[0.95rem]">Inception</th>
-          <th class="text-white font-medium text-[0.95rem]">Symbol</th>
-          <th class="text-white font-medium text-[0.95rem] hidden sm:table-cell">Fund Name</th>
-          <th class="text-white font-medium text-end text-[0.95rem] hidden sm:table-cell">Holdings</th>
-          <th class="text-white font-medium text-end text-[0.95rem] ">Total Assets</th>
+          <th class="text-white font-semibold text-[1rem]">Inception</th>
+          <th class="text-white font-semibold text-[1rem]">Symbol</th>
+          <th class="text-white font-semibold text-[1rem] ">Fund Name</th>
+          <th class="text-white font-semibold text-end text-[1rem] ">Holdings</th>
+          <th class="text-white font-semibold text-end text-[1rem] ">Total Assets</th>
         </tr>
       </thead>
       <tbody>
         {#each etfData as item,index}
         <tr on:click={() => goto("/etf/"+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-white font-medium border-b-[#09090B]">
+          <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
             {new Date(item?.inceptionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
           </td>
         
           
-        <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 font-medium border-b-[#09090B] hidden sm:table-cell">
+        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] ">
           {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + '...' : item?.name}
         </td>
 
 
 
-        <td class="text-white font-medium border-b-[#09090B] text-end hidden sm:table-cell">
+        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end ">
             {item?.numberOfHoldings}
         </td>
 
-        <td class="text-white font-medium border-b-[#09090B] text-end">
+        <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end">
             {(item?.totalAssets !== 0 && item?.totalAssets !== null) ? abbreviateNumber(item?.totalAssets,true) : '-'}
         </td>
 
@@ -170,6 +170,7 @@ $: {
 
       </tbody>
     </table>
+    </div>
   </div>
 
 
diff --git a/src/routes/market-mover/+page.svelte b/src/routes/market-mover/+page.svelte
index c0a6d6d5..c2602ad0 100644
--- a/src/routes/market-mover/+page.svelte
+++ b/src/routes/market-mover/+page.svelte
@@ -257,8 +257,8 @@ $: {
   
 <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">
@@ -266,7 +266,7 @@ $: {
       </li>
     </ul>
   </div>
--->
+
 
 
   <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index 7269737f..7ae7b008 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -32,7 +32,7 @@ const navigation = [
 
 
 
-<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pt-4 mb-40">
+<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">
@@ -48,7 +48,7 @@ const navigation = [
             <main>
   
   
-              <div class="w-full max-w-5xl 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 -->
@@ -99,7 +99,7 @@ const navigation = [
   
               <div class="pl-4 pr-4 sm:pl-0 sm:pr-0 w-screen sm:w-full">
 
-                    <div class="tabs flex flex-row justify-between sm:justify-start items-center w-full pl-3 pr-3 sm:pl-0 sm:pr-0">
+                    <div class="tabs grid grid-cols-3 sm:grid-cols-9 w-full pl-3 pr-3 sm:pl-0 sm:pr-0">
 
                     {#each navigation as item}
                    
diff --git a/src/routes/most-shorted-stocks/+page.svelte b/src/routes/most-shorted-stocks/+page.svelte
index 9fef922e..a26c634b 100644
--- a/src/routes/most-shorted-stocks/+page.svelte
+++ b/src/routes/most-shorted-stocks/+page.svelte
@@ -73,22 +73,22 @@
   
       
   
-  <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="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">Most Shorted Stocks</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 -->
@@ -142,27 +142,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">
                               Symbol
                             </th>
   
-                            <th class="hidden sm:table-cell text-start bg-[#09090B] text-white text-sm font-semibold">
+                            <th class="hidden sm:table-cell text-start bg-[#09090B] text-white text-[1rem] font-semibold">
                               Name
                             </th>
   
-                            <th class="text-center bg-[#09090B] text-white text-sm font-semibold">
+                            <th class="text-center bg-[#09090B] text-white text-[1rem] font-semibold">
                               Short Interest
                             </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">
                               Float
                             </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">
                               Outstd
                             </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">
                               Sector
                             </th>
                           </tr>
@@ -171,11 +171,11 @@
                           {#each shortedList as item, index}
   
                           <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === shortedList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
-                            <td class="text-white text-sm font-medium text-white text-end">
+                            <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
                               {index+1}
                             </td>
   
-                            <td class="text-sm text-start">
+                            <td class="text-sm sm:text-[1rem] whtitespace-nowrap text-start">
                                 <div class="flex flex-col items-start w-32 sm:w-fit">
                                     <span class="text-blue-400">{item?.symbol}</span>
                                     <span class="text-white sm:hidden">
@@ -184,24 +184,24 @@
                                 </div>
                             </td>
   
-                            <td class="hidden sm:table-cell text-white text-sm text-white text-start">
+                            <td class="hidden sm:table-cell text-white text-sm sm:text-[1rem] whtitespace-nowrap text-white text-start">
                                 {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
                             </td>
                           
   
-                            <td class="text-center text-sm font-medium text-white">
+                            <td class="text-center text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
                                 {item?.shortOutStandingPercent}%
                             </td>
 
-                            <td class="text-end text-sm font-medium text-white">
+                            <td class="text-end text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
                                 {abbreviateNumber(item?.latestFloatShares)}
                             </td>
                             
-                            <td class="text-end text-sm font-medium text-white">
+                            <td class="text-end text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
                               {abbreviateNumber(item?.latestOutstandingShares)}
                             </td>
 
-                            <td class="text-end text-sm font-medium text-white">
+                            <td class="text-end text-sm sm:text-[1rem] whtitespace-nowrap font-medium text-white">
                               {item?.sector}
                             </td>