ui fix

src/lib/components/FundamentalAnalysis.svelte

@@ -101,7 +101,7 @@ $: {
            
 
             <div class="w-full mt-5 mb-5 flex justify-start items-center">
-                <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
+                <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 gap-x-3 ">
                   <!--Start Flow Sentiment-->  
                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
                       <div class="flex flex-col items-start">

src/lib/components/KLineChart.svelte

@@ -0,0 +1,59 @@
+<script lang='ts'>
+import { onMount } from 'svelte';
+
+let chart;
+
+const options = {
+  grid: {
+    show: false,
+    horizontal: {
+      show: false,
+      size: 1,
+      color: '#EDEDED',
+      style: 'dashed',
+      dashedValue: [2, 2]
+    },
+    vertical: {
+      show: false,
+      size: 1,
+      color: '#EDEDED',
+      style: 'dashed',
+      dashedValue: [2, 2]
+    }
+  }
+};
+
+onMount(async () => {
+  const klinecharts = await import('klinecharts');
+  chart = klinecharts.init('k-line-chart', options);
+  chart.applyNewData(genData());
+});
+
+function genData(timestamp = new Date().getTime(), length = 800) {
+    let basePrice = 5000
+    timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
+    const dataList = []
+    for (let i = 0; i < length; i++) {
+      const prices = []
+      for (let j = 0; j < 4; j++) {
+        prices.push(basePrice + Math.random() * 60 - 30)
+      }
+      prices.sort()
+      const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
+      const high = +(prices[3].toFixed(2))
+      const low = +(prices[0].toFixed(2))
+      const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
+      const volume = Math.round(Math.random() * 100) + 10
+      const turnover = (open + high + low + close) / 4 * volume
+      dataList.push({ timestamp, open, high, low, close, volume, turnover })
+ 
+      basePrice = close
+      timestamp += 60 * 1000
+    }
+    return dataList
+}
+
+</script>
+
+    
+    <div id="k-line-chart" style="height:430px"/>

src/routes/market-mover/+page.svelte

@@ -176,15 +176,15 @@ function selectTimeInterval(interval) {
     }
   }
 
-let charNumber = 50;
+let charNumber = 30;
 
 $: {
   if($screenWidth < 640)
   {
-    charNumber = 20;
+    charNumber = 15;
   }
   else {
-    charNumber =50;
+    charNumber =30;
   }
 }
 
@@ -311,8 +311,8 @@ $: {
       
 
         
-      <div class="flex justify-start items-center mb-10 w-full">
+      <div class="pl-2 sm:pl-0 flex justify-start items-center mb-10 w-full">
-        <label for="timePeriodModal" class="pl-3  cursor-pointer bg-[#09090B] flex flex-row items-center">
+        <label for="timePeriodModal" class="px-4 py-3 rounded-lg cursor-pointer bg-[#27272A] flex flex-row items-center">
           <span class="text-white text-sm sm:text-md mr-2">
             Time Period: 
           </span>
@@ -336,13 +336,13 @@ $: {
     
 
 
-     
+    <div class="w-full overflow-x-scroll no-scrollbar">
       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
         <thead>
           <tr>
             <th class="text-white font-bold text-sm">Company</th>
-          <th class="text-white font-bold text-sm {$screenWidth < 640 && displaySection === 'active' ? 'hidden' : ''}">Market Cap</th>
+            <th on:click={() => console.log('mkt')} class="text-white font-bold text-sm text-end">Market Cap</th>
-          <th class="text-white font-bold text-sm {$screenWidth < 640 && displaySection !== 'active' ? 'hidden' : ''}">Volume</th>
+            <th class="text-white font-bold text-sm text-end ">Volume</th>
             <th class="text-white font-bold text-end text-sm">Today</th>
           </tr>
         </thead>
@@ -355,7 +355,7 @@ $: {
               <span class="text-blue-400 font-medium">
                 {item?.symbol}
               </span>
-            <span class="text-white text-opacity-[0.8] font-medium border-b-[#09090B]">
+              <span class="hidden sm:block text-white text-opacity-[0.8] font-medium border-b-[#09090B]">
                 {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
               </span>
             </div>
@@ -363,11 +363,11 @@ $: {
 
   
 
-        <td class="text-white font-medium border-b-[#09090B] {$screenWidth < 640 && displaySection === 'active' ? 'hidden' : ''}">
+          <td class="text-white font-medium border-b-[#09090B] text-end">
             {item?.marketCap !== null ? abbreviateNumber(item?.marketCap, true) : '-'}
           </td>
 
-        <td class="text-white font-medium border-b-[#09090B] {$screenWidth < 640 && displaySection !== 'active' ? 'hidden' : ''}">
+          <td class="text-white font-medium border-b-[#09090B] text-end">
             {item?.volume !== null ? abbreviateNumber(item?.volume) : '-'}
           </td>
 
@@ -400,6 +400,8 @@ $: {
         </tbody>
       </table>
 
+    </div>
+
 
 
 <!--