ui fixes

src/lib/components/Footer.svelte

@@ -6,7 +6,7 @@
 <footer
   class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto"
 >
-  <div class="container mx-auto px-3">
+  <div class="container mx-auto px-5 sm:px-3">
     <div class="w-full flex flex-col md:flex-row py-6">
       <div class="flex-1 mb-8">
         <div class="flex flex-row items-center mt-4">
@@ -17,7 +17,7 @@
             class="flex flex-row items-center"
           >
             <svg
-              class="w-6 h-6 ml-4"
+              class="w-6 h-6"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
               ><path

src/routes/economic-calendar/+page.svelte

@@ -1,12 +1,5 @@
 <script lang="ts">
-  import {
+  import { format, startOfWeek, addDays, addWeeks, subWeeks } from "date-fns";
-    format,
-    startOfWeek,
-    addDays,
-    addWeeks,
-    subWeeks,
-    differenceInWeeks,
-  } from "date-fns";
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { abbreviateNumber, listOfRelevantCountries } from "$lib/utils";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
@@ -21,7 +14,7 @@
   let weekdayFiltered = [];
   let syncWorker: Worker | undefined;
 
-  const maxWeeksChange = 4;
+  const maxWeeksChange = 6;
   const today = new Date();
   let currentWeek = startOfWeek(today, { weekStartsOn: 1 });
   let previousMax = false;
@@ -34,8 +27,20 @@
   $: formattedWeekday = daysOfWeek.map((day) => format(day.date, "EEE, MMM d"));
   $: weekday = getWeekdayData(economicCalendar, daysOfWeek);
   $: rawData = weekday;
-  $: previousMax = differenceInWeeks(currentWeek, today) <= -maxWeeksChange;
+
-  $: nextMax = differenceInWeeks(currentWeek, today) >= maxWeeksChange;
+  // Calculate start and end boundaries
+  const startBoundary = subWeeks(
+    startOfWeek(today, { weekStartsOn: 1 }),
+    maxWeeksChange,
+  );
+  const endBoundary = addWeeks(
+    startOfWeek(today, { weekStartsOn: 1 }),
+    maxWeeksChange,
+  );
+
+  // Update max checks based on boundaries
+  $: previousMax = currentWeek <= startBoundary;
+  $: nextMax = currentWeek >= endBoundary;
 
   let currentDate = new Date();
   let selectedWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
@@ -90,10 +95,15 @@
   }
 
   function changeWeek(state) {
-    currentWeek =
+    const newWeek =
       state === "previous"
         ? subWeeks(currentWeek, 1)
         : addWeeks(currentWeek, 1);
+
+    // Only update if within boundaries
+    if (newWeek >= startBoundary && newWeek <= endBoundary) {
+      currentWeek = newWeek;
+    }
   }
 
   onMount(async () => {
@@ -115,7 +125,6 @@
         testList =
           rawList?.filter((item) => {
             const index = item?.toLowerCase();
-            // Check if country starts with searchQuery
             return index?.startsWith(searchQuery);
           }) || [];
       }
@@ -150,11 +159,13 @@
     formattedWeekday = daysOfWeek.map((day) => format(day.date, "EEE, MMM d"));
     weekday = getWeekdayData(economicCalendar, daysOfWeek);
     rawData = weekday;
-    previousMax = differenceInWeeks(currentWeek, today) <= -maxWeeksChange;
-    nextMax = differenceInWeeks(currentWeek, today) >= maxWeeksChange;
 
     currentWeek = startOfWeek(today, { weekStartsOn: 1 });
     selectedWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
+
+    // Reset max checks based on boundaries
+    previousMax = currentWeek <= startBoundary;
+    nextMax = currentWeek >= endBoundary;
   }
 </script>