ui fix

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,6 +62,7 @@
                   {/each}
                 </tbody>
               </table>
+              <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"
@@ -69,6 +70,7 @@
                   Fail-to-Deliver Ranks
                 </a>
               </div>
+            </div>
           {/if}
         </aside>
       </div>

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte

@@ -66,9 +66,7 @@
   description={`Historical Fail-to-Deliver shares of ${$displayCompanyName}.`}
 />
 
-<section
+<section class="bg-default w-full overflow-hidden text-white h-full">
-  class="bg-default w-full overflow-hidden min-h-screen 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"

src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte

@@ -117,6 +117,7 @@
               <br />
               Formula: Market Cap = Stock Price * Shares Outstanding
             </div>
+            <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"
@@ -124,6 +125,7 @@
                 Full Definition
               </a>
             </div>
+          </div>
 
           {#if similarStocks?.length > 0}
             <div
@@ -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}
+                <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}

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -396,9 +396,7 @@
   description={`Historical Market Cap of ${$displayCompanyName}.`}
 />
 
-<section
+<section class="bg-default w-full overflow-hidden text-white h-full">
-  class="bg-default w-full overflow-hidden min-h-screen 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"

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,6 +48,7 @@
               or services. Revenue does not take any expenses into account and
               is therefore different from profits.
             </div>
+            <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"
@@ -120,6 +56,7 @@
                 Full Definition
               </a>
             </div>
+          </div>
 
           {#if similarStocks?.length > 0}
             <div
@@ -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,6 +99,7 @@
                   {/each}
                 </tbody>
               </table>
+              <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"
@@ -169,6 +107,7 @@
                   Revenue Rankings
                 </a>
               </div>
+            </div>
           {/if}
         </aside>
       </div>

src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte

@@ -396,9 +396,7 @@
   description={`Historical Market Cap of ${$displayCompanyName}.`}
 />
 
-<section
+<section class="bg-default w-full overflow-hidden text-white h-full">
-  class="bg-default w-full overflow-hidden min-h-screen 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,9 +613,12 @@
                 <Chart {init} options={optionsData} class="chart" />
               </div>
 
-              <h2 class="mt-10 text-xl text-white font-bold">
+              <div
+                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
-              </h2>
+                </h3>
 
                 <div
                   class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
@@ -670,6 +671,7 @@
                     {/each}
                   </div>
                 </div>
+              </div>
 
               <div class="w-full overflow-x-scroll">
                 <table