diff options
Diffstat (limited to 'src/lib/Utility')
| -rw-r--r-- | src/lib/Utility/html.ts | 34 |
1 files changed, 21 insertions, 13 deletions
diff --git a/src/lib/Utility/html.ts b/src/lib/Utility/html.ts index 46c7101e..3be8e1f5 100644 --- a/src/lib/Utility/html.ts +++ b/src/lib/Utility/html.ts @@ -5,20 +5,28 @@ export const nbsp = (str: string) => str.replace(/ /g, ' '); export const limitListHeight = () => { if (get(settings).displayLimitListHeight) { + let tallestList: HTMLElement | undefined; + document.querySelectorAll('.list').forEach((list) => { - const listContainerBottom = - document.querySelector('#list-container')?.getBoundingClientRect().bottom || 0; - const headerBottom = - (document.querySelector('#header')?.getBoundingClientRect().bottom || 0) * 1.5; - const offset = 1.25 + 0.275; - const offsetInPixels = - offset * parseFloat(getComputedStyle(document.documentElement).fontSize); - - ( - list as HTMLElement - ).style.maxHeight = `calc(100vh - ${listContainerBottom}px + ${headerBottom}px - ${ - offsetInPixels * 2 - }px)`; + const element = list as HTMLElement; + + element.style.height = 'auto'; + + if (element.offsetHeight > (tallestList ? tallestList.offsetHeight : 0)) + tallestList = element; }); + + if (tallestList) + tallestList.style.maxHeight = `calc(${window.innerHeight}px - ${ + document.querySelector('#header')?.getBoundingClientRect().bottom || 0 + }px - 2rem)`; } }; + +export const createHeightObserver = () => { + const observer = new ResizeObserver(() => limitListHeight()); + + document.querySelectorAll('#list-container').forEach((element) => { + observer.observe(element); + }); +}; |