From 5bc88741f0af654c1fffacd0cbd6049b3c2be980 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 13 Jan 2025 17:52:05 +0100
Subject: [PATCH] ui fix

---
 src/routes/economic-calendar/+page.svelte | 37 ++++-------------------
 src/routes/reddit-tracker/+page.svelte    |  6 ++--
 2 files changed, 8 insertions(+), 35 deletions(-)

diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index 31be3ec4..8a4f7bc3 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -6,6 +6,7 @@
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   import { onMount } from "svelte";
   import { page } from "$app/stores";
@@ -828,42 +829,16 @@
                         </table>
                       </div>
                     {:else}
-                      <div
-                        class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-[1rem]"
-                      >
-                        <svg
-                          class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 256 256"
-                          ><path
-                            fill="#fff"
-                            d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                          /></svg
-                        >
-                        No Events available for the day.
-                      </div>
+                      <Infobox text="No Events available for the day." />
                     {/if}
                   {/if}
                 {/each}
-
-                <div
-                  class="w-full text-white text-start p-3 sm:p-5 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-                >
-                  <svg
-                    class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 256 256"
-                    ><path
-                      fill="#fff"
-                      d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                    /></svg
-                  >
-
-                  Stocknear's Economic Calendar displays the latest and upcoming
+                <Infobox
+                  text="Stocknear's Economic Calendar displays the latest and upcoming
                   economic events that may impact various assets, regions, and
                   global markets — including stocks, Forex, and bonds. Times are
-                  shown in ET (Eastern Time).
-                </div>
+                  shown in ET (Eastern Time)."
+                />
               </div>
             </div>
           </div>
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index 72716937..0ac2bbf4 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -494,7 +494,7 @@
                   </div>
                 </div>
               </Lazy>
-              <Card.Root class="order-0 overflow-x-scroll no-scrollbar">
+              <Card.Root class="order-0 overflow-x-auto no-scrollbar">
                 <Card.Header>
                   <div
                     class="text-start text-xl w-full flex flex-col sm:flex-row items-start sm:items-center mb-3"
@@ -505,9 +505,7 @@
                       >Updated {formattedDate}</span
                     >
                   </div>
-                  <nav
-                    class="border-b-[2px] overflow-x-scroll whitespace-nowrap"
-                  >
+                  <nav class="border-b-[2px] overflow-x-auto whitespace-nowrap">
                     <ul
                       class="flex flex-row items-center w-full text-sm sm:text-[1rem] text-white"
                     >