From fb612f4b3f1214d68ee916c1325cf95946b72aa8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 20 Feb 2025 18:33:38 +0100
Subject: [PATCH] ui fix

---
 .../statistics/fail-to-deliver/+layout.svelte |  24 ++--
 .../statistics/fail-to-deliver/+page.svelte   |   4 +-
 .../statistics/market-cap/+layout.svelte      |  36 +++---
 .../statistics/market-cap/+page.svelte        |   4 +-
 .../statistics/revenue/+layout.svelte         | 101 ++++-------------
 .../statistics/revenue/+page.svelte           | 106 +++++++++---------
 6 files changed, 109 insertions(+), 166 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
index ab0f4bf1..46a01199 100644
--- a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
@@ -23,16 +23,16 @@
             <div
               class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
-              <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
+              <h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3>
               <table class="table table-sm table-compact w-full text-white">
                 <thead class="text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
                       >FTD / Avg Volume</th
                     ></tr
                   ></thead
@@ -45,14 +45,14 @@
                         similarStocks?.slice(0, 8).length - 1
                           ? 'border-b'
                           : ''}"
-                        ><td class="text-left text-[1rem]"
+                        ><td class="text-left text-[1rem] px-2"
                           ><a
                             href={`/stocks/${item?.symbol}`}
                             class="sm:hover:text-white text-blue-400"
                             >{item?.symbol}</a
                           ></td
                         >
-                        <td class="text-right cursor-normal text-[1rem]"
+                        <td class="text-right cursor-normal text-[1rem] px-2"
                           >{item?.relativeFTD > 0.01
                             ? abbreviateNumber(item?.relativeFTD) + "%"
                             : "< 0.01%"}</td
@@ -62,12 +62,14 @@
                   {/each}
                 </tbody>
               </table>
-              <a
-                href="/list/most-ftd-shares"
-                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"
-              >
-                Fail-to-Deliver Ranks
-              </a>
+              <div class="px-2">
+                <a
+                  href="/list/most-ftd-shares"
+                  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"
+                >
+                  Fail-to-Deliver Ranks
+                </a>
+              </div>
             </div>
           {/if}
         </aside>
diff --git a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
index 72c09b88..5b321bec 100644
--- a/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
@@ -66,9 +66,7 @@
   description={`Historical Fail-to-Deliver shares of ${$displayCompanyName}.`}
 />
 
-<section
-  class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
->
+<section class="bg-default w-full overflow-hidden text-white h-full">
   <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
index 36a99818..11972469 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
@@ -117,12 +117,14 @@
               <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 class="px-2">
+              <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>
           </div>
 
           {#if similarStocks?.length > 0}
@@ -134,11 +136,11 @@
                 <thead class="text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
                       >Market Cap</th
                     ></tr
                   ></thead
@@ -151,14 +153,14 @@
                         similarStocks?.slice(0, 8).length - 1
                           ? 'border-b'
                           : ''}"
-                        ><td class="text-left text-[1rem]"
+                        ><td class="text-left text-[1rem] px-2"
                           ><a
                             href={`/stocks/${item?.symbol}`}
                             class="sm:hover:text-white text-blue-400"
                             >{item?.name}</a
                           ></td
                         >
-                        <td class="text-right cursor-normal text-[1rem]"
+                        <td class="text-right cursor-normal text-[1rem] px-2"
                           >{abbreviateNumber(item?.marketCap)}</td
                         >
                       </tr>
@@ -167,12 +169,14 @@
                 </tbody>
               </table>
               {#if capCategory}
-                <a
-                  href={capCategory?.link}
-                  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"
-                >
-                  {capCategory?.name} Rankings
-                </a>
+                <div class="px-2">
+                  <a
+                    href={capCategory?.link}
+                    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"
+                  >
+                    {capCategory?.name} Rankings
+                  </a>
+                </div>
               {/if}
             </div>
           {/if}
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index b9cbedb1..aaf93112 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -396,9 +396,7 @@
   description={`Historical Market Cap of ${$displayCompanyName}.`}
 />
 
-<section
-  class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
->
+<section class="bg-default w-full overflow-hidden text-white h-full">
   <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte
index 661ba734..4a9ec3b1 100644
--- a/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/revenue/+layout.svelte
@@ -3,71 +3,6 @@
 
   export let data;
   const similarStocks = data?.getSimilarStocks;
-
-  function getMarketCapCategory(marketCap) {
-    const BILLION = 1_000_000_000;
-    const MILLION = 1_000_000;
-
-    const marketCapNavigation = [
-      {
-        threshold: 200 * BILLION,
-        name: "Mega-Cap",
-        link: "/list/market-cap/mega-cap-stocks",
-      },
-      {
-        minThreshold: 10 * BILLION,
-        maxThreshold: 200 * BILLION,
-        name: "Large-Cap",
-        link: "/list/market-cap/large-cap-stocks",
-      },
-      {
-        minThreshold: 2 * BILLION,
-        maxThreshold: 10 * BILLION,
-        name: "Mid-Cap",
-        link: "/list/market-cap/mid-cap-stocks",
-      },
-      {
-        minThreshold: 300 * MILLION,
-        maxThreshold: 2 * BILLION,
-        name: "Small-Cap",
-        link: "/list/market-cap/small-cap-stocks",
-      },
-      {
-        minThreshold: 50 * MILLION,
-        maxThreshold: 300 * MILLION,
-        name: "Micro-Cap",
-        link: "/list/market-cap/micro-cap-stocks",
-      },
-      {
-        maxThreshold: 50 * MILLION,
-        name: "Nano-Cap",
-        link: "/list/market-cap/nano-cap-stocks",
-      },
-    ];
-
-    if (!marketCap) return null;
-
-    // Convert string to number if needed
-    const capValue =
-      typeof marketCap === "string" ? parseFloat(marketCap) : marketCap;
-
-    return marketCapNavigation.find((category) => {
-      if (category.threshold) {
-        return capValue >= category.threshold;
-      }
-      if (category.minThreshold && category.maxThreshold) {
-        return (
-          capValue >= category.minThreshold && capValue < category.maxThreshold
-        );
-      }
-      if (category.maxThreshold) {
-        return capValue < category.maxThreshold;
-      }
-      return false;
-    });
-  }
-
-  let capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap);
 </script>
 
 <section class="w-full overflow-hidden">
@@ -113,12 +48,14 @@
               or services. Revenue does not take any expenses into account and
               is therefore different from profits.
             </div>
-            <a
-              href="/blog/article/revenue"
-              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 class="px-2">
+              <a
+                href="/blog/article/revenue"
+                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>
           </div>
 
           {#if similarStocks?.length > 0}
@@ -130,11 +67,11 @@
                 <thead class="text-white"
                   ><tr
                     ><th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2"
                       >Company</th
                     >
                     <th
-                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right"
+                      class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2"
                       >Revenue</th
                     ></tr
                   ></thead
@@ -147,14 +84,14 @@
                         similarStocks?.slice(0, 8).length - 1
                           ? 'border-b'
                           : ''}"
-                        ><td class="text-left text-[1rem]"
+                        ><td class="text-left text-[1rem] px-2"
                           ><a
                             href={`/stocks/${item?.symbol}/statistics/revenue`}
                             class="sm:hover:text-white text-blue-400"
                             >{item?.name}</a
                           ></td
                         >
-                        <td class="text-right cursor-normal text-[1rem]"
+                        <td class="text-right cursor-normal text-[1rem] px-2"
                           >{abbreviateNumber(item?.revenue)}</td
                         >
                       </tr>
@@ -162,12 +99,14 @@
                   {/each}
                 </tbody>
               </table>
-              <a
-                href="/list/highest-revenue"
-                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"
-              >
-                Revenue Rankings
-              </a>
+              <div class="px-2">
+                <a
+                  href="/list/highest-revenue"
+                  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"
+                >
+                  Revenue Rankings
+                </a>
+              </div>
             </div>
           {/if}
         </aside>
diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
index af12ccf4..aaf93112 100644
--- a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
@@ -396,9 +396,7 @@
   description={`Historical Market Cap of ${$displayCompanyName}.`}
 />
 
-<section
-  class="bg-default w-full overflow-hidden min-h-screen text-white h-full"
->
+<section class="bg-default w-full overflow-hidden text-white h-full">
   <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
@@ -410,7 +408,7 @@
           </div>
 
           {#if rawData?.length !== 0}
-            <div class="grid grid-cols-1 gap-2">
+            <div class="grid grid-cols-1 gap-2 mt-3 mb-3 sm:mt-0 sm:mb-0">
               <Infobox
                 text={`${$displayCompanyName} has a market cap or net worth of ${abbreviateNumber(
                   data?.getStockQuote?.marketCap,
@@ -615,59 +613,63 @@
                 <Chart {init} options={optionsData} class="chart" />
               </div>
 
-              <h2 class="mt-10 text-xl text-white font-bold">
-                Market Cap History
-              </h2>
-
               <div
-                class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
+                class="mt-10 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
               >
+                <h3 class="text-xl sm:text-2xl text-white font-bold">
+                  Market Cap History
+                </h3>
+
                 <div
-                  class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
                 >
-                  {#each tabs as item, i}
-                    {#if data?.user?.tier !== "Pro" && i > 0}
-                      <button
-                        on:click={() => goto("/pricing")}
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
-                      >
-                        <span class="relative text-sm block font-semibold">
-                          {item.title}
-                          <svg
-                            class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            ><path
-                              fill="#A3A3A3"
-                              d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            /></svg
-                          >
-                        </span>
-                      </button>
-                    {:else}
-                      <button
-                        on:click={() => changeTablePeriod(i)}
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
-                        i
-                          ? 'z-0'
-                          : ''} "
-                      >
-                        {#if activeIdx === i}
-                          <div
-                            class="absolute inset-0 rounded-md bg-[#fff]"
-                          ></div>
-                        {/if}
-                        <span
-                          class="relative text-sm block font-semibold {activeIdx ===
-                          i
-                            ? 'text-black'
-                            : 'text-white'}"
+                  <div
+                    class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  >
+                    {#each tabs as item, i}
+                      {#if data?.user?.tier !== "Pro" && i > 0}
+                        <button
+                          on:click={() => goto("/pricing")}
+                          class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
                         >
-                          {item.title}
-                        </span>
-                      </button>
-                    {/if}
-                  {/each}
+                          <span class="relative text-sm block font-semibold">
+                            {item.title}
+                            <svg
+                              class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="#A3A3A3"
+                                d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                              /></svg
+                            >
+                          </span>
+                        </button>
+                      {:else}
+                        <button
+                          on:click={() => changeTablePeriod(i)}
+                          class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                          i
+                            ? 'z-0'
+                            : ''} "
+                        >
+                          {#if activeIdx === i}
+                            <div
+                              class="absolute inset-0 rounded-md bg-[#fff]"
+                            ></div>
+                          {/if}
+                          <span
+                            class="relative text-sm block font-semibold {activeIdx ===
+                            i
+                              ? 'text-black'
+                              : 'text-white'}"
+                          >
+                            {item.title}
+                          </span>
+                        </button>
+                      {/if}
+                    {/each}
+                  </div>
                 </div>
               </div>