fix: update EventGrid to remove all empty mobile titles and adjust History component's padding

Author: Aloento

src/Components/History/EventItem.tsx

@@ -117,7 +117,7 @@ export function EventItem({ Prev, Curr }: IEventItem) {
           {servicesTxt} {regionsTxt} {Curr.Type}
         </a>
 
-        <div className="flex gap-x-2.5">
+        <div className="flex gap-x-2.5 gap-y-1.5 flex-wrap">
           <ScaleTag color={color}>
             {Curr.Status}
           </ScaleTag>

src/Components/Home/EventGrid.tsx

@@ -37,10 +37,10 @@ export function EventGrid() {
                 }
               });
 
-              const mobileTitle = node.querySelector('h5.tbody__mobile-title');
-              if (mobileTitle && mobileTitle.innerHTML === ' ') {
-                mobileTitle.remove();
-              }
+              const mobileTitles = node.querySelectorAll('h5.tbody__mobile-title');
+              mobileTitles.forEach((title) => {
+                title.remove();
+              });
             }
           });
         }
@@ -151,7 +151,7 @@ export function EventGrid() {
 
   return (
     <ScaleDataGrid
-      className="rounded-lg bg-white shadow-md"
+      className="sm:rounded-lg sm:bg-white sm:shadow-md"
       pageSize={4}
       heading="Current Events"
       hideBorder

src/Pages/History.tsx

@@ -22,7 +22,7 @@ export function History() {
       </h3>
     </section>
 
-    <ol className="flex flex-col">
+    <ol className="flex flex-col pl-3 xl:pl-0">
       {chain(DB.Events)
         .orderBy(x => x.Start, "desc")
         .map((event, index, events) => [events[index - 1], event])