Added mobile friendly display to the training reports page

ui/src/App.vue

@@ -6,8 +6,11 @@
   import AlertDescription from './components/ui/alert/AlertDescription.vue';
   import Navbar from './components/Navigation/Navbar.vue';
   import { cancelLOA } from './api/loa';
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
 
   const userStore = useUserStore();
+  const headerRef = ref<HTMLDivElement | null>(null);
+  let resizeObserver: ResizeObserver | null = null;
 
   function formatDate(dateStr) {
     if (!dateStr) return "";
@@ -22,6 +25,27 @@
   const environment = import.meta.env.VITE_ENVIRONMENT;
   //@ts-ignore
   const version = import.meta.env.VITE_APPLICATION_VERSION;
+
+  function updateHeaderHeight() {
+    if (!headerRef.value) return;
+    const height = headerRef.value.offsetHeight;
+    document.documentElement.style.setProperty('--app-header-height', `${height}px`);
+  }
+
+  onMounted(() => {
+    updateHeaderHeight();
+
+    // Gracefully skip observer setup for environments that do not support ResizeObserver.
+    if (typeof ResizeObserver === 'undefined' || !headerRef.value) return;
+
+    resizeObserver = new ResizeObserver(updateHeaderHeight);
+    resizeObserver.observe(headerRef.value);
+  });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+  });
+
 </script>
 
 <template>
@@ -29,7 +53,7 @@
       background-size: contain; 
       background-attachment: fixed;
       background-position: center;">
-    <div class="sticky top-0 bg-background z-50">
+    <div class="sticky top-0 bg-background z-50" ref="headerRef">
       <Navbar class="flex"></Navbar>
       <Alert v-if="environment == 'dev'" class="m-2 mx-auto max-w-5xl" variant="info">
         <AlertDescription class="flex flex-row items-center text-wrap gap-5 mx-auto">