(function() {
"use strict";
const createStyleElement = () => {
console.log("Creating new style element");
const style = document.createElement("style");
style.id = "dynamic-styles";
style.textContent = `
/* Remove left gray area */
.p-body-inner {
padding-left: 10px !important;
margin-left: 0 !important;
}
/* Double the right gray area */
.p-body-inner {
padding-right: calc(var(--columnPadding) * 4) !important;
}
/* Shift the content to the left */
.p-body-inner {
transform: translateX(calc(var(--columnPadding) * -1));
}
/* Adjust the main content width */
.p-body-main {
max-width: calc(100% - var(--columnPadding) * 4) !important;
}
`;
console.log("New style element created:", style);
return style;
};
const getOrCreateStyleElement = () => {
console.log("Attempting to get or create style element");
let style = document.getElementById("dynamic-styles");
if (!style) {
console.log("Style element not found, creating new one");
style = createStyleElement();
document.head.appendChild(style);
console.log("New style element appended to head");
} else {
console.log("Existing style element found:", style);
}
return style;
};
const isWidthLessThan1918 = () => {
const width = window.innerWidth;
console.log("Current window width:", width);
const isLess = width < 1918;
console.log("Is width less than 1918?", isLess);
return isLess;
};
const toggleStylesBasedOnWidth = () => {
console.log("Toggling styles based on width");
const style = getOrCreateStyleElement();
const shouldEnable = isWidthLessThan1918();
style.disabled = !shouldEnable;
console.log("Style element disabled?", style.disabled);
};
window.addEventListener("load", () => {
console.log("Page loaded, running toggleStylesBasedOnWidth");
toggleStylesBasedOnWidth();
});
window.addEventListener("resize", () => {
console.log("Window resized, running toggleStylesBasedOnWidth");
toggleStylesBasedOnWidth();
});
console.log("Script loaded, running toggleStylesBasedOnWidth immediately");
toggleStylesBasedOnWidth();
const calculateAvailableSpace = () => {
const contentElement = document.querySelector(".p-body-inner");
if (!contentElement) return { width: window.innerWidth, height: window.innerHeight };
const contentRect = contentElement.getBoundingClientRect();
const availableWidth = window.innerWidth - contentRect.right;
const availableHeight = window.innerHeight;
return { width: availableWidth, height: availableHeight };
};