},
splitter: {
"& > .layout-splitter": {
- width: "2px",
+ width: "3px",
},
"& > .layout-splitter-disabled": {
pointerEvents: "none",
const totalWidth: number = document.getElementsByClassName("splitter-layout")[0]?.clientWidth;
const rightPanelExpandedWidth = (totalWidth - COLLAPSE_ICON_SIZE) / (totalWidth / 100);
if (rightPanel) {
- rightPanel.setAttribute("style", `width: ${isCollapsed ? rightPanelExpandedWidth : getSplitterInitialSize()}%`);
+ rightPanel.setAttribute("style", `width: ${isCollapsed ? `calc(${rightPanelExpandedWidth}% - 1rem)` : `${getSplitterInitialSize()}%`}`);
}
const splitter = document.getElementsByClassName("layout-splitter")[0];
isCollapsed ? splitter?.classList.add("layout-splitter-disabled") : splitter?.classList.remove("layout-splitter-disabled");
export const WorkbenchPanel = withStyles(styles)((props: WorkbenchPanelProps) => {
//panel size will not scale automatically on window resize, so we do it manually
- window.addEventListener("resize", () => applyCollapsedState(props.sidePanelIsCollapsed));
+ if (props && props.sidePanelIsCollapsed) window.addEventListener("resize", () => applyCollapsedState(props.sidePanelIsCollapsed));
applyCollapsedState(props.sidePanelIsCollapsed);
return (