cleaned up

web/src/components/AppBar.jsx

@@ -37,6 +37,7 @@ export default function AppBar({ title: Title, overflowRef, onOverflowClick }) {
 
   return (
     <div
+      id="appbar"
       className={`w-full border-b border-gray-200  dark:border-gray-700 flex items-center align-middle p-2  fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 ${
         !show ? '-translate-y-full' : 'translate-y-0'
       } ${!atZero ? 'shadow-sm' : ''}`}

web/src/index.css

@@ -36,5 +36,5 @@ Maintain aspect ratio and scale down the video container
 Could not find a proper tailwind css.
 */
 .outer-max-width {
-  max-width: 70%;
+  max-width: 60%;
 }

web/src/routes/Event.jsx

@@ -29,6 +29,14 @@ export default function Event({ eventId, close, scrollRef }) {
       scrollRef[eventId].scrollIntoView();
       setShouldScroll(false);
     }
+    return () => {
+      // When opening new event window, the previous one will sometimes cause the
+      // navbar to be visible, hence the "hide nav" code bellow.
+      // Navbar will be hided if we add the - translate - y - full class.appBar.js
+      console.log('getElementById');
+      let element = document.getElementById('appbar');
+      element.classList.add('-translate-y-full');
+    };
   }, [data, scrollRef, eventId, shouldScroll]);
 
   const handleClickDelete = () => {

web/src/routes/Events/components/tableRow.jsx

@@ -43,7 +43,7 @@ const EventsRow = memo(
 
     const start = new Date(parseInt(startTime * 1000, 10));
     const end = new Date(parseInt(endTime * 1000, 10));
-    console.log('tablerow has been rendered');
+    // console.log('tablerow has been rendered');
 
     return (
       <Tbody reference={innerRef} key={id}>

web/src/routes/Events/hooks/useClickOutside.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 
+// https://stackoverflow.com/a/54292872/2693528
 export const useOuterClick = (callback) => {
   const callbackRef = useRef(); // initialize mutable ref, which stores callback
   const innerRef = useRef(); // returned to client, who marks "border" element
@@ -15,7 +16,7 @@ export const useOuterClick = (callback) => {
     function handleClick(e) {
       if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target)) callbackRef.current(e);
     }
-  }, []); // no dependencies -> stable click listener
+  }, []);
 
   return innerRef; // convenience for client (doesn't need to init ref himself)
 };

web/src/routes/Events/index.jsx

@@ -81,7 +81,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     [apiHost, handleFilter, pathname, scrollToRef]
   );
 
-  console.log('main render');
+  // console.log('main render');
   return (
     <div className="space-y-4 w-full">
       <Heading>Events</Heading>