From 2d1dd7d8deeb172db3017e2f2945c1563ef615ff Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 21 Aug 2024 17:00:09 +0200
Subject: [PATCH] ui fix

---
 src/routes/stocks/[tickerID]/stats/+layout.svelte  | 14 +++++++-------
 .../stocks/[tickerID]/stats/ratios/+page.svelte    |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/stats/+layout.svelte b/src/routes/stocks/[tickerID]/stats/+layout.svelte
index 6c49bc91..da3bbac7 100644
--- a/src/routes/stocks/[tickerID]/stats/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/stats/+layout.svelte
@@ -58,43 +58,43 @@ function changeSubSection(state) {
                     <div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2" >
                       <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
                         <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats`} on:click={() => (changeSubSection('fundamental'))} class="px-2 text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'fundamental' ? 'text-white ' : 'bg-[#09090B]'}" >
+                          <a href={`/stocks/${$stockTicker}/stats`} on:click={() => (changeSubSection('fundamental'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'fundamental' ? 'text-white ' : 'bg-[#09090B]'}" >
                             Fundamental
                           </a>
                           <div class="{displaySubSection === 'fundamental' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" />
                         </li>
                         <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/market-cap`} on:click={() => (changeSubSection('market-cap'))} class="whitespace-nowrap px-2 text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'market-cap' ? 'text-white ' : 'bg-[#09090B]'}" >
+                          <a href={`/stocks/${$stockTicker}/stats/market-cap`} on:click={() => (changeSubSection('market-cap'))} class="whitespace-nowrap px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'market-cap' ? 'text-white ' : 'bg-[#09090B]'}" >
                             Market Cap
                           </a>
                           <div class="{displaySubSection === 'market-cap' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
                         </li>
                         <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/employees`} on:click={() => (changeSubSection('employees'))} class="px-2 text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'employees' ? 'text-white ' : 'bg-[#09090B]'}" >
+                          <a href={`/stocks/${$stockTicker}/stats/employees`} on:click={() => (changeSubSection('employees'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'employees' ? 'text-white ' : 'bg-[#09090B]'}" >
                             Employees
                           </a>
                           <div class="{displaySubSection === 'employees' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" />
                         </li>
                         <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/income`} on:click={() => (changeSubSection('income'))} class="px-2 text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'income' ? 'text-white ' : 'bg-[#09090B]'}" >
+                          <a href={`/stocks/${$stockTicker}/stats/income`} on:click={() => (changeSubSection('income'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'income' ? 'text-white ' : 'bg-[#09090B]'}" >
                             Income
                           </a>
                           <div class="{displaySubSection === 'income' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
                         </li>
                         <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/balance-sheet`} on:click={() => (changeSubSection('balance-sheet'))} class="px-2 text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'balance-sheet' ? 'text-white ' : 'bg-[#09090B]'}" >
+                          <a href={`/stocks/${$stockTicker}/stats/balance-sheet`} on:click={() => (changeSubSection('balance-sheet'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'balance-sheet' ? 'text-white ' : 'bg-[#09090B]'}" >
                             Balance
                           </a>
                           <div class="{displaySubSection === 'balance-sheet' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
                         </li>
                         <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/cash-flow`} on:click={() => (changeSubSection('cash-flow'))} class="px-2 text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'cash-flow' ? 'text-white ' : 'bg-[#09090B]'}" >
+                          <a href={`/stocks/${$stockTicker}/stats/cash-flow`} on:click={() => (changeSubSection('cash-flow'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'cash-flow' ? 'text-white ' : 'bg-[#09090B]'}" >
                             Cashflow
                           </a>
                           <div class="{displaySubSection === 'cash-flow' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
                         </li>
                         <li class="cursor-pointer flex flex-col items-center">
-                          <a href={`/stocks/${$stockTicker}/stats/ratios`} on:click={() => (changeSubSection('ratios'))} class="px-2 text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ratios' ? 'text-white ' : 'bg-[#09090B]'}" >
+                          <a href={`/stocks/${$stockTicker}/stats/ratios`} on:click={() => (changeSubSection('ratios'))} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ratios' ? 'text-white ' : 'bg-[#09090B]'}" >
                             Ratios
                           </a>
                           <div class="{displaySubSection === 'ratios' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]" />
diff --git a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
index 91163aaa..40411715 100644
--- a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
@@ -355,9 +355,9 @@ $: {
                 
 <section class="bg-[#09090B] overflow-hidden text-white h-full pb-40 sm:mb-0">
     <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-        <div class="relative flex justify-center items-center overflow-hidden">
+        <div class="w-full relative flex justify-center items-center overflow-hidden">
             <main class="w-full">
-                <div class="sm:p-7 m-auto mt-2 sm:mt-0">
+                <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
                     <div class="mb-3">
                         <h1 class="text-2xl text-gray-200 font-bold">
                             {#if mode}