From a886bbbbb910bb7085acf65444b26ed890be32c1 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 2 Dec 2024 20:20:12 +0100
Subject: [PATCH] ui fixes

---
 .../etf/[tickerID]/holdings/+page.svelte      |  4 ++--
 src/routes/options-flow/+page.svelte          | 20 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index 61e781e7..c7c3ee7e 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -71,7 +71,7 @@
 </svelte:head>
 
 <section
-  class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full mt-5 sm:mt-0"
+  class="bg-[#09090B] overflow-hidden text-white h-full min-h-screen mb-20 sm:mb-0 w-full mt-5 sm:mt-0"
 >
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
@@ -111,7 +111,7 @@
                 {$etfTicker} Holdings List
               </h1>
               <div
-                class="ml-3 sm:mt-1 whitespace-nowrap text-sm sm:text-[1rem] font-semibold md:ml-0"
+                class="ml-3 sm:mt-1 whitespace-nowrap text-sm sm:text-[1rem] md:ml-0"
               >
                 <span class="inline">As of </span>{formattedDate}
               </div>
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index ad8f2623..28d062fc 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -11,7 +11,7 @@
   import { Button } from "$lib/components/shadcn/button/index.js";
   import { Calendar } from "$lib/components/shadcn/calendar/index.js";
   import CalendarIcon from "lucide-svelte/icons/calendar";
-
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import VirtualList from "svelte-tiny-virtual-list";
   import { writable } from "svelte/store";
 
@@ -423,7 +423,7 @@
     const formattedHours = hours % 12 || 12; // Converts 0 to 12 for midnight
 
     // Format the time string
-    const formattedTimeString = `${formattedHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")} ${period}`;
+    const formattedTimeString = `${formattedHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${period}`;
 
     return formattedTimeString;
   }
@@ -1009,7 +1009,7 @@ function sendMessage(message) {
   <section
     class="w-full max-w-screen sm:max-w-7xl xl:max-w-7xl flex justify-center items-center bg-[#09090B] pb-20"
   >
-    <div class="w-full m-auto px-3">
+    <div class="w-full m-auto px-3 min-h-screen">
       <!--
         <div class="text-sm sm:text-[1rem] breadcrumbs mb-5">
           <ul>
@@ -1971,20 +1971,20 @@ function sendMessage(message) {
 
                       <div
                         style="justify-content: center;"
-                        class="td text-white text-xs sm:text-sm text-start"
+                        class="td text-white text-xs sm:text-sm text-start m-auto whitespace-nowrap"
                       >
                         {formatTime(displayedData[index]?.time)}
                       </div>
-                      <a
-                        href={displayedData[index]?.underlying_type === "stock"
-                          ? `/stocks/${displayedData[index]?.ticker}`
-                          : `/etf/${displayedData[index]?.ticker}`}
+                      <div
                         on:click|stopPropagation
                         style="justify-content: center;"
                         class="td text-sm sm:hover:text-white sm:text-[1rem] text-blue-400 font-normal"
                       >
-                        {displayedData[index]?.ticker}
-                      </a>
+                        <HoverStockChart
+                          symbol={displayedData[index]?.ticker}
+                          assetType={displayedData[index]?.underlying_type}
+                        />
+                      </div>
 
                       <div
                         id={displayedData[index]?.id}