From ddf2cc82c934034926f920e56a8db6c50f7f958c Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 20 Feb 2025 10:56:09 +0100
Subject: [PATCH] ui fix

---
 .../statistics/market-cap/+layout.svelte      | 41 ++++++++-----------
 .../statistics/market-cap/+page.svelte        | 18 +++++---
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
index f175fa77..36a99818 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
@@ -104,32 +104,25 @@
           {/if}
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 bg-inherit transition ease-out duration-100"
+            class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4"
           >
-            <div class="w-auto lg:w-full p-2 flex flex-col m-auto px-2">
-              <div>
-                <div class="p-2 w-full flex justify-between items-center mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white">
-                    Market Capitalization
-                  </h2>
-                </div>
-                <div class="text-white p-2">
-                  Market capitalization, also called net worth, is the total
-                  value of all of a company's outstanding shares. It is
-                  calculated by multiplying the stock price by the number of
-                  shares outstanding.
-                  <br />
-                  <br />
-                  Formula: Market Cap = Stock Price * Shares Outstanding
-                </div>
-                <a
-                  href="/blog/article/market-capitalization"
-                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
-                >
-                  Full Definition
-                </a>
-              </div>
+            <h3 class="p-2 pt-4 text-xl font-semibold">
+              Market Capitalization
+            </h3>
+            <div class="text-white p-2">
+              Market capitalization, also called net worth, is the total value
+              of all of a company's outstanding shares. It is calculated by
+              multiplying the stock price by the number of shares outstanding.
+              <br />
+              <br />
+              Formula: Market Cap = Stock Price * Shares Outstanding
             </div>
+            <a
+              href="/blog/article/market-capitalization"
+              class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-2 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+            >
+              Full Definition
+            </a>
           </div>
 
           {#if similarStocks?.length > 0}
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index 73d63360..088f8882 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -501,10 +501,14 @@
                 </div>
               </div>
 
-              <div class="flex flex-row items-center w-full mt-10 mb-8">
-                <h1 class="text-2xl text-white font-bold">Market Cap Chart</h1>
+              <div
+                class="flex flex-col sm:flex-row items-start sm:items-center w-full sm:mt-10 mb-8"
+              >
+                <h1 class="text-2xl text-white font-bold mb-3 sm:mb-0">
+                  Historical Chart
+                </h1>
                 <div
-                  class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
+                  class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
                 >
                   <div class="relative inline-block text-left grow">
                     <DropdownMenu.Root>
@@ -513,7 +517,9 @@
                           builders={[builder]}
                           class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                         >
-                          <span class="truncate text-white">{timePeriod}</span>
+                          <span class="truncate text-white text-xs sm:text-sm"
+                            >{timePeriod}</span
+                          >
                           <svg
                             class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                             viewBox="0 0 20 20"
@@ -587,7 +593,9 @@
                     on:click={() => exportData("csv")}
                     class="ml-2 w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                   >
-                    <span class="truncate text-white">Download</span>
+                    <span class="truncate text-white text-xs sm:text-sm"
+                      >Download</span
+                    >
                     <svg
                       class="{data?.user?.tier === 'Pro'
                         ? 'hidden'