From 20ea9831336133dc80b80fa16b6ae8ca11a3c9ce Mon Sep 17 00:00:00 2001
From: nicki182 <Nicky.stru@gmail.com>
Date: Tue, 17 Mar 2026 18:31:51 +0200
Subject: [PATCH 1/6] ssr implemented and pages not breaking when reloading

---
 frontend/app/components/SearchBar.vue            |  4 ++--
 frontend/app/components/feed/Feed.vue            |  8 ++++----
 frontend/app/components/footer/FooterWebsite.vue |  4 ++--
 .../image-carousel/MediaImageCarouselFull.vue    |  2 +-
 frontend/app/components/media/map/MediaMap.vue   | 15 +++++++--------
 .../app/components/media/map/MediaMapEvent.vue   |  3 ++-
 frontend/app/components/page/PageBreadcrumbs.vue |  4 ++--
 .../app/composables/generic/useBreakpoint.ts     |  8 ++++++--
 frontend/app/composables/map/useRoutingMap.ts    |  6 +++---
 frontend/app/constants/navMenuItems.ts           |  1 -
 frontend/app/layouts/App.vue                     | 11 +++++++----
 frontend/app/pages/events/[eventId]/about.vue    |  4 ++--
 frontend/app/pages/events/[eventId]/index.vue    |  4 ++--
 .../app/pages/organizations/[orgId]/about.vue    |  4 ++--
 .../[orgId]/groups/[groupId]/about.vue           |  4 ++--
 .../[orgId]/groups/[groupId]/index.vue           |  4 ++--
 .../app/pages/organizations/[orgId]/index.vue    |  4 ++--
 frontend/app/plugins/error-watcher.ts            | 16 ++++++++++++++++
 frontend/app/stores/dev.ts                       |  9 +++++++--
 frontend/nuxt.config.ts                          |  8 ++++++--
 frontend/test/composables/useBreakpoint.spec.ts  |  6 +++---
 21 files changed, 80 insertions(+), 49 deletions(-)
 create mode 100644 frontend/app/plugins/error-watcher.ts

diff --git a/frontend/app/components/SearchBar.vue b/frontend/app/components/SearchBar.vue
index 7e997cc96..136075a26 100644
--- a/frontend/app/components/SearchBar.vue
+++ b/frontend/app/components/SearchBar.vue
@@ -110,11 +110,11 @@ const props = withDefaults(defineProps<Props>(), {
   expanded: false,
 });
 
-const localValue = ref(props.modelValue || "");
+const localValue = ref(props?.modelValue || "");
 watch(
   props,
   (newVal) => {
-    localValue.value = newVal.modelValue || "";
+    localValue.value = newVal?.modelValue || "";
   },
   { immediate: true }
 );
diff --git a/frontend/app/components/feed/Feed.vue b/frontend/app/components/feed/Feed.vue
index 91c89c376..f02fd39f7 100644
--- a/frontend/app/components/feed/Feed.vue
+++ b/frontend/app/components/feed/Feed.vue
@@ -39,12 +39,12 @@ const feedItemUrls = computed<string[]>(() => {
   }
 });
 
-const currentWidth = ref(window.innerWidth);
+const currentWidth = ref(window?.innerWidth);
 const numberOfFeedItems = ref(1);
 let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
 const updateWidth = () => {
-  currentWidth.value = window.innerWidth;
+  currentWidth.value = window?.innerWidth;
   if (currentWidth.value < BreakpointMap.SMALL) {
     numberOfFeedItems.value = 1;
   } else if (currentWidth.value < BreakpointMap.LARGE) {
@@ -66,11 +66,11 @@ const handleResize = () => {
 };
 
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window?.addEventListener?.("resize", handleResize);
   updateWidth();
 });
 
 onBeforeUnmount(() => {
-  window.removeEventListener("resize", handleResize);
+  window?.removeEventListener?.("resize", handleResize);
 });
 </script>
diff --git a/frontend/app/components/footer/FooterWebsite.vue b/frontend/app/components/footer/FooterWebsite.vue
index 4d9c79d7b..9f328a409 100644
--- a/frontend/app/components/footer/FooterWebsite.vue
+++ b/frontend/app/components/footer/FooterWebsite.vue
@@ -171,13 +171,13 @@
 </template>
 
 <script setup lang="ts">
-const currentWidth = ref(window.innerWidth);
+const currentWidth = ref(window?.innerWidth);
 const isMobileDevice = ref(false);
 let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 const localePath = useLocalePath();
 
 const updateWidth = () => {
-  currentWidth.value = window.innerWidth;
+  currentWidth.value = window?.innerWidth || 0;
   if (currentWidth.value < BreakpointMap.LARGE) {
     isMobileDevice.value = true;
   } else {
diff --git a/frontend/app/components/media/image-carousel/MediaImageCarouselFull.vue b/frontend/app/components/media/image-carousel/MediaImageCarouselFull.vue
index 56d6c6954..320230403 100644
--- a/frontend/app/components/media/image-carousel/MediaImageCarouselFull.vue
+++ b/frontend/app/components/media/image-carousel/MediaImageCarouselFull.vue
@@ -43,7 +43,7 @@ const imageUrls = ref<string[]>([]);
 watch(
   props,
   (newValue) => {
-    if (newValue.images && newValue.images.length > 0) {
+    if (newValue?.images && newValue?.images?.length > 0) {
       imageUrls.value = newValue.images.map(
         (image: ContentImage) => `/api/${image.fileObject}`
       );
diff --git a/frontend/app/components/media/map/MediaMap.vue b/frontend/app/components/media/map/MediaMap.vue
index 62f6c72b6..b256cca3a 100644
--- a/frontend/app/components/media/map/MediaMap.vue
+++ b/frontend/app/components/media/map/MediaMap.vue
@@ -9,8 +9,6 @@
 <script setup lang="ts">
 import type { LayerSpecification } from "maplibre-gl";
 
-import "maplibre-gl/dist/maplibre-gl.css";
-
 const props = defineProps<{
   pointer?: Pointer;
   type: MapType;
@@ -34,12 +32,13 @@ const colorMode = useColorMode();
 const { setMapLayers, setMap } = useRouting();
 
 const isTouchDevice =
-  // Note: `maxTouchPoints` isn't recognized by TS. Safe to ignore.
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  navigator.msMaxTouchPoints > 0 ||
-  "ontouchstart" in window ||
-  navigator.maxTouchPoints > 0;
+  window &&
+  navigator &&
+  // IE/old Edge
+  (navigator?.msMaxTouchPoints > 0 ||
+    // Standard
+    "ontouchstart" in window ||
+    navigator?.maxTouchPoints > 0);
 
 // MARK: Map Layers
 
diff --git a/frontend/app/components/media/map/MediaMapEvent.vue b/frontend/app/components/media/map/MediaMapEvent.vue
index 2ec1b7444..f2b352f2b 100644
--- a/frontend/app/components/media/map/MediaMapEvent.vue
+++ b/frontend/app/components/media/map/MediaMapEvent.vue
@@ -16,7 +16,8 @@ const locationIcon = `/icons/map/tooltip_location.png`;
 const { getEventColorByType } = useColor();
 
 const buildExpandedTooltip = () => {
-  const root = document.createElement("div");
+  const root = document?.createElement?.("div");
+  if (!root) return null;
   root.className = "w-[220px] cursor-pointer font-sans";
 
   let tooltipClass = "";
diff --git a/frontend/app/components/page/PageBreadcrumbs.vue b/frontend/app/components/page/PageBreadcrumbs.vue
index bdb201d94..a841d65b4 100644
--- a/frontend/app/components/page/PageBreadcrumbs.vue
+++ b/frontend/app/components/page/PageBreadcrumbs.vue
@@ -79,7 +79,7 @@ import { getGroup } from "~/services/communities/group/group";
 import { getOrganization } from "~/services/communities/organization/organization";
 import { getEvent } from "~/services/event/event";
 
-const url = window.location.href;
+const url = window?.location?.href || "";
 let pageType = "";
 
 const { locales } = useI18n();
@@ -131,7 +131,7 @@ if (groupRegex.test(url)) {
 const breadcrumbs = ref<string[]>([]);
 
 function setBreadcrumbs() {
-  const url = window.location.pathname;
+  const url = window?.location?.pathname || "";
   const nonEmptySegments = getNonEmptySegmentsFromURL(url);
   breadcrumbs.value = nonEmptySegments;
 }
diff --git a/frontend/app/composables/generic/useBreakpoint.ts b/frontend/app/composables/generic/useBreakpoint.ts
index 4f7616d72..8190424ca 100644
--- a/frontend/app/composables/generic/useBreakpoint.ts
+++ b/frontend/app/composables/generic/useBreakpoint.ts
@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 import { useBreakpoints } from "@vueuse/core";
 
-const breakpoints = useBreakpoints({
+// Define your map outside, as it's just a constant
+const BREAKPOINTS_MAP = {
   sm: BreakpointMap.SMALL,
   md: BreakpointMap.MEDIUM,
   lg: BreakpointMap.LARGE,
@@ -10,12 +11,15 @@ const breakpoints = useBreakpoints({
   xxl: BreakpointMap.XXL,
   "3xl": BreakpointMap.XXXL,
   xxxl: BreakpointMap.XXXL,
-});
+};
 
 export default function useBreakpoint(
   breakpointName: MaybeRefOrGetter<
     "sm" | "md" | "lg" | "xl" | "2xl" | "xxl" | "3xl" | "xxxl"
   >
 ): Ref<boolean> {
+  // Call useBreakpoints INSIDE the composable so it runs within the Vue setup context
+  const breakpoints = useBreakpoints(BREAKPOINTS_MAP);
+
   return breakpoints.greaterOrEqual(breakpointName);
 }
diff --git a/frontend/app/composables/map/useRoutingMap.ts b/frontend/app/composables/map/useRoutingMap.ts
index c83d4756e..4859a7634 100644
--- a/frontend/app/composables/map/useRoutingMap.ts
+++ b/frontend/app/composables/map/useRoutingMap.ts
@@ -176,7 +176,7 @@ export const useRouting = () => {
           };
 
           div.addEventListener("click", updateSelectedProfile);
-          if (window.innerWidth < 768) {
+          if (window?.innerWidth < 768) {
             div.addEventListener("touchend", updateSelectedProfile);
           } else {
             document.addEventListener("keydown", (event) => {
@@ -225,7 +225,7 @@ export const useRouting = () => {
                 )
               : t("i18n.composables.use_routing_map.clear_directions_tooltip");
 
-          if (window.innerWidth >= 768 && directions.waypoints.length !== 0) {
+          if (window?.innerWidth >= 768 && directions.waypoints.length !== 0) {
             label += " [x]";
           }
 
@@ -235,7 +235,7 @@ export const useRouting = () => {
             directions.clear();
             resetDirectionsControl();
           });
-          if (window.innerWidth < 768) {
+          if (window?.innerWidth < 768) {
             div.addEventListener("touchend", () => {
               directions.clear();
               resetDirectionsControl();
diff --git a/frontend/app/constants/navMenuItems.ts b/frontend/app/constants/navMenuItems.ts
index e5a8fedc8..03fd151b5 100644
--- a/frontend/app/constants/navMenuItems.ts
+++ b/frontend/app/constants/navMenuItems.ts
@@ -1,5 +1,4 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
-import { IconMap } from "#shared/types/icon-map";
 
 export const menuItems = [
   {
diff --git a/frontend/app/layouts/App.vue b/frontend/app/layouts/App.vue
index c40a351c7..45e23134d 100644
--- a/frontend/app/layouts/App.vue
+++ b/frontend/app/layouts/App.vue
@@ -2,14 +2,17 @@
 <template>
   <NuxtLoadingIndicator color="#F0A14C" />
   <HeaderMobile />
-  <MenuMobileNavigationDropdown v-if="!aboveMediumBP" />
+  <ClientOnly>
+    <MenuMobileNavigationDropdown v-if="!aboveMediumBP" />
+  </ClientOnly>
   <slot />
-  <MenuMobileNavBar v-if="!aboveMediumBP" />
+  <ClientOnly>
+    <MenuMobileNavBar v-if="!aboveMediumBP" />
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
 const aboveMediumBP = useBreakpoint("md");
-
 const sidebar = useSidebar();
 
 onMounted(() => {
@@ -22,7 +25,7 @@ onUnmounted(() => {
 });
 
 const handleWindowSizeChange = () => {
-  if (window.innerWidth < 1280) {
+  if (window?.innerWidth < 1280) {
     sidebar.collapsed = true;
     sidebar.collapsedSwitch = true;
   }
diff --git a/frontend/app/pages/events/[eventId]/about.vue b/frontend/app/pages/events/[eventId]/about.vue
index bc1837a72..0c696fc7b 100644
--- a/frontend/app/pages/events/[eventId]/about.vue
+++ b/frontend/app/pages/events/[eventId]/about.vue
@@ -107,12 +107,12 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const windowWidth = ref(window.innerWidth);
+const windowWidth = ref(window?.innerWidth);
 
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  windowWidth.value = window.innerWidth;
+  windowWidth.value = window?.innerWidth;
   if (windowWidth.value < BreakpointMap.SMALL) {
     shareButtonLabel.value = "i18n._global.share";
   } else {
diff --git a/frontend/app/pages/events/[eventId]/index.vue b/frontend/app/pages/events/[eventId]/index.vue
index 8655809e5..6bdb4641d 100644
--- a/frontend/app/pages/events/[eventId]/index.vue
+++ b/frontend/app/pages/events/[eventId]/index.vue
@@ -80,10 +80,10 @@ eventEntry.value.forEach((entry) => {
   eventButtons.push(entry);
 });
 
-const windowWidth = ref(window.innerWidth);
+const windowWidth = ref(window?.innerWidth);
 
 const handleResize = () => {
-  windowWidth.value = window.innerWidth;
+  windowWidth.value = window?.innerWidth;
   if (windowWidth.value > BreakpointMap.SMALL) {
     const { locale } = useI18n();
     const currentRoute = useRoute();
diff --git a/frontend/app/pages/organizations/[orgId]/about.vue b/frontend/app/pages/organizations/[orgId]/about.vue
index 8b915b57d..d71cd8b79 100644
--- a/frontend/app/pages/organizations/[orgId]/about.vue
+++ b/frontend/app/pages/organizations/[orgId]/about.vue
@@ -103,11 +103,11 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const windowWidth = ref(window.innerWidth);
+const windowWidth = ref(window?.innerWidth);
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  windowWidth.value = window.innerWidth;
+  windowWidth.value = window?.innerWidth;
   if (windowWidth.value < BreakpointMap.SMALL) {
     shareButtonLabel.value = "i18n._global.share";
   } else {
diff --git a/frontend/app/pages/organizations/[orgId]/groups/[groupId]/about.vue b/frontend/app/pages/organizations/[orgId]/groups/[groupId]/about.vue
index e4d6682e8..5814898d6 100644
--- a/frontend/app/pages/organizations/[orgId]/groups/[groupId]/about.vue
+++ b/frontend/app/pages/organizations/[orgId]/groups/[groupId]/about.vue
@@ -100,11 +100,11 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const windowWidth = ref(window.innerWidth);
+const windowWidth = ref(window?.innerWidth);
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  windowWidth.value = window.innerWidth;
+  windowWidth.value = window?.innerWidth;
   if (windowWidth.value < BreakpointMap.SMALL) {
     shareButtonLabel.value = "i18n._global.share";
   } else {
diff --git a/frontend/app/pages/organizations/[orgId]/groups/[groupId]/index.vue b/frontend/app/pages/organizations/[orgId]/groups/[groupId]/index.vue
index 0278dc680..9c57c7083 100644
--- a/frontend/app/pages/organizations/[orgId]/groups/[groupId]/index.vue
+++ b/frontend/app/pages/organizations/[orgId]/groups/[groupId]/index.vue
@@ -3,10 +3,10 @@
 const { orgId } = useRoute().params;
 const { groupid } = useRoute().params;
 
-const windowWidth = ref(window.innerWidth);
+const windowWidth = ref(window?.innerWidth);
 
 const handleResize = () => {
-  windowWidth.value = window.innerWidth;
+  windowWidth.value = window?.innerWidth;
   if (windowWidth.value > BreakpointMap.SMALL) {
     const { locale } = useI18n();
     const currentRoute = useRoute();
diff --git a/frontend/app/pages/organizations/[orgId]/index.vue b/frontend/app/pages/organizations/[orgId]/index.vue
index 0e3643438..4e51931ff 100644
--- a/frontend/app/pages/organizations/[orgId]/index.vue
+++ b/frontend/app/pages/organizations/[orgId]/index.vue
@@ -79,10 +79,10 @@ organizationEntry.value.forEach((entry) => {
   organizationButtons.push(entry);
 });
 
-const windowWidth = ref(window.innerWidth);
+const windowWidth = ref(window?.innerWidth);
 
 const handleResize = () => {
-  windowWidth.value = window.innerWidth;
+  windowWidth.value = window?.innerWidth;
   if (windowWidth.value > BreakpointMap.SMALL) {
     const { locale } = useI18n();
     const currentRoute = useRoute();
diff --git a/frontend/app/plugins/error-watcher.ts b/frontend/app/plugins/error-watcher.ts
new file mode 100644
index 000000000..749ddc1f4
--- /dev/null
+++ b/frontend/app/plugins/error-watcher.ts
@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// NOTE: This plugin watches for global errors in a Nuxt application
+// and logs them to the console, it would be ideal to replace with our own logging service in the future.
+// and secondly this is temporary until SSR is properly handled in the app.
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook("app:error", (error) => {
+    // eslint-disable-next-line no-console
+    console.error("Global Nuxt error:", error);
+  });
+  nuxtApp.hook("vue:error", (error, _, info) => {
+    // eslint-disable-next-line no-console
+    console.error("Vue error:", error);
+    // eslint-disable-next-line no-console
+    console.log("Vue info:", info);
+  });
+});
diff --git a/frontend/app/stores/dev.ts b/frontend/app/stores/dev.ts
index 8d039ccd0..bf1145201 100644
--- a/frontend/app/stores/dev.ts
+++ b/frontend/app/stores/dev.ts
@@ -1,12 +1,17 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
+import { defineStore } from "pinia";
+
 export const useDevMode = defineStore("devMode", {
   state: () => ({
-    active: useLocalStorage("active", false),
+    // SSR: always false; Client: use localStorage
+    active: import.meta.server ? false : useLocalStorage("active", false),
   }),
 
   actions: {
     check() {
-      this.active = window.location.href.includes(":3000");
+      if (import.meta.client) {
+        this.active = window.location.href.includes(":3000");
+      }
     },
   },
 });
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index cdf8ae8c8..2ef24fc3c 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -20,13 +20,16 @@ export default defineNuxtConfig({
     },
   },
   modules: process.env.VITEST ? [] : modules,
-  ssr: false,
 
   devtools: {
     enabled: true,
   },
 
-  plugins: ["~/plugins/i18n-head.ts", "~/plugins/i18n-iso-countries.ts"],
+  plugins: [
+    "~/plugins/i18n-head.ts",
+    "~/plugins/i18n-iso-countries.ts",
+    "~/plugins/error-watcher.ts",
+  ],
   // Auto import services and stores.
   imports: {
     dirs: ["./constants", "./services", "./stores"],
@@ -59,6 +62,7 @@ export default defineNuxtConfig({
     "reduced-motion/css",
     "v-calendar/style.css",
     "vue-sonner/style.css",
+    "maplibre-gl/dist/maplibre-gl.css",
   ],
 
   postcss: {
diff --git a/frontend/test/composables/useBreakpoint.spec.ts b/frontend/test/composables/useBreakpoint.spec.ts
index 52b61f463..6035fd70b 100644
--- a/frontend/test/composables/useBreakpoint.spec.ts
+++ b/frontend/test/composables/useBreakpoint.spec.ts
@@ -20,19 +20,19 @@ describe("useBreakpoint composable", () => {
   });
 
   it("returns true when width matches small breakpoint", () => {
-    globalThis.window.innerWidth = 500;
+    globalThis.window?.innerWidth = 500;
     const isSmall = useBreakpoint("sm");
     expect(isSmall.value).toBe(true);
   });
 
   it("returns true when width matches medium breakpoint", () => {
-    globalThis.window.innerWidth = 800;
+    globalThis.window?.innerWidth = 800;
     const isMedium = useBreakpoint("md");
     expect(isMedium.value).toBe(true);
   });
 
   it("returns true when width matches large breakpoint", () => {
-    globalThis.window.innerWidth = 1200;
+    globalThis.window?.innerWidth = 1200;
     const isLarge = useBreakpoint("lg");
     expect(isLarge.value).toBe(true);
   });

From 31072200a152d4968759ea58d217efb5bd76efe1 Mon Sep 17 00:00:00 2001
From: nicki182 <Nicky.stru@gmail.com>
Date: Tue, 17 Mar 2026 18:51:24 +0200
Subject: [PATCH 2/6] fix build

---
 frontend/app/pages/legal/privacy-policy.vue | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 frontend/app/pages/legal/privacy-policy.vue

diff --git a/frontend/app/pages/legal/privacy-policy.vue b/frontend/app/pages/legal/privacy-policy.vue
new file mode 100644
index 000000000..60da04115
--- /dev/null
+++ b/frontend/app/pages/legal/privacy-policy.vue
@@ -0,0 +1,4 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
+<template>
+  <div>Privacy Policy</div>
+</template>

From b00b61398844bcf67cd3f24fff9df2d79d3e9589 Mon Sep 17 00:00:00 2001
From: nicki182 <Nicky.stru@gmail.com>
Date: Sat, 28 Mar 2026 16:12:24 +0300
Subject: [PATCH 3/6] fixed styling SSR on frontend

---
 frontend/app/app.vue                          |   1 -
 .../CardSearchResultEntity.vue                |  17 ++-
 .../CardSearchResultEntityEvent.vue           |   8 +-
 .../app/components/header/HeaderMobile.vue    |   7 +-
 .../app/components/header/HeaderWebsite.vue   |  53 +++++----
 frontend/app/components/image/ImageEvent.vue  |   4 +-
 .../image-carousel/MediaImageCarousel.vue     |  22 ++--
 .../app/components/menu/MenuSearchResult.vue  | 105 +++++++++--------
 .../app/components/page/PageBreadcrumbs.vue   | 107 ++++++------------
 frontend/app/layouts/App.vue                  |   9 +-
 frontend/app/layouts/event/EventList.vue      |   4 +-
 frontend/app/layouts/event/EventPage.vue      |   3 +-
 frontend/app/layouts/group/GroupPage.vue      |   3 +-
 .../layouts/organization/OrganizationList.vue |   4 +-
 .../layouts/organization/OrganizationPage.vue |   3 +-
 15 files changed, 157 insertions(+), 193 deletions(-)

diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 06f7ab9c1..be7952db0 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -1,6 +1,5 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
-  <LoadingScreen />
   <NuxtLayout>
     <Toaster :richColors="true" :theme="isDark ? 'dark' : 'light'" />
     <ModalCommandPalette :paletteData="commandPaletteData" />
diff --git a/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue b/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue
index ff718a9ae..7c75d909d 100644
--- a/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue
+++ b/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue
@@ -4,9 +4,9 @@
     class="card-style flex flex-col justify-center px-3 py-4 md:grow md:flex-row md:justify-start md:py-3 lg:px-5"
   >
     <div class="relative flex w-full flex-col md:flex-row">
-      <div class="flex w-full justify-center md:w-fit">
-        <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)">
-          <div class="h-min w-max rounded-md border border-section-div">
+      <div class="flex w-full justify-center md:w-fit shrink-0">
+        <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)" class="block">
+          <div class="h-fit w-fit rounded-md border border-section-div overflow-hidden">
             <slot :imageAlt="imageAlt" :imageUrl="imageUrl" name="image">
               <img
                 v-if="imageUrl"
@@ -26,10 +26,10 @@
           </div>
         </NuxtLink>
       </div>
-      <div class="flex-col space-y-2 pt-3 md:grow md:pl-4 md:pt-0 lg:pl-6">
+      <div class="flex-col space-y-2 pt-3 md:grow md:pl-4 md:pt-0 lg:pl-6 min-w-0">
         <div class="-mb-2 flex flex-col justify-between md:flex-row">
           <div class="flex items-center justify-center space-x-2 md:space-x-4">
-            <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)">
+            <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)" >
               <h3 class="font-bold" data-testid="group-title">
                 {{ title }}
               </h3>
@@ -40,16 +40,14 @@
             />
           </div>
           <div
-            v-if="aboveMediumBP"
-            class="flex items-center space-x-3 lg:space-x-5"
+            class="hidden md:flex items-center space-x-3 lg:space-x-5"
           >
             <slot name="desktop-meta-tags" />
           </div>
         </div>
         <div class="flex flex-col space-y-3 md:flex-row md:space-y-0">
           <div
-            v-if="!aboveMediumBP"
-            class="flex flex-col items-center justify-center space-y-1.5 pt-4"
+            class="flex flex-col items-center justify-center space-y-1.5 pt-4 md:hidden"
           >
             <slot name="mobile-meta-tags" />
           </div>
@@ -97,7 +95,6 @@ const props = defineProps<{
   isReduced?: boolean;
 }>();
 
-const aboveMediumBP = useBreakpoint("md");
 const localePath = useLocalePath();
 
 const imageSizeClass = computed(() => ({
diff --git a/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue b/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue
index 382bf9ffb..da69d7419 100644
--- a/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue
+++ b/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue
@@ -14,11 +14,11 @@
   >
     <template #image="{ imageUrl: slotImageUrl }">
       <div
-        class="flex items-center justify-center"
+        class="flex items-center justify-center shrink-0"
         :class="{
-          'h-[150px] w-[150px]': isReduced,
-          'h-[200px] w-[200px]': !isReduced,
-        }"
+      'h-28 w-28 md:h-[150px] md:w-[150px]': isReduced,
+      'h-32 w-32 md:h-[200px] md:w-[200px]': !isReduced,
+    }"
       >
         <ImageEvent
           :alt="imageAlt"
diff --git a/frontend/app/components/header/HeaderMobile.vue b/frontend/app/components/header/HeaderMobile.vue
index eee2d2f51..e53281512 100644
--- a/frontend/app/components/header/HeaderMobile.vue
+++ b/frontend/app/components/header/HeaderMobile.vue
@@ -2,9 +2,8 @@
 <template>
   <header
     id="mobile-header"
-    v-if="!aboveMediumBP"
     ref="header"
-    class="sticky top-0 z-50 h-12 w-full bg-layer-2 drop-shadow-md duration-500"
+    class="block md:hidden sticky top-0 z-50 h-12 w-full bg-layer-2 drop-shadow-md duration-500"
   >
     <div class="h-full">
       <div class="flex h-full justify-between gap-2 px-4">
@@ -54,7 +53,9 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
+import { ref } from 'vue';
+
+// 1. Removed `useBreakpoint("md")` as CSS now handles this
 
 const { userIsSignedIn } = useUser();
 
diff --git a/frontend/app/components/header/HeaderWebsite.vue b/frontend/app/components/header/HeaderWebsite.vue
index 0dda70e38..12eda01d3 100644
--- a/frontend/app/components/header/HeaderWebsite.vue
+++ b/frontend/app/components/header/HeaderWebsite.vue
@@ -10,8 +10,8 @@
       'invisible opacity-0': headerOpacity == 0,
     }"
   >
-    <!-- MARK: Mobile Header -->
-    <div id="mobile-header" v-if="!aboveMediumBP" class="flex px-4 py-3">
+    <!-- MARK: Mobile Header (Visible only on small screens) -->
+    <div id="mobile-header" class="flex md:hidden px-4 py-3">
       <div class="z-0 mx-auto">
         <div
           class="absolute left-0 top-0 z-0 flex h-full w-full items-center justify-center"
@@ -56,8 +56,9 @@
         </div>
       </SidebarRight>
     </div>
-    <!-- MARK: Desktop Header -->
-    <div id="desktop-header" v-if="aboveMediumBP" class="mx-auto py-3">
+
+    <!-- MARK: Desktop Header (Visible only on md screens and up) -->
+    <div id="desktop-header" class="hidden md:block mx-auto py-3">
       <div class="responsive-px-5 flex items-center justify-between">
         <div class="flex items-center md:space-x-4 lg:space-x-6 xl:space-x-8">
           <div class="relative z-0 h-10 w-36">
@@ -71,31 +72,36 @@
           <div class="flex items-center space-x-3 lg:space-x-4 xl:space-x-6">
             <DropdownTheme />
             <DropdownLanguage />
+
+            <!-- MARK: Desktop Buttons -->
+            <!-- Large Screens (lg and up) -->
             <BtnRouteInternal
               id="btn-sign-in-large"
-              v-if="aboveLargeBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_in_aria_label"
-              class="block"
+              class="hidden lg:block"
               :cta="true"
               fontSize="sm"
               label="i18n._global.sign_in"
               linkTo="/auth/sign-in"
             />
+            <!-- Medium Screens (md only) -->
             <BtnRouteInternal
               id="btn-sign-in-medium"
-              v-else-if="aboveMediumBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_in_aria_label"
-              class="block"
+              class="hidden md:block lg:hidden"
               :cta="true"
               fontSize="xs"
               label="i18n._global.sign_in"
               linkTo="/auth/sign-in"
             />
+
             <BtnRouteInternal
               id="btn-sign-up-large"
-              v-if="aboveLargeBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_up_aria_label"
-              class="block"
+              class="hidden lg:block"
               :cta="true"
               fontSize="sm"
               label="i18n._global.sign_up"
@@ -103,19 +109,20 @@
             />
             <BtnRouteInternal
               id="btn-sign-up-medium"
-              v-else-if="aboveMediumBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_up_aria_label"
-              class="block"
+              class="hidden md:block lg:hidden"
               :cta="true"
               fontSize="xs"
               label="i18n._global.sign_up"
               linkTo="/auth/sign-up"
             />
+
             <BtnRouteInternal
               id="btn-get-in-touch-large"
-              v-if="aboveLargeBP && !devMode.active"
+              v-if="!devMode.active"
               ariaLabel="i18n.components.header_website.support_aria_label"
-              class="block"
+              class="hidden lg:block"
               :cta="true"
               fontSize="sm"
               label="i18n._global.support"
@@ -123,9 +130,9 @@
             />
             <BtnRouteInternal
               id="btn-get-in-touch-medium"
-              v-else-if="aboveMediumBP && !devMode.active"
+              v-if="!devMode.active"
               ariaLabel="i18n.components.header_website.support_aria_label"
-              class="block"
+              class="hidden md:block lg:hidden"
               :cta="true"
               fontSize="xs"
               label="i18n._global.support"
@@ -139,16 +146,18 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
-const aboveLargeBP = useBreakpoint("lg");
+import { ref, onMounted, onUnmounted } from 'vue';
 
+// REMOVED useBreakpoint as it is now handled by CSS
 const devMode = useDevMode();
-devMode.check();
-
 const { userIsSignedIn } = useUser();
 
-const headerOpacity: Ref<number> = ref(1);
-const prevScrollY: Ref<number> = ref(0);
+onMounted(() => {
+  devMode.check();
+});
+
+const headerOpacity = ref<number>(1);
+const prevScrollY = ref<number>(0);
 
 function handleScroll() {
   const scrollY = window.scrollY;
diff --git a/frontend/app/components/image/ImageEvent.vue b/frontend/app/components/image/ImageEvent.vue
index ce3b7d842..e8bf2b827 100644
--- a/frontend/app/components/image/ImageEvent.vue
+++ b/frontend/app/components/image/ImageEvent.vue
@@ -1,14 +1,14 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <!-- Note: We want event images to be centered within their parent div and change size based on their container. -->
-  <div class="flex h-full w-full justify-center rounded-md">
+  <div class="flex h-full w-full justify-center rounded-md overflow-hidden">
     <div
       class="h-full w-[20%] rounded-l-md"
       :class="{
         'bg-action-red': eventType === 'action',
         'bg-learn-blue': eventType === 'learn',
       }"
-    ></div>
+    />
     <img
       v-if="imgUrl && imgUrl !== ''"
       :alt="alt"
diff --git a/frontend/app/components/media/image-carousel/MediaImageCarousel.vue b/frontend/app/components/media/image-carousel/MediaImageCarousel.vue
index af639bffa..c3eed5486 100644
--- a/frontend/app/components/media/image-carousel/MediaImageCarousel.vue
+++ b/frontend/app/components/media/image-carousel/MediaImageCarousel.vue
@@ -11,16 +11,16 @@
       :spaceBetween="0"
     >
       <swiper-slide
-        v-for="[idx, img] of imageUrls?.entries()"
+        v-for="[idx, img] of ( isMounted ? imageUrls?.entries(): imageUrls?.entries().take(1))"
         :key="idx"
-        class="swiper-zoom-container flex items-center justify-center bg-layer-2"
+        class="swiper-zoom-container items-center justify-center bg-layer-2 flex"
       >
         <img
           :alt="$t('i18n.components.media_image_carousel.img_alt_text')"
           class="object-cover object-center"
           :class="{
-            'h-5/6 w-5/6': props.fullscreen,
-            'h-70': !props.fullscreen,
+            'h-5/6 w-5/6': fullscreen,
+            'h-70': !fullscreen,
           }"
           :src="img"
         />
@@ -44,9 +44,9 @@
 
 <script setup lang="ts">
 import type { Swiper as SwiperInstance } from "swiper";
-
 import { register } from "swiper/element/bundle";
 
+
 interface Props {
   fullscreen: boolean;
   imageUrls: string[];
@@ -57,6 +57,9 @@ const props = defineProps<Props>();
 
 register();
 
+// MARK: State to track when SSR hydration is complete
+const isMounted = ref(false);
+
 const uploadError = ref(false);
 const currentImageId = ref<string>("");
 const { openModal: openModalUploadImageOrganization } = useModalHandlers(
@@ -65,17 +68,20 @@ const { openModal: openModalUploadImageOrganization } = useModalHandlers(
 const { openModal: openModalUploadImageGroup } = useModalHandlers(
   "ModalUploadImageGroup"
 );
+
 const handleOpenModalUploadImage = () => {
   if (props.entityType === EntityType.GROUP) openModalUploadImageGroup();
   if (props.entityType === EntityType.ORGANIZATION)
     openModalUploadImageOrganization();
 };
-// Get the swiper instance. Use this instance to listen for the slideChange event.
+
 const swiperRef = ref<{ swiper?: SwiperInstance } | null>(null);
 
 onMounted(() => {
+  // MARK: Inform the template that JS has loaded
+  isMounted.value = true;
+
   const swiperEl = swiperRef.value;
-  // Now we assert swiperRef value is a Swiper instance.
   if (swiperEl?.swiper) {
     swiperEl.swiper.on("slideChange", () => {
       const activeIndex = swiperEl?.swiper?.realIndex ?? 1;
@@ -102,4 +108,4 @@ swiper-container::part(bullet) {
 swiper-container::part(bullet-active) {
   @apply h-2 w-2 rounded-full bg-cta-orange opacity-100;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/app/components/menu/MenuSearchResult.vue b/frontend/app/components/menu/MenuSearchResult.vue
index 4250f5609..b1437f11b 100644
--- a/frontend/app/components/menu/MenuSearchResult.vue
+++ b/frontend/app/components/menu/MenuSearchResult.vue
@@ -1,70 +1,74 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
+  <!-- ADDED "relative" to the parent div so absolute tooltips anchor here -->
   <div
     ref="quickActionBtnAndMenu"
     @mouseleave="showTooltip = false"
-    class="p-2"
+    class="relative p-2"
   >
+    <!-- MARK: The Trigger Button -->
     <button
       @click="toggleTooltip"
       @keydown.shift.tab="onShiftTab"
       :aria-label="
         $t('i18n.components.menu_search_result.toggle_menu_aria_label')
       "
-      class="style-cta relative flex h-8 w-8 items-center justify-center rounded-full elem-shadow-sm md:h-6 md:w-6"
+      class="style-cta flex h-8 w-8 items-center justify-center rounded-full elem-shadow-sm md:h-6 md:w-6"
       data-testid="menu-button"
     >
       <Icon :name="IconMap.DOTS_THREE_VERTICAL" size="1.25em" />
-      <TooltipMenuSearchResultEvent
-        v-if="event"
-        v-show="showTooltip"
-        @blur="showTooltip = false"
-        @keydown.shift.tab.stop
-        @tab="onTab"
-        class="max-md:right-0 max-md:top-8 absolute lg:bottom-6 lg:left-4"
-        :event="event"
-      />
-      <TooltipMenuSearchResultOrganization
-        v-if="organization"
-        v-show="showTooltip"
-        @blur="showTooltip = false"
-        @keydown.shift.tab.stop
-        @tab="onTab"
-        class="max-md:right-0 max-md:top-8 absolute lg:bottom-6 lg:left-4"
-        :organization="organization"
-      />
-      <TooltipMenuSearchResultGroup
-        v-if="group"
-        v-show="showTooltip"
-        @blur="showTooltip = false"
-        @keydown.shift.tab.stop
-        @tab="onTab"
-        class="max-md:right-0 max-md:top-8 absolute lg:bottom-6 lg:left-4"
-        :group="group"
-      />
-      <TooltipMenuSearchResultResource
-        v-if="resource"
-        v-show="showTooltip"
-        @blur="showTooltip = false"
-        @keydown.shift.tab.stop
-        @tab="onTab"
-        class="max-md:right-0 max-md:top-8 absolute lg:bottom-6 lg:left-4"
-        :resource="resource"
-      />
-      <TooltipMenuSearchResultUser
-        v-if="user"
-        v-show="showTooltip"
-        @blur="showTooltip = false"
-        @keydown.shift.tab.stop
-        @tab="onTab"
-        class="max-md:right-0 max-md:top-8 absolute lg:bottom-6 lg:left-4"
-        :user="user"
-      />
     </button>
+    <TooltipMenuSearchResultEvent
+      v-if="event"
+      v-show="showTooltip"
+      @blur="showTooltip = false"
+      @keydown.shift.tab.stop
+      @tab="onTab"
+      class="max-md:right-0 max-md:top-8 absolute z-50 lg:bottom-6 lg:left-4"
+      :event="event"
+    />
+    <TooltipMenuSearchResultOrganization
+      v-if="organization"
+      v-show="showTooltip"
+      @blur="showTooltip = false"
+      @keydown.shift.tab.stop
+      @tab="onTab"
+      class="max-md:right-0 max-md:top-8 absolute z-50 lg:bottom-6 lg:left-4"
+      :organization="organization"
+    />
+    <TooltipMenuSearchResultGroup
+      v-if="group"
+      v-show="showTooltip"
+      @blur="showTooltip = false"
+      @keydown.shift.tab.stop
+      @tab="onTab"
+      class="max-md:right-0 max-md:top-8 absolute z-50 lg:bottom-6 lg:left-4"
+      :group="group"
+    />
+    <TooltipMenuSearchResultResource
+      v-if="resource"
+      v-show="showTooltip"
+      @blur="showTooltip = false"
+      @keydown.shift.tab.stop
+      @tab="onTab"
+      class="max-md:right-0 max-md:top-8 absolute z-50 lg:bottom-6 lg:left-4"
+      :resource="resource"
+    />
+    <TooltipMenuSearchResultUser
+      v-if="user"
+      v-show="showTooltip"
+      @blur="showTooltip = false"
+      @keydown.shift.tab.stop
+      @tab="onTab"
+      class="max-md:right-0 max-md:top-8 absolute z-50 lg:bottom-6 lg:left-4"
+      :user="user"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
 defineProps<{
   organization?: Organization;
   group?: Group;
@@ -84,13 +88,8 @@ const closeTooltip = () => {
   showTooltip.value = false;
 };
 
-onClickOutside(quickActionBtnAndMenu.value, closeTooltip);
+onClickOutside(quickActionBtnAndMenu, closeTooltip);
 
-// The functions are triggered when the Tab key is pressed on the button or tooltip elements.
-// They set `showTooltip` to false, making the tooltip invisible again.
-// NOTE: This functionality should be reviewed if new elements are added to the tooltip.
-//   - The first Btn in the tooltip should get `isLastItem = false`
-//   - The last Btn should get `isLastItem = true`
 const onTab = () => {
   closeTooltip();
 };
diff --git a/frontend/app/components/page/PageBreadcrumbs.vue b/frontend/app/components/page/PageBreadcrumbs.vue
index a841d65b4..053febedd 100644
--- a/frontend/app/components/page/PageBreadcrumbs.vue
+++ b/frontend/app/components/page/PageBreadcrumbs.vue
@@ -19,36 +19,36 @@
         </span>
         <span v-if="index !== displayBreadcrumbs.length - 1">
           <NuxtLink
-            v-if="isValidUUID(breadcrumb) && pageType == 'event'"
+            v-if="isValidUUID(breadcrumb) && pageType === 'event'"
             class="text-distinct-text focus-brand hover:text-primary-text"
             :to="makeURL(breadcrumb)"
           >
-            {{ event.name }}
+            {{ event?.name }}
           </NuxtLink>
           <NuxtLink
-            v-else-if="isValidUUID(breadcrumb) && pageType == 'organization'"
+            v-else-if="isValidUUID(breadcrumb) && pageType === 'organization'"
             class="text-distinct-text focus-brand hover:text-primary-text"
             :to="makeURL(breadcrumb)"
           >
-            {{ organization.name }}
+            {{ organization?.name }}
           </NuxtLink>
           <NuxtLink
             v-else-if="
-              isValidUUID(breadcrumb) && pageType == 'group' && index == 1
+              isValidUUID(breadcrumb) && pageType === 'group' && index === 1
             "
             class="text-distinct-text focus-brand hover:text-primary-text"
             :to="makeURL(breadcrumb)"
           >
-            {{ group.org.name }}
+            {{ group?.org?.name }}
           </NuxtLink>
           <NuxtLink
             v-else-if="
-              isValidUUID(breadcrumb) && pageType == 'group' && index == 3
+              isValidUUID(breadcrumb) && pageType === 'group' && index === 3
             "
             class="text-distinct-text focus-brand hover:text-primary-text"
             :to="makeURL(breadcrumb)"
           >
-            {{ group.name }}
+            {{ group?.name }}
           </NuxtLink>
           <NuxtLink
             v-else
@@ -74,76 +74,42 @@
 
 <script setup lang="ts">
 import { validate as isValidUUID } from "uuid";
+import { computed } from "vue";
 
-import { getGroup } from "~/services/communities/group/group";
-import { getOrganization } from "~/services/communities/organization/organization";
-import { getEvent } from "~/services/event/event";
-
-const url = window?.location?.href || "";
-let pageType = "";
-
+const route = useRoute();
 const { locales } = useI18n();
 const localePath = useLocalePath();
 
-const paramsOrgId = useRoute().params.orgId;
-const paramsGroupId = useRoute().params.groupId;
-const paramsEventId = useRoute().params.eventId;
+const paramsOrgId = route.params.orgId;
+const paramsGroupId = route.params.groupId;
+const paramsEventId = route.params.eventId;
 
 const orgId = typeof paramsOrgId === "string" ? paramsOrgId : undefined;
 const groupId = typeof paramsGroupId === "string" ? paramsGroupId : "";
 const eventId = typeof paramsEventId === "string" ? paramsEventId : undefined;
 
-const organizationStore = useOrganizationStore();
-const groupStore = useGroupStore();
-const eventStore = useEventStore();
-
-let organization: Organization;
-let group: Group;
-let event: CommunityEvent;
-
-// Note: UUID Regex: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}.
-const organizationRegex =
-  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}.+$/;
-const groupRegex =
-  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\/groups\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}).+$/;
-const eventRegex =
-  /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/events\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}).+$/;
-
-// Note: We need to test for groups before organizations as the org test passes for groups.
-if (groupRegex.test(url)) {
-  pageType = "group";
-
-  if (groupStore.group) group = groupStore.group;
-  else group = await getGroup(groupId);
-} else if (organizationRegex.test(url)) {
-  pageType = "organization";
-
-  if (organizationStore.organization)
-    organization = organizationStore.organization;
-  else organization = await getOrganization(orgId || "");
-} else if (eventRegex.test(url)) {
-  pageType = "event";
-
-  if (eventStore.event) event = eventStore.event;
-  else event = await getEvent(eventId || "");
-}
-
-const breadcrumbs = ref<string[]>([]);
-
-function setBreadcrumbs() {
-  const url = window?.location?.pathname || "";
-  const nonEmptySegments = getNonEmptySegmentsFromURL(url);
-  breadcrumbs.value = nonEmptySegments;
-}
-
-function getNonEmptySegmentsFromURL(url: string) {
-  const segments = url.split("/");
-  const nonEmptySegments = segments.filter((segment) => segment);
-  return nonEmptySegments;
-}
+const { data: organization } = useGetOrganization(orgId || "");
+const { data: group } = useGetGroup(groupId);
+const { data: event } = useGetEvent(eventId || "");
+
+// MARK: Compute pageType dynamically based on route path (SSR Safe)
+const pageType = computed(() => {
+  const path = route.path;
+  // Checking path segments is safer and works flawlessly on the server
+  if (path.includes("/groups/")) {
+    return "group";
+  } else if (path.includes("/organizations/")) {
+    return "organization";
+  } else if (path.includes("/events/")) {
+    return "event";
+  }
+  return "";
+});
 
-onMounted(() => {
-  setBreadcrumbs();
+// MARK: Compute breadcrumbs dynamically based on route path (SSR Safe)
+const breadcrumbs = computed(() => {
+  const segments = route.path.split("/");
+  return segments.filter((segment) => segment); // Remove empty strings
 });
 
 function isLocaleSegment(segment: string) {
@@ -159,8 +125,7 @@ const displayBreadcrumbs = computed(() => {
 function makeURL(breadcrumb: string) {
   const clickedBreadcrumbIndex = breadcrumbs.value.indexOf(breadcrumb);
   const segmentsForURL = breadcrumbs.value.slice(0, clickedBreadcrumbIndex + 1);
-  const url = "/" + segmentsForURL.join("/");
-  return url;
+  return "/" + segmentsForURL.join("/");
 }
 
 function capitalizeFirstLetter(string: string) {
@@ -174,4 +139,4 @@ function capitalizeFirstLetter(string: string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
   }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/app/layouts/App.vue b/frontend/app/layouts/App.vue
index 45e23134d..ee51e0481 100644
--- a/frontend/app/layouts/App.vue
+++ b/frontend/app/layouts/App.vue
@@ -2,17 +2,12 @@
 <template>
   <NuxtLoadingIndicator color="#F0A14C" />
   <HeaderMobile />
-  <ClientOnly>
-    <MenuMobileNavigationDropdown v-if="!aboveMediumBP" />
-  </ClientOnly>
+    <MenuMobileNavigationDropdown class="block md:hidden" />
   <slot />
-  <ClientOnly>
-    <MenuMobileNavBar v-if="!aboveMediumBP" />
-  </ClientOnly>
+    <MenuMobileNavBar class="block md:hidden" />
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
 const sidebar = useSidebar();
 
 onMounted(() => {
diff --git a/frontend/app/layouts/event/EventList.vue b/frontend/app/layouts/event/EventList.vue
index 3e3c378bc..30d57cb54 100644
--- a/frontend/app/layouts/event/EventList.vue
+++ b/frontend/app/layouts/event/EventList.vue
@@ -2,12 +2,11 @@
 <template>
   <NuxtLayout name="app">
     <SidebarLeft
-      v-if="aboveMediumBP"
       @blur="sidebarHover = false"
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="fixed top-0 z-20 h-screen"
+      class="hidden md:block fixed top-0 z-20 h-screen"
     />
     <div class="flex flex-col">
       <div
@@ -25,7 +24,6 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
 
 const sidebarHover = ref(false);
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
diff --git a/frontend/app/layouts/event/EventPage.vue b/frontend/app/layouts/event/EventPage.vue
index 32ed4c203..3fbd7c0c2 100644
--- a/frontend/app/layouts/event/EventPage.vue
+++ b/frontend/app/layouts/event/EventPage.vue
@@ -7,12 +7,11 @@
       :entityType="EntityType.EVENT"
     />
     <SidebarLeft
-      v-if="aboveMediumBP"
       @blur="sidebarHover = false"
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="fixed top-0 z-20 h-screen"
+      class="fixed top-0 z-20 h-screen md:block hidden"
     />
     <div class="flex flex-col">
       <div
diff --git a/frontend/app/layouts/group/GroupPage.vue b/frontend/app/layouts/group/GroupPage.vue
index 8a5d918b6..04ccebe57 100644
--- a/frontend/app/layouts/group/GroupPage.vue
+++ b/frontend/app/layouts/group/GroupPage.vue
@@ -13,12 +13,11 @@
       :entityType="EntityType.GROUP"
     />
     <SidebarLeft
-      v-if="aboveMediumBP"
       @blur="sidebarHover = false"
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="block"
+      class="hidden md:block"
     />
     <div class="flex flex-col md:h-screen md:overflow-y-scroll">
       <div
diff --git a/frontend/app/layouts/organization/OrganizationList.vue b/frontend/app/layouts/organization/OrganizationList.vue
index 194e27a9f..9f90295cc 100644
--- a/frontend/app/layouts/organization/OrganizationList.vue
+++ b/frontend/app/layouts/organization/OrganizationList.vue
@@ -7,12 +7,11 @@
     /> -->
     <!-- <ModalUploadImage @upload-complete="handleUploadComplete" /> -->
     <SidebarLeft
-      v-if="aboveMediumBP"
       @blur="sidebarHover = false"
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="fixed top-0 z-20 h-screen"
+      class="fixed top-0 z-20 h-screen md:block hidden"
     />
     <div class="flex flex-col">
       <div
@@ -30,7 +29,6 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
 
 const sidebarHover = ref(false);
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
diff --git a/frontend/app/layouts/organization/OrganizationPage.vue b/frontend/app/layouts/organization/OrganizationPage.vue
index ed63fd976..fb6e2be9b 100644
--- a/frontend/app/layouts/organization/OrganizationPage.vue
+++ b/frontend/app/layouts/organization/OrganizationPage.vue
@@ -12,12 +12,11 @@
       :entityType="EntityType.ORGANIZATION"
     />
     <SidebarLeft
-      v-if="aboveMediumBP"
       @blur="sidebarHover = false"
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="fixed top-0 z-20 h-screen"
+      class="fixed top-0 z-20 h-screen md:block hidden"
     />
     <div class="flex flex-col">
       <div

From abe5aae43d3edbe8fc9fcd4ee32030795fe8756b Mon Sep 17 00:00:00 2001
From: nicki182 <Nicky.stru@gmail.com>
Date: Sat, 28 Mar 2026 16:35:50 +0300
Subject: [PATCH 4/6] fix prettier, eslint and typecheck issues

---
 .../CardSearchResultEntity.vue                | 22 ++++++++++++-------
 .../CardSearchResultEntityEvent.vue           |  8 +++----
 .../app/components/header/HeaderMobile.vue    |  4 ++--
 .../app/components/header/HeaderWebsite.vue   |  6 ++---
 frontend/app/components/image/ImageEvent.vue  |  2 +-
 .../image-carousel/MediaImageCarousel.vue     | 10 +++++----
 .../app/components/media/map/MediaMap.vue     |  6 +----
 .../components/media/map/MediaMapEvent.vue    |  5 +++--
 .../app/components/menu/MenuSearchResult.vue  |  2 --
 .../app/components/page/PageBreadcrumbs.vue   |  2 +-
 frontend/app/layouts/App.vue                  |  4 ++--
 frontend/app/layouts/event/EventList.vue      |  3 +--
 frontend/app/layouts/event/EventPage.vue      |  4 +---
 frontend/app/layouts/group/GroupPage.vue      |  2 --
 .../layouts/organization/OrganizationList.vue |  3 +--
 .../layouts/organization/OrganizationPage.vue |  4 +---
 16 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue b/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue
index 7c75d909d..864fb0250 100644
--- a/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue
+++ b/frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue
@@ -4,9 +4,15 @@
     class="card-style flex flex-col justify-center px-3 py-4 md:grow md:flex-row md:justify-start md:py-3 lg:px-5"
   >
     <div class="relative flex w-full flex-col md:flex-row">
-      <div class="flex w-full justify-center md:w-fit shrink-0">
-        <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)" class="block">
-          <div class="h-fit w-fit rounded-md border border-section-div overflow-hidden">
+      <div class="flex w-full shrink-0 justify-center md:w-fit">
+        <NuxtLink
+          :aria-label="$t(ariaLabel)"
+          class="block"
+          :to="localePath(linkUrl)"
+        >
+          <div
+            class="h-fit w-fit overflow-hidden rounded-md border border-section-div"
+          >
             <slot :imageAlt="imageAlt" :imageUrl="imageUrl" name="image">
               <img
                 v-if="imageUrl"
@@ -26,10 +32,12 @@
           </div>
         </NuxtLink>
       </div>
-      <div class="flex-col space-y-2 pt-3 md:grow md:pl-4 md:pt-0 lg:pl-6 min-w-0">
+      <div
+        class="min-w-0 flex-col space-y-2 pt-3 md:grow md:pl-4 md:pt-0 lg:pl-6"
+      >
         <div class="-mb-2 flex flex-col justify-between md:flex-row">
           <div class="flex items-center justify-center space-x-2 md:space-x-4">
-            <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)" >
+            <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)">
               <h3 class="font-bold" data-testid="group-title">
                 {{ title }}
               </h3>
@@ -39,9 +47,7 @@
               name="menu"
             />
           </div>
-          <div
-            class="hidden md:flex items-center space-x-3 lg:space-x-5"
-          >
+          <div class="hidden items-center space-x-3 md:flex lg:space-x-5">
             <slot name="desktop-meta-tags" />
           </div>
         </div>
diff --git a/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue b/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue
index da69d7419..5032812ea 100644
--- a/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue
+++ b/frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue
@@ -14,11 +14,11 @@
   >
     <template #image="{ imageUrl: slotImageUrl }">
       <div
-        class="flex items-center justify-center shrink-0"
+        class="flex shrink-0 items-center justify-center"
         :class="{
-      'h-28 w-28 md:h-[150px] md:w-[150px]': isReduced,
-      'h-32 w-32 md:h-[200px] md:w-[200px]': !isReduced,
-    }"
+          'h-28 w-28 md:h-[150px] md:w-[150px]': isReduced,
+          'h-32 w-32 md:h-[200px] md:w-[200px]': !isReduced,
+        }"
       >
         <ImageEvent
           :alt="imageAlt"
diff --git a/frontend/app/components/header/HeaderMobile.vue b/frontend/app/components/header/HeaderMobile.vue
index e53281512..985e7d526 100644
--- a/frontend/app/components/header/HeaderMobile.vue
+++ b/frontend/app/components/header/HeaderMobile.vue
@@ -3,7 +3,7 @@
   <header
     id="mobile-header"
     ref="header"
-    class="block md:hidden sticky top-0 z-50 h-12 w-full bg-layer-2 drop-shadow-md duration-500"
+    class="sticky top-0 z-50 block h-12 w-full bg-layer-2 drop-shadow-md duration-500 md:hidden"
   >
     <div class="h-full">
       <div class="flex h-full justify-between gap-2 px-4">
@@ -53,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from "vue";
 
 // 1. Removed `useBreakpoint("md")` as CSS now handles this
 
diff --git a/frontend/app/components/header/HeaderWebsite.vue b/frontend/app/components/header/HeaderWebsite.vue
index 12eda01d3..38ec66051 100644
--- a/frontend/app/components/header/HeaderWebsite.vue
+++ b/frontend/app/components/header/HeaderWebsite.vue
@@ -11,7 +11,7 @@
     }"
   >
     <!-- MARK: Mobile Header (Visible only on small screens) -->
-    <div id="mobile-header" class="flex md:hidden px-4 py-3">
+    <div id="mobile-header" class="flex px-4 py-3 md:hidden">
       <div class="z-0 mx-auto">
         <div
           class="absolute left-0 top-0 z-0 flex h-full w-full items-center justify-center"
@@ -58,7 +58,7 @@
     </div>
 
     <!-- MARK: Desktop Header (Visible only on md screens and up) -->
-    <div id="desktop-header" class="hidden md:block mx-auto py-3">
+    <div id="desktop-header" class="mx-auto hidden py-3 md:block">
       <div class="responsive-px-5 flex items-center justify-between">
         <div class="flex items-center md:space-x-4 lg:space-x-6 xl:space-x-8">
           <div class="relative z-0 h-10 w-36">
@@ -146,7 +146,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted } from "vue";
 
 // REMOVED useBreakpoint as it is now handled by CSS
 const devMode = useDevMode();
diff --git a/frontend/app/components/image/ImageEvent.vue b/frontend/app/components/image/ImageEvent.vue
index e8bf2b827..4919ee344 100644
--- a/frontend/app/components/image/ImageEvent.vue
+++ b/frontend/app/components/image/ImageEvent.vue
@@ -1,7 +1,7 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <!-- Note: We want event images to be centered within their parent div and change size based on their container. -->
-  <div class="flex h-full w-full justify-center rounded-md overflow-hidden">
+  <div class="flex h-full w-full justify-center overflow-hidden rounded-md">
     <div
       class="h-full w-[20%] rounded-l-md"
       :class="{
diff --git a/frontend/app/components/media/image-carousel/MediaImageCarousel.vue b/frontend/app/components/media/image-carousel/MediaImageCarousel.vue
index c3eed5486..dc499d123 100644
--- a/frontend/app/components/media/image-carousel/MediaImageCarousel.vue
+++ b/frontend/app/components/media/image-carousel/MediaImageCarousel.vue
@@ -11,9 +11,11 @@
       :spaceBetween="0"
     >
       <swiper-slide
-        v-for="[idx, img] of ( isMounted ? imageUrls?.entries(): imageUrls?.entries().take(1))"
+        v-for="[idx, img] of isMounted
+          ? imageUrls?.entries()
+          : imageUrls?.entries().take(1)"
         :key="idx"
-        class="swiper-zoom-container items-center justify-center bg-layer-2 flex"
+        class="swiper-zoom-container flex items-center justify-center bg-layer-2"
       >
         <img
           :alt="$t('i18n.components.media_image_carousel.img_alt_text')"
@@ -44,8 +46,8 @@
 
 <script setup lang="ts">
 import type { Swiper as SwiperInstance } from "swiper";
-import { register } from "swiper/element/bundle";
 
+import { register } from "swiper/element/bundle";
 
 interface Props {
   fullscreen: boolean;
@@ -108,4 +110,4 @@ swiper-container::part(bullet) {
 swiper-container::part(bullet-active) {
   @apply h-2 w-2 rounded-full bg-cta-orange opacity-100;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/app/components/media/map/MediaMap.vue b/frontend/app/components/media/map/MediaMap.vue
index b256cca3a..1f3705e98 100644
--- a/frontend/app/components/media/map/MediaMap.vue
+++ b/frontend/app/components/media/map/MediaMap.vue
@@ -34,11 +34,7 @@ const { setMapLayers, setMap } = useRouting();
 const isTouchDevice =
   window &&
   navigator &&
-  // IE/old Edge
-  (navigator?.msMaxTouchPoints > 0 ||
-    // Standard
-    "ontouchstart" in window ||
-    navigator?.maxTouchPoints > 0);
+  ("ontouchstart" in window || navigator?.maxTouchPoints > 0);
 
 // MARK: Map Layers
 
diff --git a/frontend/app/components/media/map/MediaMapEvent.vue b/frontend/app/components/media/map/MediaMapEvent.vue
index f2b352f2b..c531f36b5 100644
--- a/frontend/app/components/media/map/MediaMapEvent.vue
+++ b/frontend/app/components/media/map/MediaMapEvent.vue
@@ -17,7 +17,7 @@ const { getEventColorByType } = useColor();
 
 const buildExpandedTooltip = () => {
   const root = document?.createElement?.("div");
-  if (!root) return null;
+  if (!root) return undefined;
   root.className = "w-[220px] cursor-pointer font-sans";
 
   let tooltipClass = "";
@@ -57,8 +57,9 @@ const buildExpandedTooltip = () => {
       </a>
     `;
 
-  return root;
+  return root as HTMLDivElement;
 };
+
 const pointer: Pointer = {
   id: event.id,
   color: getEventColorByType(event.type as EventType),
diff --git a/frontend/app/components/menu/MenuSearchResult.vue b/frontend/app/components/menu/MenuSearchResult.vue
index b1437f11b..76e76049e 100644
--- a/frontend/app/components/menu/MenuSearchResult.vue
+++ b/frontend/app/components/menu/MenuSearchResult.vue
@@ -67,8 +67,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
 defineProps<{
   organization?: Organization;
   group?: Group;
diff --git a/frontend/app/components/page/PageBreadcrumbs.vue b/frontend/app/components/page/PageBreadcrumbs.vue
index 053febedd..a11edfa8a 100644
--- a/frontend/app/components/page/PageBreadcrumbs.vue
+++ b/frontend/app/components/page/PageBreadcrumbs.vue
@@ -139,4 +139,4 @@ function capitalizeFirstLetter(string: string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/app/layouts/App.vue b/frontend/app/layouts/App.vue
index ee51e0481..acb92ac6c 100644
--- a/frontend/app/layouts/App.vue
+++ b/frontend/app/layouts/App.vue
@@ -2,9 +2,9 @@
 <template>
   <NuxtLoadingIndicator color="#F0A14C" />
   <HeaderMobile />
-    <MenuMobileNavigationDropdown class="block md:hidden" />
+  <MenuMobileNavigationDropdown class="block md:hidden" />
   <slot />
-    <MenuMobileNavBar class="block md:hidden" />
+  <MenuMobileNavBar class="block md:hidden" />
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/app/layouts/event/EventList.vue b/frontend/app/layouts/event/EventList.vue
index 30d57cb54..ba865da0a 100644
--- a/frontend/app/layouts/event/EventList.vue
+++ b/frontend/app/layouts/event/EventList.vue
@@ -6,7 +6,7 @@
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="hidden md:block fixed top-0 z-20 h-screen"
+      class="fixed top-0 z-20 hidden h-screen md:block"
     />
     <div class="flex flex-col">
       <div
@@ -24,7 +24,6 @@
 </template>
 
 <script setup lang="ts">
-
 const sidebarHover = ref(false);
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
 const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } =
diff --git a/frontend/app/layouts/event/EventPage.vue b/frontend/app/layouts/event/EventPage.vue
index 3fbd7c0c2..9b4ced71e 100644
--- a/frontend/app/layouts/event/EventPage.vue
+++ b/frontend/app/layouts/event/EventPage.vue
@@ -11,7 +11,7 @@
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="fixed top-0 z-20 h-screen md:block hidden"
+      class="fixed top-0 z-20 hidden h-screen md:block"
     />
     <div class="flex flex-col">
       <div
@@ -29,8 +29,6 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
-
 const paramsEventId = useRoute().params.eventId;
 const eventId = typeof paramsEventId === "string" ? paramsEventId : undefined;
 
diff --git a/frontend/app/layouts/group/GroupPage.vue b/frontend/app/layouts/group/GroupPage.vue
index 04ccebe57..836ca634b 100644
--- a/frontend/app/layouts/group/GroupPage.vue
+++ b/frontend/app/layouts/group/GroupPage.vue
@@ -36,8 +36,6 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
-
 const paramsGroupId = useRoute().params.groupId;
 const groupId = typeof paramsGroupId === "string" ? paramsGroupId : undefined;
 const { data: group } = useGetGroup(groupId ?? "");
diff --git a/frontend/app/layouts/organization/OrganizationList.vue b/frontend/app/layouts/organization/OrganizationList.vue
index 9f90295cc..2034bf864 100644
--- a/frontend/app/layouts/organization/OrganizationList.vue
+++ b/frontend/app/layouts/organization/OrganizationList.vue
@@ -11,7 +11,7 @@
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="fixed top-0 z-20 h-screen md:block hidden"
+      class="fixed top-0 z-20 hidden h-screen md:block"
     />
     <div class="flex flex-col">
       <div
@@ -29,7 +29,6 @@
 </template>
 
 <script setup lang="ts">
-
 const sidebarHover = ref(false);
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
 const { getSidebarContentDynamicClass, getSidebarFooterDynamicClass } =
diff --git a/frontend/app/layouts/organization/OrganizationPage.vue b/frontend/app/layouts/organization/OrganizationPage.vue
index fb6e2be9b..e95a54921 100644
--- a/frontend/app/layouts/organization/OrganizationPage.vue
+++ b/frontend/app/layouts/organization/OrganizationPage.vue
@@ -16,7 +16,7 @@
       @focus="sidebarHover = true"
       @mouseleave="sidebarHover = false"
       @mouseover="sidebarHover = true"
-      class="fixed top-0 z-20 h-screen md:block hidden"
+      class="fixed top-0 z-20 hidden h-screen md:block"
     />
     <div class="flex flex-col">
       <div
@@ -34,8 +34,6 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
-
 const { handleCloseModal: handleCloseModalUploadImage } = useModalHandlers(
   "ModalUploadImageOrganization"
 );

From 44c15c0fb8abea5ac22bf1c3cbdf299ed5af6a39 Mon Sep 17 00:00:00 2001
From: nicki182 <Nicky.stru@gmail.com>
Date: Sat, 28 Mar 2026 19:17:20 +0300
Subject: [PATCH 5/6] fix for SSR deployment netlify

---
 frontend/nuxt.config.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 2ef24fc3c..c643ed3a2 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -24,7 +24,6 @@ export default defineNuxtConfig({
   devtools: {
     enabled: true,
   },
-
   plugins: [
     "~/plugins/i18n-head.ts",
     "~/plugins/i18n-iso-countries.ts",
@@ -112,7 +111,7 @@ export default defineNuxtConfig({
   nitro: {
     // Use node-server preset for local preview/Docker (creates .output/server/index.mjs)
     // Use netlify-static preset for Netlify deployment (creates static site)
-    preset: process.env.USE_PREVIEW === "true" ? undefined : "netlify-static",
+    preset: process.env.USE_PREVIEW === "true" ? undefined : "netlify",
   },
 
   plausible: {

From e9a69b062286439d14268e91f2e962f7a6605993 Mon Sep 17 00:00:00 2001
From: nicki182 <Nicky.stru@gmail.com>
Date: Sun, 5 Apr 2026 12:44:16 +0300
Subject: [PATCH 6/6] fix landing page first render

---
 frontend/app/components/landing/LandingSplash.vue | 9 +++++----
 frontend/app/stores/dev.ts                        | 4 +++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/landing/LandingSplash.vue b/frontend/app/components/landing/LandingSplash.vue
index fdeb09c0d..7c4cfd05b 100644
--- a/frontend/app/components/landing/LandingSplash.vue
+++ b/frontend/app/components/landing/LandingSplash.vue
@@ -13,11 +13,11 @@
     </div>
     <div class="flex justify-center">
       <div class="w-10/12 text-center">
-        <div v-if="aboveMediumBP" class="block flex-col space-y-1 xl:space-y-2">
+        <div class="hidden flex-col space-y-1 md:block xl:space-y-2">
           <h4>{{ $t("i18n.components.landing_splash.message_1") }}</h4>
           <h4>{{ $t("i18n.components.landing_splash.message_2") }}</h4>
         </div>
-        <h4 v-else>
+        <h4 class="block md:hidden">
           {{ $t("i18n.components.landing_splash.message_1") }}&nbsp;{{
             $t("i18n.components.landing_splash.message_2")
           }}
@@ -59,7 +59,8 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
 const devMode = useDevMode();
-devMode.check();
+onMounted(() => {
+  devMode.check();
+});
 </script>
diff --git a/frontend/app/stores/dev.ts b/frontend/app/stores/dev.ts
index bf1145201..df02108a7 100644
--- a/frontend/app/stores/dev.ts
+++ b/frontend/app/stores/dev.ts
@@ -4,14 +4,16 @@ import { defineStore } from "pinia";
 export const useDevMode = defineStore("devMode", {
   state: () => ({
     // SSR: always false; Client: use localStorage
-    active: import.meta.server ? false : useLocalStorage("active", false),
+    active: import.meta.env.DEV,
   }),
 
   actions: {
     check() {
       if (import.meta.client) {
         this.active = window.location.href.includes(":3000");
+        return;
       }
+      this.active = import.meta.env.DEV;
     },
   },
 });