From 9c4429cbc0c108e196390878134c7e36bcea109d Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 28 Mar 2025 11:36:45 +0100
Subject: [PATCH] ui fix

---
 .../DarkPool/HistoricalVolume.svelte          |  4 ++--
 .../components/DarkPool/RealtimeTrade.svelte  |  6 +++---
 src/lib/components/EstimationGraph.svelte     |  4 ++--
 src/lib/highcharts.ts                         | 19 +++++++++++--------
 src/routes/potus-tracker/+page.svelte         | 10 +++++-----
 5 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/DarkPool/HistoricalVolume.svelte b/src/lib/components/DarkPool/HistoricalVolume.svelte
index cd0dfb7c..1d1558a6 100644
--- a/src/lib/components/DarkPool/HistoricalVolume.svelte
+++ b/src/lib/components/DarkPool/HistoricalVolume.svelte
@@ -282,7 +282,7 @@
             <div
               class="{!['Pro']?.includes(data?.user?.tier)
                 ? 'blur-[3px]'
-                : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
+                : ''} mt-5 shadow-sm sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
               use:highcharts={config}
             ></div>
             <!-- Overlay with "Upgrade to Pro" -->
@@ -369,7 +369,7 @@
         </div>
       </div>
 
-      <div class="w-full overflow-x-auto">
+      <div class="w-full overflow-x-auto mt-3">
         <table
           class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
         >
diff --git a/src/lib/components/DarkPool/RealtimeTrade.svelte b/src/lib/components/DarkPool/RealtimeTrade.svelte
index f614a3e5..57945b9f 100644
--- a/src/lib/components/DarkPool/RealtimeTrade.svelte
+++ b/src/lib/components/DarkPool/RealtimeTrade.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { stockTicker, etfTicker } from "$lib/store";
+  import { stockTicker, etfTicker, screenWidth } from "$lib/store";
   import highcharts from "$lib/highcharts.ts";
   import { mode } from "mode-watcher";
 
@@ -115,7 +115,7 @@
         },
         {
           title: {
-            text: "Total Trades",
+            text: $screenWidth < 640 ? null : "Total Trades",
             style: { color: $mode === "light" ? "black" : "white" },
           },
           labels: { style: { color: $mode === "light" ? "black" : "white" } },
@@ -220,7 +220,7 @@
       <div
         class="{!['Pro']?.includes(data?.user?.tier)
           ? 'blur-[3px]'
-          : ''} mt-5 shadow-sm sm:mt-0 sm:border sm:border-gray-300 dark:border-gray-800 rounded"
+          : ''} mt-5 shadow-sm sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
         use:highcharts={config}
       ></div>
       <!-- Overlay with "Upgrade to Pro" -->
diff --git a/src/lib/components/EstimationGraph.svelte b/src/lib/components/EstimationGraph.svelte
index aca18bbc..9f537cfe 100644
--- a/src/lib/components/EstimationGraph.svelte
+++ b/src/lib/components/EstimationGraph.svelte
@@ -18,7 +18,7 @@
   <div class="shadow-sm">
     <h2 class="mb-2 text-xl font-bold">{title} Forecast</h2>
     <div class="rounded-sm border p-2 border-gray-300 dark:border-gray-600">
-      <div class="h-[360px] w-full">
+      <div class="w-full">
         {#if config !== null}
           <div use:highcharts={config}></div>
         {/if}
@@ -121,7 +121,7 @@
   <div class="shadow-sm">
     <h2 class="mb-2 text-xl font-bold">{title}</h2>
     <div class="rounded-sm border p-2 border-gray-300 dark:border-gray-600">
-      <div class="h-[360px] w-full">
+      <div class="w-full">
         {#if config !== null}
           <div use:highcharts={config}></div>
         {/if}
diff --git a/src/lib/highcharts.ts b/src/lib/highcharts.ts
index d36cb324..56bf556a 100644
--- a/src/lib/highcharts.ts
+++ b/src/lib/highcharts.ts
@@ -1,3 +1,4 @@
+
 import Highcharts from 'highcharts';
 import HighchartsMore from 'highcharts/highcharts-more'; // Add this import
 //import HighchartsAnnotations from 'highcharts/modules/annotations';
@@ -63,14 +64,16 @@ export default (node, config) => {
   createChart();
 
   // Resize observer remains the same
-  const resizeObserver = new ResizeObserver(() => {
-    if (chart) {
-      const newWidth = node.clientWidth;
-      const newHeight = 360;
-      chart?.setSize(newWidth, newHeight, false);
-    }
-  });
-  resizeObserver.observe(node);
+const resizeObserver = new ResizeObserver(() => {
+  if (chart) {
+    const newWidth = node.clientWidth;
+    // Set height based on viewport width: 300 for mobile, 360 for desktop
+    const newHeight = (node.clientWidth < 768) ? 300 : 360;
+    chart?.setSize(newWidth, newHeight, false);
+  }
+});
+resizeObserver.observe(node);
+
 
   return {
     update(newConfig) {
diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte
index 9db34eff..5fd20ca6 100644
--- a/src/routes/potus-tracker/+page.svelte
+++ b/src/routes/potus-tracker/+page.svelte
@@ -964,7 +964,7 @@
       </div>
     </div>
 
-    <p class="text-sm mb-4 mt-4">
+    <p class="text-sm sm:text-[1rem] mb-4 mt-4">
       {postContent}
     </p>
 
@@ -981,7 +981,7 @@
     <div class="flex justify-end space-x-3 mt-5">
       <label
         for="executivePostModal"
-        class="cursor-pointer px-4 py-2 rounded-lg text-sm font-medium
+        class="cursor-pointer px-4 py-1.5 rounded text-sm font-medium
             bg-blue-600 text-white sm:hover:bg-blue-700"
         tabindex="0">Close</label
       >
@@ -989,7 +989,7 @@
         href={postUrl}
         rel="noopener noreferrer"
         target="_blank"
-        class="cursor-pointer px-4 py-2 rounded-lg text-sm font-medium
+        class="cursor-pointer px-4 py-1.5 rounded text-sm font-medium
             bg-blue-600 text-white sm:hover:bg-blue-700"
         tabindex="0">Read Source</a
       >
@@ -1049,7 +1049,7 @@
       </div>
     </div>
 
-    <p class="text-sm mb-4 mt-4">
+    <p class="text-sm sm:text-[1rem] mb-4 mt-4">
       {postContent}
     </p>
 
@@ -1062,7 +1062,7 @@
     <div class="flex justify-end space-x-3 mt-5">
       <label
         for="socialPostModal"
-        class="cursor-pointer px-4 py-2 rounded-lg text-sm font-medium
+        class="cursor-pointer px-4 py-1.5 rounded text-sm font-medium
             bg-blue-600 text-white sm:hover:bg-blue-700"
         tabindex="0">Close</label
       >