From 54e2afa56bc51fd37a017cae8a44fb082686ad18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 23 Apr 2023 14:21:54 +0200
Subject: [PATCH] feat(ui): use sticky position on settings mid panel (#2004)

---
 components/main/MainContent.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 3034e273..ded5d648 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -8,12 +8,23 @@ defineProps<{
   noOverflowHidden?: boolean
 }>()
 
+const container = ref()
 const route = useRoute()
+const { height: windowHeight } = useWindowSize()
+const { height: containerHeight } = useElementBounding(container)
 const wideLayout = computed(() => route.meta.wideLayout ?? false)
+const sticky = computed(() => route.path?.startsWith('/settings/'))
+const containerClass = computed(() => {
+  // we keep original behavior when not in settings page and when the window height is smaller than the container height
+  if (!isHydrated.value || !sticky.value || (windowHeight.value < containerHeight.value))
+    return null
+
+  return 'lg:sticky lg:top-0'
+})
 </script>
 
 <template>
-  <div>
+  <div ref="container" :class="containerClass">
     <div
       sticky top-0 z10 backdrop-blur
       pt="[env(safe-area-inset-top,0)]"