ui fix

src/routes/stocks/[tickerID]/profile/+layout.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { stockTicker } from "$lib/store";
+  import { page } from "$app/stores";
+
+  let displaySubSection = "overview";
+
+  function changeSubSection(state) {
+    const subSectionMap = {
+      employees: "/profile/employees",
+    };
+
+    if (state !== "overview" && subSectionMap[state]) {
+      displaySubSection = state;
+    } else {
+      displaySubSection = state;
+    }
+  }
+
+  $: {
+    if ($page?.url?.pathname) {
+      const parts = $page?.url?.pathname.split("/");
+      const sectionMap = {
+        employees: "employees",
+      };
+
+      const foundSection = parts?.find((part) =>
+        Object?.values(sectionMap)?.includes(part),
+      );
+
+      displaySubSection =
+        Object?.keys(sectionMap)?.find(
+          (key) => sectionMap[key] === foundSection,
+        ) || "overview";
+    }
+  }
+</script>
+
+<section class="w-auto bg-default overflow-hidden text-black h-full">
+  <div class="m-auto h-full overflow-hidden">
+    <main class="w-full">
+      <div class="m-auto">
+        <nav
+          class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
+        >
+          <ul class="flex flex-row items-center w-full text-white">
+            <a
+              href={`/stocks/${$stockTicker}/profile`}
+              on:click={() => changeSubSection("overview")}
+              class="p-2 px-5 cursor-pointer {displaySubSection === 'overview'
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+            >
+              Overview
+            </a>
+
+            <a
+              href={`/stocks/${$stockTicker}/profile/employees`}
+              on:click={() => changeSubSection("employees")}
+              class="p-2 px-5 cursor-pointer {displaySubSection === 'employees'
+                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+            >
+              Employees
+            </a>
+          </ul>
+        </nav>
+      </div>
+    </main>
+
+    <slot />
+  </div>
+</section>
+
+<style>
+  .scrollbar {
+    display: grid;
+    grid-gap: 18px;
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    grid-auto-flow: column;
+    overflow-x: auto;
+    scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
+    scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
+  }
+
+  /* Custom scrollbar for Webkit (Chrome, Safari) */
+  .scrollbar::-webkit-scrollbar {
+    width: 0; /* Hide the width of the scrollbar */
+    height: 0; /* Hide the height of the scrollbar */
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: transparent; /* Make the thumb transparent */
+  }
+</style>

src/routes/stocks/[tickerID]/profile/employees/+layout.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
+  import { stockTicker } from "$lib/store";
   export let data;
 
-  const similarStocks = data?.getSimilarStocks?.sort(
-    (a, b) => b?.employees - a?.employees,
-  );
+  let similarStocks;
+
+  $: {
+    if ($stockTicker) {
+      similarStocks = data?.getSimilarStocks?.sort(
+        (a, b) => b?.employees - a?.employees,
+      );
+    }
+  }
 </script>
 
 <section class="w-full overflow-hidden">
@@ -44,7 +51,7 @@
                         : ''}"
                       ><td class="text-left"
                         ><a
-                          href={`/stocks/${item?.symbol}/statistics/employees`}
+                          href={`/stocks/${item?.symbol}/profile/employees`}
                           class="text-[1rem] sm:hover:text-white text-blue-400"
                           >{item?.name?.length > 30
                             ? item?.name?.slice(0, 30) + "..."

src/routes/stocks/[tickerID]/profile/employees/+page.svelte

@@ -377,11 +377,7 @@
   }
 
   $: {
-    if (
-      employeeHistory?.length > 0 &&
-      $stockTicker &&
-      typeof window !== "undefined"
-    ) {
+    if (employeeHistory?.length > 0 && $stockTicker) {
       employeeHistory = data?.getHistoryEmployee ?? [];
       historyList = sortByDate(employeeHistory);
 
@@ -409,7 +405,7 @@
     }
   }
 
-  let htmlOutput;
+  let htmlOutput = generateEmployeeInfoHTML();
 </script>
 
 <svelte:head>

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

@@ -8,7 +8,6 @@
     const subSectionMap = {
       "market-cap": "/statistics/market-cap",
       "price-reaction": "/statistics/price-reaction",
-      employees: "/statistics/employees",
       "fail-to-deliver": "/statistics/fail-to-deliver",
     };
 
@@ -25,7 +24,6 @@
       const sectionMap = {
         "market-cap": "market-cap",
         "price-reaction": "price-reaction",
-        employees: "employees",
         "fail-to-deliver": "fail-to-deliver",
       };
 
@@ -78,15 +76,6 @@
             >
               Price Reaction
             </a>
-            <a
-              href={`/stocks/${$stockTicker}/statistics/employees`}
-              on:click={() => changeSubSection("employees")}
-              class="p-2 px-5 cursor-pointer {displaySubSection === 'employees'
-                ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
-            >
-              Employees
-            </a>
 
             <a
               href={`/stocks/${$stockTicker}/statistics/fail-to-deliver`}