navbar V2 hell yeah

ui/package-lock.json

@@ -22,7 +22,7 @@
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.539.0",
         "pinia": "^3.0.3",
-        "reka-ui": "^2.6.0",
+        "reka-ui": "^2.6.1",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11",
         "tw-animate-css": "^1.3.6",
@@ -3333,9 +3333,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.0.tgz",
-      "integrity": "sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.1.tgz",
+      "integrity": "sha512-XK7cJDQoNuGXfCNzBBo/81Yg/OgjPwvbabnlzXG2VsdSgNsT6iIkuPBPr+C0Shs+3bb0x0lbPvgQAhMSCKm5Ww==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",

ui/package.json

@@ -26,7 +26,7 @@
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.539.0",
     "pinia": "^3.0.3",
-    "reka-ui": "^2.6.0",
+    "reka-ui": "^2.6.1",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.3.6",

ui/src/assets/base.css

@@ -16,8 +16,8 @@
   --secondary-foreground: oklch(0.9219 0 0);
   --muted: oklch(0.2686 0 0);
   --muted-foreground: oklch(0.7155 0 0);
-  --accent: oklch(0.4732 0.1247 46.2007);
-  --accent-foreground: oklch(0.9243 0.1151 95.7459);
+  --accent: oklch(100% 0.00011 271.152 / 0.253);
+  --accent-foreground: oklch(100% 0.00011 271.152);
   --destructive: oklch(0.6368 0.2078 25.3313);
   --destructive-foreground: oklch(1.0000 0 0);
   --success: oklch(66.104% 0.16937 144.153);
@@ -52,7 +52,7 @@
   --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.35);
 }
 
-.dark {
+/* .dark {
   --background: oklch(0.2046 0 0);
   --foreground: oklch(0.9219 0 0);
   --card: oklch(23.075% 0.00003 271.152);
@@ -99,7 +99,7 @@
   --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.14), 0px 4px 6px -2px hsl(0 0% 0% / 0.14);
   --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.14), 0px 8px 10px -2px hsl(0 0% 0% / 0.14);
   --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.35);
-}
+} */
 
 
 @theme inline {

ui/src/components/Navigation/Navbar.vue

@@ -10,7 +10,13 @@ import {
 } from '../ui/dropdown-menu';
 import { useUserStore } from '@/stores/user';
 import Button from '../ui/button/Button.vue';
-
+import NavigationMenu from '../ui/navigation-menu/NavigationMenu.vue';
+import NavigationMenuList from '../ui/navigation-menu/NavigationMenuList.vue';
+import NavigationMenuItem from '../ui/navigation-menu/NavigationMenuItem.vue';
+import NavigationMenuLink from '../ui/navigation-menu/NavigationMenuLink.vue';
+import NavigationMenuTrigger from '../ui/navigation-menu/NavigationMenuTrigger.vue';
+import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.vue';
+import { navigationMenuTriggerStyle } from '../ui/navigation-menu/'
 
 const userStore = useUserStore();
 
@@ -21,59 +27,117 @@ async function logout() {
     userStore.user = null;
     window.location.href = APIHOST + "/logout";
 }
+
+function blurAfter() {
+    requestAnimationFrame(() => {
+        (document.activeElement as HTMLElement)?.blur();
+    });
+}
 </script>
 
 <template>
     <div class="w-full border-b">
-        <div class="max-w-screen-xl mx-auto flex items-center justify-between px-10">
-            <div class="flex items-center">
+        <div class="max-w-screen-3xl w-full mx-auto flex items-center justify-between pr-10 pl-7">
+            <!-- left side -->
+            <div class="flex items-center gap-7">
                 <RouterLink to="/">
-                    <Button variant="link">Home</Button>
+                    <img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
                 </RouterLink>
                 <div class="h-15 flex items-center justify-center">
-                    <RouterLink to="/calendar">
-                        <Button variant="link">Calendar</Button>
+                    <NavigationMenu>
+                        <NavigationMenuList class="gap-3">
+
+                            <!-- Calendar -->
+                            <NavigationMenuItem>
+                                <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                    <RouterLink to="/calendar" @click="blurAfter">Calendar</RouterLink>
+                                </NavigationMenuLink>
+                            </NavigationMenuItem>
+
+                            <!-- Members -->
+                            <NavigationMenuItem>
+                                <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                    <RouterLink to="/" @click="blurAfter">Documents</RouterLink>
+                                </NavigationMenuLink>
+                            </NavigationMenuItem>
+
+                            <!-- Forms (Dropdown) -->
+                            <NavigationMenuItem class="bg-none !focus:bg-none !active:bg-none">
+                                <NavigationMenuTrigger>Forms</NavigationMenuTrigger>
+                                <NavigationMenuContent
+                                    class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/transfer" @click="blurAfter">
+                                            Transfer Request
                                         </RouterLink>
-                    <RouterLink to="/members">
-                        <Button variant="link">Members</Button>
+                                    </NavigationMenuLink>
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/trainingReport" @click="blurAfter">
+                                            Training Report
                                         </RouterLink>
-                    <Popover>
-                        <PopoverTrigger as-child>
-                            <Button variant="link">Forms</Button>
-                        </PopoverTrigger>
-                        <PopoverContent class="flex flex-col gap-4 items-center w-min">
-                            <RouterLink to="/transfer">
-                                <Button variant="link">Transfer Request</Button>
+                                    </NavigationMenuLink>
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/loa" @click="blurAfter">
+                                            Submit LOA
                                         </RouterLink>
-                            <RouterLink to="/trainingReport">
-                                <Button variant="link">Training Report</Button>
+                                    </NavigationMenuLink>
+
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+
+                            <!-- Administration (Dropdown) -->
+                            <NavigationMenuItem>
+                                <NavigationMenuTrigger>Administration</NavigationMenuTrigger>
+                                <NavigationMenuContent
+                                    class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/administration/rankChange" @click="blurAfter">
+                                            Promotions
                                         </RouterLink>
-                        </PopoverContent>
-                    </Popover>
-                    <Popover>
-                        <PopoverTrigger as-child>
-                            <Button variant="link">Administration</Button>
-                        </PopoverTrigger>
-                        <PopoverContent class="flex flex-col gap-4 items-center w-min">
-                            <RouterLink to="/administration/rankChange">
-                                <Button variant="link">Promotions</Button>
+                                    </NavigationMenuLink>
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/administration/loa" @click="blurAfter">
+                                            Leave of Absence
                                         </RouterLink>
-                            <RouterLink to="/administration/loa">
-                                <Button variant="link">Leave of Absence</Button>
+                                    </NavigationMenuLink>
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/administration/transfer" @click="blurAfter">
+                                            Transfer Requests
                                         </RouterLink>
-                            <RouterLink to="/administration/transfer">
-                                <Button variant="link">Transfer Requests</Button>
+                                    </NavigationMenuLink>
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/administration/applications" @click="blurAfter">
+                                            Recruitment
                                         </RouterLink>
-                            <RouterLink to="/administration/applications">
-                                <Button variant="link">Recruitment</Button>
+                                    </NavigationMenuLink>
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/administration/roles" @click="blurAfter">
+                                            Role Management
                                         </RouterLink>
-                            <RouterLink to="/administration/roles">
-                                <Button variant="link">Role Management</Button>
+                                    </NavigationMenuLink>
+
+                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                        <RouterLink to="/members" @click="blurAfter">
+                                            Members (debug)
                                         </RouterLink>
-                        </PopoverContent>
-                    </Popover>
+                                    </NavigationMenuLink>
+
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+
+                        </NavigationMenuList>
+                    </NavigationMenu>
                 </div>
             </div>
+            <!-- right side -->
             <div>
                 <DropdownMenu v-if="userStore.isLoggedIn">
                     <DropdownMenuTrigger class="cursor-pointer">
@@ -82,11 +146,6 @@ async function logout() {
                     <DropdownMenuContent>
                         <DropdownMenuItem>My Profile</DropdownMenuItem>
                         <DropdownMenuItem>Settings</DropdownMenuItem>
-                        <DropdownMenuItem>
-                            <RouterLink to="/loa">
-                                Submit LOA
-                            </RouterLink>
-                        </DropdownMenuItem>
                         <DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>

ui/src/components/loa/loaForm.vue

@@ -101,7 +101,7 @@ function toMariaDBDatetime(date: Date): string {
 </script>
 
 <template>
-    <div class="flex flex-row-reverse gap-6 mx-auto " :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'">
+    <div class="flex flex-row-reverse gap-6 mx-auto w-full" :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'">
         <div v-if="!adminMode" class="flex-1 flex space-x-4 rounded-md border p-4">
             <div class="flex-2 space-y-1">
                 <p class="text-sm font-medium leading-none">

ui/src/components/ui/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import NavigationMenuViewport from "./NavigationMenuViewport.vue";
+
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  dir: { type: String, required: false },
+  orientation: { type: String, required: false },
+  delayDuration: { type: Number, required: false },
+  skipDelayDuration: { type: Number, required: false },
+  disableClickTrigger: { type: Boolean, required: false },
+  disableHoverTrigger: { type: Boolean, required: false },
+  disablePointerLeaveClose: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  viewport: { type: Boolean, required: false, default: true },
+});
+const emits = defineEmits(["update:modelValue"]);
+
+const delegatedProps = reactiveOmit(props, "class", "viewport");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-slot="slotProps"
+    data-slot="navigation-menu"
+    :data-viewport="viewport"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        props.class,
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+    <NavigationMenuViewport v-if="viewport" />
+  </NavigationMenuRoot>
+</template>

ui/src/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <NavigationMenuContent
+    data-slot="navigation-menu-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>

ui/src/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuIndicator, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    data-slot="navigation-menu-indicator"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        props.class,
+      )
+    "
+  >
+    <div
+      class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"
+    />
+  </NavigationMenuIndicator>
+</template>

ui/src/components/ui/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuItem } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  value: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <NavigationMenuItem
+    data-slot="navigation-menu-item"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <slot />
+  </NavigationMenuItem>
+</template>

ui/src/components/ui/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuLink, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  active: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits(["select"]);
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <NavigationMenuLink
+    data-slot="navigation-menu-link"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>

ui/src/components/ui/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuList, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NavigationMenuList
+    data-slot="navigation-menu-list"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

ui/src/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronDown } from "lucide-vue-next";
+import { NavigationMenuTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { navigationMenuTriggerStyle } from ".";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>

ui/src/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuViewport, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  align: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
+    <NavigationMenuViewport
+      data-slot="navigation-menu-viewport"
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>

ui/src/components/ui/navigation-menu/index.js

@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+
+export { default as NavigationMenu } from "./NavigationMenu.vue";
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue";
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue";
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue";
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue";
+export { default as NavigationMenuList } from "./NavigationMenuList.vue";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue";
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue";
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);

ui/src/pages/ManageApplications.vue

@@ -69,7 +69,7 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div class="mx-auto max-w-5xl">
+    <div class="mx-auto w-full max-w-5xl">
         <h1 class="my-4">Manage Applications</h1>
         <Table>
             <!-- <TableCaption>A list of your recent invoices.</TableCaption> -->

ui/src/pages/ManageTransfers.vue

@@ -68,7 +68,7 @@ onMounted(async () => {
         </DialogContent>
     </Dialog>
 
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-5xl w-full mx-auto">
         Active
         <div>
             <Card>

ui/src/pages/TrainingReport.vue

@@ -95,7 +95,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="px-20 mx-auto max-w-[100rem] flex mt-5">
+    <div class="px-20 mx-auto max-w-[100rem] w-full flex mt-5">
         <!-- training report list -->
         <div class="px-4 my-3" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
             <div class="flex justify-between mb-4">