feat(frontend-main): improved layout overscroll ux

packages/frontend-main/src/components/posts/PostContent.vue

@@ -18,7 +18,7 @@ const youtubeLink = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full gap-2">
+  <div class="flex flex-col w-full gap-2 max-w-[calc(min(100dvw,var(--main-min-width-desktop))-5.5rem)]">
     <PostMessage :message="props.message" />
 
     <div v-if="hasImage" class="flex flex-col gap-2 cursor-default" @click.stop="() => {}">
@@ -37,7 +37,7 @@ const youtubeLink = computed(() => {
 
     <iframe
       v-if="youtubeLink"
-      class="w-full aspect-video rounded-sm"
+      class="w-full aspect-video rounded-sm max-w-[calc(100%-0.5rem)]"
       :src="youtubeLink"
       title="YouTube Video"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

packages/frontend-main/src/components/posts/PostsList.vue

@@ -5,8 +5,6 @@ import type { Post } from 'api-main/types/feed';
 import { Loader } from 'lucide-vue-next';
 import { computed } from 'vue';
 
-import { cn } from '@/utility';
-
 import Button from '../ui/button/Button.vue';
 import PostItem from './PostItem.vue';
 
@@ -17,7 +15,7 @@ const flatPosts = computed(() => data.value?.pages.flat() ?? []);
 </script>
 
 <template>
-  <div :class="cn('flex flex-col w-full box-border', flatPosts.length && 'border-t')">
+  <div class="flex flex-col w-full box-border">
     <Loader v-if="isLoading" class="animate-spin w-full mt-10" />
 
     <span v-else-if="!flatPosts.length" class="self-center mt-4 text-md font-semibold text-base">{{

packages/frontend-main/src/layouts/MainLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useMediaQuery } from '@vueuse/core';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { breakpoints } from '@/utility/breakpoints';
 
@@ -10,6 +11,43 @@ import RightPanel from './panels/RightPanel.vue';
 
 const isMobile = useMediaQuery(`(max-width: ${breakpoints.md - 1}px)`);
 const isXl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
+
+const leftSpacerRef = ref<HTMLDivElement>();
+const rightSpacerRef = ref<HTMLDivElement>();
+const leftPanelRef = ref<HTMLDivElement>();
+const rightPanelRef = ref<HTMLDivElement>();
+
+function updatePanelWidths() {
+  if (leftSpacerRef.value && leftPanelRef.value) {
+    leftPanelRef.value.style.width = `${leftSpacerRef.value.offsetWidth}px`;
+  }
+  if (rightSpacerRef.value && rightPanelRef.value) {
+    rightPanelRef.value.style.width = `${rightSpacerRef.value.offsetWidth}px`;
+  }
+}
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(async () => {
+  await nextTick();
+  updatePanelWidths();
+
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(updatePanelWidths);
+    leftSpacerRef.value && resizeObserver.observe(leftSpacerRef.value);
+    rightSpacerRef.value && resizeObserver.observe(rightSpacerRef.value);
+  } else {
+    window.addEventListener('resize', updatePanelWidths);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  } else {
+    window.removeEventListener('resize', updatePanelWidths);
+  }
+});
 </script>
 
 <template>
@@ -21,16 +59,32 @@ const isXl = useMediaQuery(`(min-width: ${breakpoints.xl}px)`);
     v-else
     class="flex flex-row justify-between"
   >
-    <div class="w-full h-[100vh] flex-1 xl:flex-auto overflow-y-auto sticky top-0">
+    <div
+      ref="leftSpacerRef"
+      class="flex-1 xl:flex-auto"
+    />
+
+    <div
+      ref="leftPanelRef"
+      class="fixed top-0 bottom-0 left-0 overflow-y-auto [overscroll-behavior:contain] md:border-r"
+    >
       <LeftPanel v-if="isXl" />
       <LeftPanelTablet v-else />
     </div>
 
-    <main class="sm:w-[var(--main-min-width-desktop)] min-w-[var(--main-min-width-desktop)] md:border-x">
+    <main class="sm:w-[var(--main-min-width-desktop)] min-w-[var(--main-min-width-desktop)]">
       <slot />
     </main>
 
-    <div class="w-full h-[100vh] flex-1 lg:flex-4 xl:flex-auto overflow-y-auto sticky top-0">
+    <div
+      ref="rightSpacerRef"
+      class="flex-1 lg:flex-4 xl:flex-auto"
+    />
+
+    <div
+      ref="rightPanelRef"
+      class="fixed top-0 bottom-0 right-0 overflow-y-auto [overscroll-behavior:contain] md:border-l"
+    >
       <RightPanel class="hidden lg:flex" />
     </div>
   </div>

packages/frontend-main/src/layouts/MainLayoutMobile.vue

@@ -4,15 +4,13 @@ import TopPanel from './panels/TopPanel.vue';
 </script>
 
 <template>
-  <div class="w-full h-mobile-panel sticky top-0 z-99">
+  <div class="w-full h-mobile-panel fixed top-0 z-99">
     <TopPanel />
   </div>
-
-  <main class="min-h-dvh flex flex-col flex-1">
+  <main class="min-h-dvh flex flex-col flex-1 my-[var(--mobile-panel-height)] overflow-x-hidden">
     <slot />
   </main>
-
-  <div class="w-full h-mobile-panel sticky bottom-0 z-99">
+  <div class="w-full h-mobile-panel fixed bottom-0 z-99">
     <BottomPanel />
   </div>
 </template>