don't overlap with pagination-bar on phone

.gitignore

@@ -0,0 +1,2 @@
+.idea
+dist/storage

dist/plugin.js

@@ -1,4 +1,4 @@
-exports.version = 1.3
+exports.version = 1.31
 exports.description = "Simple chat integrated in HFS"
 exports.apiRequired = 8.87
 exports.repo = "damienzonly/hfs-chat"
@@ -56,6 +56,9 @@ exports.config = {
         frontend: true
     }
 }
+exports.changelog = [
+    { "version": 1.21, "message": "fix: don't overlap with pagination-bar on phone" }
+]
 
 exports.init = async api => {
     const chatDb = await api.openDb('chat', { rewriteLater: true })

dist/public/main.js

@@ -29,6 +29,7 @@
         msg && HFS.toast(msg, 'error')
     }
 
+    const CONTAINER_CLASS = 'chat-container'
     function ChatContainer() {
         const {username} = HFS.useSnapState()
         const [m, sm] = useState('');
@@ -70,8 +71,8 @@
             if (goBottom)
                 el?.scrollTo(0, el.scrollHeight)
         }, [goBottom, msgs, collapsed])
-
-        return h('div', { className: 'chat-container' },
+        useStickyHelper()
+        return h('div', { className: CONTAINER_CLASS },
             h('div', { className: 'chat-header' },
                 h('span', {},
                     `Chat`,
@@ -134,6 +135,50 @@
         })
         return isBanned || (!anonCanRead && !anonCanWrite)? null : h(ChatContainer);
     }
+
+    // don't overlap with pagination-bar when we are in sticky mode
+    function useStickyHelper() {
+        useEffect(() => {
+            let frame = 0
+            let resizeObserver
+            const mutationObserver = new MutationObserver(update)
+            const stopResize = HFS.domOn('resize', update, { target: window })
+            mutationObserver.observe(document.body, { childList: true, subtree: true })
+            update()
+            return () => {
+                cancelAnimationFrame(frame)
+                stopResize?.()
+                mutationObserver.disconnect()
+                resizeObserver?.disconnect()
+                const paging = document.getElementById('paging')
+                if (paging) paging.style.bottom = ''
+            }
+
+            function update() {
+                frame ||= requestAnimationFrame(() => {
+                    frame = 0
+                    const chat = document.querySelector('.'+CONTAINER_CLASS)
+                    const paging = document.getElementById('paging')
+                    if (!paging) return
+                    if (!chat) {
+                        paging.style.bottom = ''
+                        return
+                    }
+                    const { position } = getComputedStyle(chat)
+                    // use the applied css position as source of truth, so js doesn't duplicate media-query rules
+                    const shouldOffsetPaging = position === 'sticky'
+                    paging.style.bottom = shouldOffsetPaging ? Math.ceil(chat.getBoundingClientRect().height) + 'px' : ''
+                    resizeObserver?.disconnect()
+                    if (window.ResizeObserver) {
+                        resizeObserver = new ResizeObserver(update)
+                        resizeObserver.observe(chat)
+                        resizeObserver.observe(paging)
+                    }
+                })
+            }
+
+        }, [])
+    }
 }