resize etf page

src/app.css

@@ -55,8 +55,12 @@
     .no-scrollbar {
       -ms-overflow-style: none;  /* IE and Edge */
       scrollbar-width: none;  /* Firefox */
+      overflow: -moz-scrollbars-none; /* Legacy support for older Firefox versions */
     }
     
+    .no-scrollbar::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, and other WebKit-based browsers */
+    }
 
 
     .shake-ticker:hover img {

src/lib/components/OptionsNetFlow.svelte

@@ -74,8 +74,8 @@
     },
     animation: $screenWidth < 640 ? false: true,
     grid: {
-        left: '2%',
+        left: '1%',
-        right: '4%',
+        right: $screenWidth < 640 ? '2%' : '0%',
         bottom: '0%',
         top: '10%',
         containLabel: true

src/routes/etf/[tickerID]/+layout.svelte

@@ -586,19 +586,20 @@ $: {
             <!--End Mobile Navbar-->
            
         
-            <div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3 sm:px-6">      
+            <div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">      
                     
               <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                   <!-- Main content -->
-                              <div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-2xl">
+                  <div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl">
                       <div class="md:pr-6 lg:pr-10">
                                    
                                    
-                                      <!-----Start-Header-CandleChart-Indicators------>
                   
+                                      <!-----Start-Header-CandleChart-Indicators------>
                                       <div class="m-auto pl-0 sm:pl-4 max-w-3xl overflow-hidden mb-5 md:mt-10">
       
                                         <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
+  
                                             <Markethour />
   
                                             <!--Start Watchlist-->
@@ -713,7 +714,7 @@ $: {
                                         
                                         <!--<div class="w-full max-w-3xl sm:max-w-2xl m-auto pt-2 pb-5 sm:pl-3 sticky z-20 bg-[#0F0F0F]"  style="top: {$screenWidth < 520 && $isScrollingUp ? '4rem' : '0rem'};">-->
                                           <div class="sm:ml-4 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" >
-                                            <ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#0F0F0F] overflow-x-scroll space-x-3 rtl:space-x-reverse py-2">
+                                            <ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#0F0F0F]  space-x-3 rtl:space-x-reverse py-2">
                                               <li class="cursor-pointer flex flex-col items-center">
                                                 <a href={`/etf/${$etfTicker}`} id="item1" on:click={() => (changeSection('overview','item1'))} class="px-2 text-sm sm:text-[0.9rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'overview' ? 'text-white ' : 'bg-[#0F0F0F]'}" >
                                                   Overview
@@ -750,7 +751,7 @@ $: {
                                                 </a>
                                                 <div class="{displaySection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#0F0F0F]'} mt-1 h-[3px] rounded-full w-[3rem]" />
                                               </li>
-                                              <li class="cursor-pointer flex flex-col items-center">
+                                              <li class="cursor-pointer flex flex-col items-center pr-6">
                                                 <a href={`/etf/${$etfTicker}/news`} id="item7" on:click={() => (changeSection('news','item7'))} class="px-2 text-sm sm:text-[0.9rem] font-medium text-gray-400 sm:hover:text-white {displaySection === 'news' ? 'text-white ' : 'bg-[#0F0F0F]'}" >
                                                   News
                                                 </a>

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

@@ -756,7 +756,6 @@ async function initializePrice() {
 <!-- Other meta tags -->
 <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
 <meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <meta property="og:type" content="website"/>
 <!-- Add more Open Graph meta tags as needed -->
 
@@ -764,18 +763,19 @@ async function initializePrice() {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Stock Price, Quote & News · stocknear`}/>
 <meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
 
   
+<section class="bg-[#0F0F0F] min-h-screen pb-40">
+  
+  <div class="w-full max-w-4xl m-auto ">
+
 
-    <section class="bg-[#0F0F0F] min-h-screen pb-40">
-      <div class="w-full xl:w-fit max-w-4xl m-auto ">
         <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
             <!-- Main content -->
-                <div class="md:grow pb-12 md:pb-20 w-full max-w-2xl sm:pr-6">
+            <div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0">
               <div class="xl:pr-10">
     
         
@@ -914,7 +914,7 @@ async function initializePrice() {
                                   <!-- Start Graph -->
     
                                   {#if output !== null}
-                                    <div class ="w-full max-w-[540px] md:max-w-[620px] lg:max-w-[570px] xl:max-w-[540px] ml-auto mb-4">
+                                  <div class ="w-full sm:pl-7 ml-auto max-w-3xl mb-10">
                                       {#if displayData === '1D' && oneDayPrice?.length === 0}
                                       <h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
                                         No data available