github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-07-06 21:21:24 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

WebUI: Improve table overflow handling

Browse source 
This PR relies on flexbox to ensure all WebUI tables are the correct height without overflowing. Table headers are now always visible and JS-based dynamic resizing is no longer needed.

PR #21652.
This commit is contained in:
Thomas Piccirello 2024-11-03 00:11:30 -07:00 • committed by GitHub
parent b083029841
commit dc30b9c2ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 65 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/webui/www/private/scripts/dynamicTable.js
View file

@ -100,33 +100,6 @@ window.qBittorrent.DynamicTable ??= (() => {
tableDiv.addEventListener("scroll", () => {
tableElement.style.left = `${-tableDiv.scrollLeft}px`;
});
// if the table exists within a panel
const parentPanel = tableDiv.getParent(".panel");
if (parentPanel) {
const resizeFn = (entries) => {
const panel = entries[0].target;
let h = panel.getBoundingClientRect().height - tableFixedHeaderDiv.getBoundingClientRect().height;
tableDiv.style.height = `${h}px`;
// Workaround due to inaccurate calculation of elements heights by browser
let n = 2;
// is panel vertical scrollbar visible or does panel content not fit?
while (((panel.clientWidth !== panel.offsetWidth) || (panel.clientHeight !== panel.scrollHeight)) && (n > 0)) {
--n;
h -= 0.5;
tableDiv.style.height = `${h}px`;
}
};
const resizeDebouncer = window.qBittorrent.Misc.createDebounceHandler(100, (entries) => {
resizeFn(entries);
});
const resizeObserver = new ResizeObserver(resizeDebouncer);
resizeObserver.observe(parentPanel, { box: "border-box" });
}
},
setupHeaderEvents: function() {