diff --git a/src/ts/browser-action.ts b/src/ts/browser-action.ts index 0b5756a..1439e0c 100644 --- a/src/ts/browser-action.ts +++ b/src/ts/browser-action.ts @@ -5,8 +5,20 @@ const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig"); //Using the `as any` cast here because the @types/twig package is out of date and requires `url` rather than `href` const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false} as any); +/** + * For whatever reason, Chrome puts a margin equal to the scrollbar width to the right of whatever element sets the width. Setting a negative margin equal to that width mitigates that. + * + * This is a complete hack. + */ +function fixScrollbarMargin(): void { + let html = document.querySelector("html"); + let scrollbarWidth = html.clientWidth - html.offsetWidth; + html.style.marginRight = `${(-scrollbarWidth)}px`; +} + document.addEventListener("DOMContentLoaded", () => { chrome.tabs.query({}, (tabs: chrome.tabs.Tab[]) => { document.querySelector("body").innerHTML = String(MAIN_TEMPLATE.render({tabs})); + fixScrollbarMargin(); }); });