@agilemotion/oui-react-js 1.8.48 → 1.8.49

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.js

@@ -7,33 +7,34 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Utils = _interopRequireDefault(require("../../../../../Utils"));
-var _reactstrap = require("reactstrap");
 var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
-var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
 var _material = require("@mui/material");
 var _RestUtils = require("../../../../../RestUtils");
 require("./FoldingTabSidebar.css");
+var _Mail = _interopRequireDefault(require("@mui/icons-material/Mail"));
+var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*eslint-disable*/
+/* eslint-disable */
 
 const TAB = 16;
-class FoldingTabSidebar extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      ...this.getCollapseStates(props.routes),
-      isLoading: false,
-      error: false,
-      routes: undefined,
-      activeRouteMenu: {
-        id: 'dashboard',
-        name: 'Dashboard'
-      }
-    };
-  }
+function FoldingTabSidebar(props) {
+  const {
+    activeColor,
+    open,
+    appLogoPath,
+    onOpenDrawer
+  } = props;
+  const [collapseStates, setCollapseStates] = _react.default.useState(getCollapseStates(props.routes));
+  const [isLoading, setIsLoading] = _react.default.useState(false);
+  const [error, setError] = _react.default.useState(false);
+  const [routesData, setRoutesData] = _react.default.useState(undefined);
+  const [activeRouteMenu, setActiveRouteMenu] = _react.default.useState({
+    id: 'dashboard',
+    name: 'Dashboard'
+  });
 
-  /* ----------------- menu building helpers ----------------- */
-  getViews = (menus, level) => {
+  /* ----------------- helpers (ported from class) ----------------- */
+  function getViews(menus, level) {
     const newViews = [];
     for (let i = 0; i < menus.length; i++) {
       const createView = {
@@ -46,15 +47,15 @@ class FoldingTabSidebar extends _react.default.Component {
       if (menus[i].subMenu) {
         createView.collapse = true;
         createView.state = menus[i].id + 'Collapse';
-        createView.views = this.getItems(menus[i].subMenu.items, level + 1);
+        createView.views = getItems(menus[i].subMenu.items, level + 1);
       } else {
         createView.item = menus[i];
       }
       newViews.push(createView);
     }
     return newViews;
-  };
-  getItems = (items, level) => {
+  }
+  function getItems(items, level) {
     const newItems = [];
     for (let i = 0; i < items.length; i++) {
       const createItem = {
@@ -68,32 +69,32 @@ class FoldingTabSidebar extends _react.default.Component {
       if (!_Utils.default.isNull(items[i].subMenu)) {
         createItem.collapse = true;
         createItem.state = items[i].id + 'SubMenuCollapse';
-        createItem.views = this.getItems(items[i].subMenu.items, level + 1);
+        createItem.views = getItems(items[i].subMenu.items, level + 1);
       }
       newItems.push(createItem);
     }
     return newItems;
-  };
-  getCollapseStates = routes => {
+  }
+  function getCollapseStates(routes) {
     let initialState = {};
     if (routes) {
       routes.forEach(prop => {
         if (prop.collapse) {
           initialState = {
-            [prop.state]: this.getCollapseInitialState(prop.views),
-            ...this.getCollapseStates(prop.views),
+            [prop.state]: getCollapseInitialState(prop.views),
+            ...getCollapseStates(prop.views),
             ...initialState
           };
         }
       });
     }
     return initialState;
-  };
-  getCollapseInitialState(routes) {
+  }
+  function getCollapseInitialState(routes) {
     if (!routes) return false;
     for (let i = 0; i < routes.length; i++) {
       if (!routes[i].views) return true;
-      if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {
+      if (routes[i].collapse && getCollapseInitialState(routes[i].views)) {
         return true;
       } else if (window.location.href.indexOf(routes[i].path) !== -1) {
         return true;
@@ -101,7 +102,7 @@ class FoldingTabSidebar extends _react.default.Component {
     }
     return false;
   }
-  getMenu = route => new Promise(resolve => {
+  const getMenu = route => new Promise(resolve => {
     const service = {
       url: '/ui/api/v1/menu/get',
       parameters: [{
@@ -121,183 +122,257 @@ class FoldingTabSidebar extends _react.default.Component {
           return 'dashboard-sidebar';
         }
       }
-    }, 'dashboard-sidebar', result => resolve(this.getViews(result.menus, route.level + 1)), e => {
+    }, 'dashboard-sidebar', result => resolve(getViews(result.menus, route.level + 1)), e => {
       console.error(e);
       resolve(null);
     }, null);
   });
-  getLiClassName = prop => 'li-' + prop.level;
+  const activeRoute = routeName => activeRouteMenu.id === routeName;
+  const getLiClassName = prop => 'li-' + prop.level;
 
-  /* ----------------- link rendering ----------------- */
-  createLinks = routes => {
+  /* ----------------- createLinks with dynamic classes + theme colors ----------------- */
+  const createLinks = routes => {
     const {
-      secondaryThemeColor
-    } = this.props;
+      secondaryThemeColor,
+      open
+    } = props;
     return routes.map((prop, key) => {
       if (prop.redirect) return null;
-      if ((prop.collapse || prop.isParent) && prop.name !== 'Dashboard' && prop.name !== 'My Work Items') {
-        const st = {
-          [prop.state]: !this.state[prop.state]
-        };
-        return /*#__PURE__*/_react.default.createElement("li", {
-          className: prop.collapse ? this.getCollapseInitialState(prop.views) + '-' + prop.level ? 'active ' + this.getLiClassName(prop) : this.getLiClassName(prop) : this.getLiClassName(prop),
-          key: key
-        }, /*#__PURE__*/_react.default.createElement("a", {
-          href: "#pablo",
-          className: 'li-link-' + prop.level,
-          "data-toggle": "collapse",
-          style: {
-            marginLeft: (prop.level + 1) * TAB + 'px'
-          },
-          "aria-expanded": this.state[prop.state],
-          onClick: e => {
-            if (!prop.views) {
-              this.getMenu(prop).then(views => {
-                if (views) {
-                  prop.views = views;
-                  this.setState(st);
-                }
-              });
-            } else {
-              this.setState(st);
-            }
-            e.preventDefault();
+
+      // icon: use prop.icon; fallback MailIcon
+      let iconNode = null;
+      if (/*#__PURE__*/_react.default.isValidElement(prop.icon)) {
+        iconNode = prop.icon;
+      } else if (typeof prop.icon === 'string') {
+        iconNode = /*#__PURE__*/_react.default.createElement("i", {
+          className: prop.icon
+        });
+      } else {
+        iconNode = prop.level === 0 ? /*#__PURE__*/_react.default.createElement("i", {
+          className: 'fas fa-square'
+        }) : null;
+      }
+      const isActive = activeRoute(prop.id);
+      const isCollapsible = (prop.collapse || prop.isParent) && prop.name !== 'Dashboard' && prop.name !== 'My Work Items';
+      const isOpen = prop.state ? !!collapseStates[prop.state] : false;
+
+      // replicate dynamic className logic for collapsible entries
+      const collapsibleClassName = prop.collapse ? getCollapseInitialState(prop.views) ? 'active ' + getLiClassName(prop) : getLiClassName(prop) : getLiClassName(prop);
+
+      // leaf classes (include li-level)
+      const leafClassName = getLiClassName(prop) + ' ' + ('menu-link-li' + (isActive ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : ''));
+
+      // indent based on level (TAB px -> spacing units)
+      const indent = (prop.level + 1) * (TAB / 8);
+      if (isCollapsible) {
+        const isTopLevel = prop.level === 0;
+        const shouldShowTooltip = !open && isTopLevel;
+        const handleClick = e => {
+          e.preventDefault();
+
+          // If drawer is closed and this is a top-level item, ask parent to open it
+          if (!open && isTopLevel && typeof onOpenDrawer === 'function') {
+            onOpenDrawer();
           }
-        }, prop.icon !== undefined ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
-          className: prop.icon,
-          style: {
-            width: '28px'
+          const toggle = () => setCollapseStates(prev => ({
+            ...prev,
+            [prop.state]: !prev[prop.state]
+          }));
+          if (!prop.views) {
+            // lazy-load menu once
+            getMenu(prop).then(views => {
+              if (views) {
+                prop.views = views;
+                toggle();
+              }
+            });
+          } else {
+            toggle();
           }
-        }), ' ', /*#__PURE__*/_react.default.createElement("span", null, prop.name, " ", prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
-          className: "caret",
-          style: {
-            marginTop: 0
+        };
+        const button = /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
+          className: collapsibleClassName,
+          onClick: handleClick,
+          sx: {
+            pl: indent,
+            ...(isActive ? {
+              backgroundColor: (0, _material.lighten)(secondaryThemeColor, 0.9),
+              borderRadius: '16px',
+              color: secondaryThemeColor,
+              fontWeight: 500
+            } : {})
           }
-        }) : null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-          className: "sidebar-normal",
-          style: {
-            paddingLeft: '4px'
+        }, iconNode && /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, {
+          sx: {
+            minWidth: 0,
+            mr: open ? 2 : 'auto',
+            justifyContent: 'center'
+          }
+        }, iconNode), open ? /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
+          primary: /*#__PURE__*/_react.default.createElement("span", null, prop.name, ' ', prop.collapse && /*#__PURE__*/_react.default.createElement("span", {
+            className: `caret ${isOpen ? 'caret-open' : 'caret-closed'}`,
+            style: {
+              marginTop: 0
+            }
+          }))
+        }) : !iconNode ? '...' : null);
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: key
+        }, shouldShowTooltip ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+          title: prop.name,
+          placement: "right",
+          arrow: true
+        }, button) : button, prop.collapse && prop.views && /*#__PURE__*/_react.default.createElement(_material.Collapse, {
+          in: isOpen,
+          timeout: "auto",
+          unmountOnExit: true,
+          sx: {
+            pl: 0,
+            mt: 0
           }
-        }, prop.name, " ", /*#__PURE__*/_react.default.createElement("b", {
-          className: "caret"
-        })))), prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
-          isOpen: this.state[prop.state]
-        }, /*#__PURE__*/_react.default.createElement("ul", {
+        }, /*#__PURE__*/_react.default.createElement(_material.List, {
+          disablePadding: true,
           className: "nav"
-        }, this.createLinks(prop.views))) : null);
+        }, createLinks(prop.views))));
       }
-      return /*#__PURE__*/_react.default.createElement("li", {
-        className: `${'menu-link-li' + (this.activeRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')}`,
+
+      // leaf
+      return /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
         key: key,
-        style: this.activeRoute(prop.id) ? {
-          backgroundColor: (0, _material.lighten)(secondaryThemeColor, 0.9),
-          borderRadius: '16px',
-          color: secondaryThemeColor,
-          fontWeight: 500
-        } : {}
-      }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
-        config: prop.item,
-        clickCallback: prop.name === 'Dashboard' ? item => {
-          this.props.dashboardLauncher();
-          this.setState({
-            ...this.state,
-            activeRouteMenu: item
-          });
-        } : item => this.setState({
-          ...this.state,
-          activeRouteMenu: item
-        }),
-        autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
-        viewId: "menuBar",
-        icon: prop.icon,
-        iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? this.props.secondaryThemeColor : null,
-        backgroundColor: this.activeRoute(prop.id) ? (0, _material.lighten)(this.props.secondaryThemeColor, 0.9) : null,
-        name: prop.name,
-        id: prop.id,
-        level: prop.level,
-        tab: TAB,
-        color: this.activeRoute(prop.id) ? this.props.secondaryThemeColor : null
-      }));
+        className: prop.name === 'Dashboard' || prop.name === 'My Work Items' ? isActive ? 'dashboard-link-active' : 'dashboard-link' : leafClassName,
+        sx: {
+          justifyContent: open ? 'initial' : 'center',
+          px: 2.5,
+          pl: indent,
+          // theme colors when active (like original)
+          ...(isActive ? {
+            backgroundColor: (0, _material.lighten)(secondaryThemeColor, 0.9),
+            borderRadius: '16px',
+            color: secondaryThemeColor,
+            fontWeight: 500
+          } : {})
+        }
+      }, iconNode && /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, {
+        sx: {
+          minWidth: 0,
+          mr: open ? 2 : 'auto',
+          justifyContent: 'center',
+          color: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && isActive ? secondaryThemeColor : 'inherit'
+        }
+      }, iconNode), open ? /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
+        primary: /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
+          config: prop.item,
+          clickCallback: prop.name === 'Dashboard' ? item => {
+            props.dashboardLauncher && props.dashboardLauncher();
+            setActiveRouteMenu(item);
+          } : item => setActiveRouteMenu(item),
+          autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
+          viewId: "menuBar",
+          icon: prop.icon,
+          iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && isActive ? props.secondaryThemeColor : null,
+          name: prop.name,
+          id: prop.id,
+          level: prop.level,
+          tab: TAB
+        })
+      }) : !iconNode ? '...' : null);
     });
   };
-  activeRoute = routeName => this.state.activeRouteMenu.id === routeName;
 
-  /* ----------------- lifecycle ----------------- */
-  componentDidMount() {
+  /* ----------------- load filtered menu ----------------- */
+  _react.default.useEffect(() => {
+    let cancelled = false;
     const service = {
       url: '/ui/api/v1/menu/filter',
       parameters: [{
-        value: this.props.routes,
+        value: props.routes,
         httpParameterType: 'REQUEST_BODY'
       }],
       method: 'POST',
       contentType: 'application/json'
     };
+    setIsLoading(true);
+    setError(false);
     (0, _RestUtils.invokeRest)(service, {
       api: {
         get id() {
           return 'dashboard-sidebar';
         }
       }
-    }, 'dashboard-sidebar', result => this.setState({
-      ...this.state,
-      routes: result
-    }), e => console.error(e), null);
-  }
-  componentWillUnmount() {
-    /* cleanup any custom scroll plugins if you add them */
-  }
+    }, 'dashboard-sidebar', result => {
+      if (!cancelled) {
+        setRoutesData(result);
+        setIsLoading(false);
+      }
+    }, e => {
+      if (!cancelled) {
+        console.error(e);
+        setError(true);
+        setIsLoading(false);
+      }
+    }, null);
+    return () => {
+      cancelled = true;
+    };
+  }, [props.routes]);
 
   /* ----------------- render ----------------- */
-  render() {
-    const {
-      activeColor,
-      logo,
-      className,
-      heading,
-      appLogoPath
-    } = this.props;
-    const routes = this.state.routes;
-    let logoImg = null;
-    if (!_Utils.default.isNull(logo)) {
-      logoImg = /*#__PURE__*/_react.default.createElement("a", {
-        href: logo.outterLink,
-        className: "sidebar__brand",
-        onClick: this.props.closeSidebar,
-        "aria-label": "Home",
-        style: this.props.logoStyle
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        src: logo.imgSrc,
-        alt: "logo",
-        className: "sidebar__brand-img"
-      }));
-    }
-    return /*#__PURE__*/_react.default.createElement("aside", {
-      className: `${className || ''} sidebar`,
-      data: activeColor
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar__top"
-    }, logoImg ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar__logo"
-    }, logoImg) : null, !_Utils.default.isNull(heading) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar__heading"
-    }, heading) : null), /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar__scroll"
-    }, routes ? /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
-      className: "nav-wrapper"
-    }, this.createLinks(routes)) : null), /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar__bottom"
-    }, !_Utils.default.isNull(appLogoPath) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar__app-logo"
-    }, /*#__PURE__*/_react.default.createElement(_CardAvatar.default, {
-      plain: true
+  const {
+    logo
+  } = props;
+  let logoImg = null;
+  if (!_Utils.default.isNull(logo)) {
+    logoImg = /*#__PURE__*/_react.default.createElement("a", {
+      href: logo.outterLink,
+      className: "sidebar__brand",
+      onClick: props.closeSidebar,
+      "aria-label": "Home",
+      style: props.logoStyle
     }, /*#__PURE__*/_react.default.createElement("img", {
-      src: appLogoPath,
-      alt: ""
-    }))) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar__copyright"
-    }, "\xA9 ", new Date().getFullYear())));
+      src: logo.imgSrc,
+      alt: "logo",
+      className: "sidebar__brand-img"
+    }));
+  }
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-3"
+    }, /*#__PURE__*/_react.default.createElement("em", null, "Loading menu\u2026"));
+  }
+  if (error) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-3 text-danger"
+    }, /*#__PURE__*/_react.default.createElement("em", null, "Failed to load menu."));
+  }
+  if (!routesData) {
+    return null;
   }
+  return /*#__PURE__*/_react.default.createElement("aside", {
+    className: `sidebar ${!open ? 'sidebar--mini' : ''}`,
+    data: activeColor
+  }, logoImg && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar__top"
+  }, logoImg, props.heading && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar__heading"
+  }, props.heading)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar__scroll"
+  }, /*#__PURE__*/_react.default.createElement(_material.List, {
+    sx: {
+      mt: 1
+    },
+    className: "nav"
+  }, createLinks(routesData))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar__bottom"
+  }, !_Utils.default.isNull(appLogoPath) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar__app-logo"
+  }, /*#__PURE__*/_react.default.createElement(_CardAvatar.default, {
+    plain: true
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: appLogoPath,
+    alt: ""
+  }))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar__copyright"
+  }, "\xA9 ", new Date().getFullYear())));
 }
 FoldingTabSidebar.propTypes = {
   activeColor: _propTypes.default.oneOf(['primary', 'blue', 'green', 'orange', 'red', 'agility']),
@@ -316,6 +391,9 @@ FoldingTabSidebar.propTypes = {
   heading: _propTypes.default.string,
   appLogoPath: _propTypes.default.string,
   closeSidebar: _propTypes.default.func,
-  dashboardLauncher: _propTypes.default.func
+  dashboardLauncher: _propTypes.default.func,
+  logoStyle: _propTypes.default.object,
+  open: _propTypes.default.bool,
+  onOpenDrawer: _propTypes.default.func // <--- NEW
 };
 var _default = exports.default = FoldingTabSidebar;

package/dist/components/layout/View.css

@@ -1,9 +1,24 @@
 :root { --header-h: 72px; --view-header-h: 112px; --view-header-min: 112px}
 
 .view {
-    padding: 0 32px;
+    padding: 16px 8px 16px 32px;
     background-color: #ffffff;
     border-radius: 4px;
+    width: 100%;
+}
+
+.alert {
+    padding: 12px 4px !important;
+}
+
+.alert p {
+    margin-bottom: 0 !important;
+    color: #4a1117 !important;
+}
+
+.alert-danger {
+    background-color: rgb(235, 63, 33);
+    border-color: #f0737c;
 }
 
 .success-green-text,
@@ -96,7 +111,7 @@
 
     .default-oui-layout {
         margin: 8px;
-        padding: 0 !important;
+        padding: 0;
     }
 
     .oui-form-item {

package/dist/components/layout/ViewPort.js

@@ -14,6 +14,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ViewPort = props => {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const [loading, setLoading] = _react.default.useState(true);
+  const [width, setWidth] = _react.default.useState('100%');
   const confirmationDialogController = _react.default.useRef({});
   const popupViewController = _react.default.useRef({});
   const openPopupView = view => {
@@ -43,10 +44,10 @@ const ViewPort = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "viewport",
     style: {
-      height: 'calc(100vh - 96px)',
-      maxHeight: 'calc(100vh - 96px)',
+      height: 'calc(100vh - 72px)',
+      maxHeight: 'calc(100vh - 72px)',
       position: 'fixed',
-      width: props.windowPinned ? 'calc(100% - 664px)' : 'calc(100% - 348px)',
+      width: props.windowPinned ? `calc(100% - ${props.menuOffset}px - 328px - 12px)` : `calc(100% - ${props.menuOffset}px - 12px)`,
       borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_PopupView.default, {

package/dist/components/layout/Window.js

@@ -121,7 +121,7 @@ const Window = props => {
       width: 'calc(100% - ' + props.leftOffset + ' )',
       maxWidth: 'unset',
       height: 'calc(100% - 88px)',
-      margin: '8px'
+      margin: '0 8px'
     };
   };
   const getPinnedStyle = () => {
@@ -130,7 +130,7 @@ const Window = props => {
       backgroundColor: '#FFFFFF',
       width: '320px',
       height: 'calc(100% - 88px)',
-      margin: '8px'
+      margin: '0 8px'
     };
   };
   const pinView = function (e) {
@@ -142,13 +142,13 @@ const Window = props => {
           paper.style.transform = windowTransformValue;
         }
         paper.style.width = '320px';
-        paper.style.height = 'calc(100% - 96px)';
+        paper.style.height = 'calc(100% - 80px)';
         paper.style.boxShadow = 'unset';
         paper.style.borderRadius = '4px';
         paper.style.left = 'unset';
-        paper.style.right = '0';
+        paper.style.right = '4px';
         paper.style.position = 'absolute';
-        paper.style.top = '52px';
+        paper.style.top = '44px';
         paper.style.margin = '32px 0';
         paper.style.maxWidth = 'unset';
         let header = document.getElementsByClassName('dialogHeader')[0];
@@ -213,7 +213,7 @@ const Window = props => {
       paper.style.maxWidth = 'unset';
       paper.style.height = 'calc(100% - 88px)';
       paper.style.margin = '8px';
-      paper.style.right = '0';
+      paper.style.right = '4px';
       paper.style.position = 'absolute';
       paper.style.top = '72px';
       paper.style.left = (isNaN(getLeftOffset()) ? '328' : getLeftOffset()) + 'px';

package/dist/components/media/ClosablePanel.css

@@ -8,7 +8,7 @@
   height: 64px;
   text-align: right;
   padding: 8px;
-  display: inline-block;
+  display: flex;
   width: 100%;
   font-size: 24px;
   font-weight: 500;