ui fix

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"
         >

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" -->

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}

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(() => {
+const resizeObserver = new ResizeObserver(() => {
   if (chart) {
     const newWidth = node.clientWidth;
-      const newHeight = 360;
+    // 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);
+resizeObserver.observe(node);
+
 
   return {
     update(newConfig) {

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
       >