fix(ObjecPage): fix scrollbar width on windows

packages/base/src/index.ts

@@ -12,12 +12,13 @@ import * as sap_fiori_3 from './lib/sap_fiori_3';
 import * as spacing from './lib/spacing';
 import { StyleClassHelper } from './lib/StyleClassHelper';
 import { useConsolidatedRef } from './lib/useConsolidatedRef';
-import { deprecationNotice } from './lib/Utils';
+import { deprecationNotice, getScrollBarWidth } from './lib/Utils';
 
 export {
   StyleClassHelper,
   Optional,
   deprecationNotice,
+  getScrollBarWidth,
   Event,
   Logger,
   LOG_LEVEL,

packages/base/src/lib/Utils.ts

@@ -1,3 +1,3 @@
-import { deprecationNotice } from '../utils';
+import { deprecationNotice, getScrollBarWidth } from '../utils';
 
-export { deprecationNotice };
+export { deprecationNotice, getScrollBarWidth };

packages/base/src/utils/index.ts

@@ -4,3 +4,31 @@ export const deprecationNotice = (component: string, message: string) => {
   // eslint-disable-next-line no-console
   console.warn(`${dots}${value}${dots}${message}`);
 };
+
+export const getScrollBarWidth = () => {
+  const inner = document.createElement('p');
+  inner.style.width = '100%';
+  inner.style.height = '200px';
+
+  const outer = document.createElement('div');
+  outer.style.position = 'absolute';
+  outer.style.top = '0px';
+  outer.style.left = '0px';
+  outer.style.visibility = 'hidden';
+  outer.style.width = '200px';
+  outer.style.height = '150px';
+  outer.style.overflow = 'hidden';
+  outer.appendChild(inner);
+
+  document.body.appendChild(outer);
+  const w1 = inner.offsetWidth;
+  outer.style.overflow = 'scroll';
+  let w2 = inner.offsetWidth;
+
+  if (w1 === w2) {
+    w2 = outer.clientWidth;
+  }
+
+  document.body.removeChild(outer);
+  return w1 - w2;
+};

packages/main/src/components/ObjectPage/ObjectPage.jss.ts

@@ -59,17 +59,13 @@ const styles = ({ parameters }: JSSTheme) => ({
   },
   outerScrollbar: {
     position: 'absolute',
-    width: '12px',
     right: 0,
     overflow: 'hidden',
     height: '100%',
     zIndex: ZIndex.ResponsivePopover,
     backgroundColor: parameters.sapUiObjectHeaderBackground,
     '& ::-webkit-scrollbar': {
-      backgroundColor: '#ffffff',
-      '&:vertical': {
-        width: '0.75rem'
-      }
+      backgroundColor: '#ffffff'
     },
     '& ::-webkit-scrollbar-thumb': {
       backgroundColor: '#949494',
@@ -82,15 +78,11 @@ const styles = ({ parameters }: JSSTheme) => ({
     }
   },
   innerScrollbar: {
-    width: '24px',
-    marginLeft: '-12px',
+    width: '34px',
     overflowY: 'scroll',
     overflowX: 'hidden',
     height: '100%'
   },
-  scrollbarContent: {
-    width: '12px'
-  },
   // header
   header: {
     flexShrink: 0,
@@ -103,8 +95,7 @@ const styles = ({ parameters }: JSSTheme) => ({
         width: '3rem',
         margin: '0.25rem 1rem 0.25rem 0'
       }
-    },
-    paddingRight: '12px'
+    }
   },
   contentHeader: {
     backgroundColor: parameters.sapUiObjectHeaderBackground,

packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap

@@ -7,19 +7,22 @@ exports[`ObjectPage IconTabBar Mode 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"
@@ -288,7 +291,7 @@ exports[`ObjectPage IconTabBar Mode 1`] = `
 </div>
 `;
 
-exports[`ObjectPage Just Some Sections 1`] = `"<div class=\\"ObjectPage--outerScrollbar--2-116\\"><div class=\\"ObjectPage--innerScrollbar--2-117\\"><div class=\\"ObjectPage--scrollbarContent--2-118\\"></div></div></div><header role=\\"banner\\" aria-roledescription=\\"Object page header\\" class=\\"ObjectPage--header--2-119\\"><span class=\\"ObjectPage--actions--2-125\\"></span><header class=\\"ObjectPage--titleBar--2-121\\"><div style=\\"display:flex;align-items:center\\"><span class=\\"ObjectPage--container--2-122\\"><h1 class=\\"ObjectPage--title--2-123\\"></h1><span class=\\"ObjectPage--subTitle--2-124\\"></span></span></div></header></header><div class=\\"ObjectPage--outerContentContainer--2-111\\"><div id=\\"ObjectPageContent\\" class=\\"ObjectPage--contentContainer--2-110\\"><div class=\\"ObjectPage--contentScrollContainer--2-112\\"><div></div><div><div style=\\"position:relative\\" class=\\"ObjectPage--contentHeader--2-120\\"><div class=\\"ObjectPage--headerContent--2-128\\"></div></div><section class=\\"ObjectPage--anchorBar--2-113\\" role=\\"navigation\\"><li class=\\"ObjectPageAnchorButton--anchorButtonContainer--2-133\\"><span class=\\"ObjectPageAnchorButton--button--2-134 ObjectPageAnchorButton--selected--2-135\\"></span></li><li class=\\"ObjectPageAnchorButton--anchorButtonContainer--2-133\\"><span class=\\"ObjectPageAnchorButton--button--2-134\\"></span></li></section></div><section class=\\"ObjectPage--sectionsContainer--2-114\\"><section id=\\"ObjectPageSection-1\\" role=\\"region\\"><div role=\\"heading\\" class=\\"ObjectPageSection--header--2-136\\"><div class=\\"ObjectPageSection--title--2-137 ObjectPageSection--uppercase--2-138\\"></div></div><div class=\\"ObjectPageSection--sectionContent--2-139\\"><div class=\\"ObjectPageSection--sectionContentInner--2-140\\">Test</div></div></section></section><div class=\\"ObjectPage--fillerDiv--2-115\\"></div></div></div></div>"`;
+exports[`ObjectPage Just Some Sections 1`] = `"<div style=\\"width:12px\\" class=\\"ObjectPage--outerScrollbar--2-113\\"><div style=\\"margin-left:-12px;width:24px\\" class=\\"ObjectPage--innerScrollbar--2-114\\"><div style=\\"width:12px\\"></div></div></div><header role=\\"banner\\" aria-roledescription=\\"Object page header\\" style=\\"padding-right:12px\\" class=\\"ObjectPage--header--2-115\\"><span class=\\"ObjectPage--actions--2-121\\"></span><header class=\\"ObjectPage--titleBar--2-117\\"><div style=\\"display:flex;align-items:center\\"><span class=\\"ObjectPage--container--2-118\\"><h1 class=\\"ObjectPage--title--2-119\\"></h1><span class=\\"ObjectPage--subTitle--2-120\\"></span></span></div></header></header><div class=\\"ObjectPage--outerContentContainer--2-108\\"><div id=\\"ObjectPageContent\\" class=\\"ObjectPage--contentContainer--2-107\\"><div class=\\"ObjectPage--contentScrollContainer--2-109\\"><div></div><div><div style=\\"position:relative\\" class=\\"ObjectPage--contentHeader--2-116\\"><div class=\\"ObjectPage--headerContent--2-124\\"></div></div><section class=\\"ObjectPage--anchorBar--2-110\\" role=\\"navigation\\"><li class=\\"ObjectPageAnchorButton--anchorButtonContainer--2-129\\"><span class=\\"ObjectPageAnchorButton--button--2-130 ObjectPageAnchorButton--selected--2-131\\"></span></li><li class=\\"ObjectPageAnchorButton--anchorButtonContainer--2-129\\"><span class=\\"ObjectPageAnchorButton--button--2-130\\"></span></li></section></div><section class=\\"ObjectPage--sectionsContainer--2-111\\"><section id=\\"ObjectPageSection-1\\" role=\\"region\\"><div role=\\"heading\\" class=\\"ObjectPageSection--header--2-132\\"><div class=\\"ObjectPageSection--title--2-133 ObjectPageSection--uppercase--2-134\\"></div></div><div class=\\"ObjectPageSection--sectionContent--2-135\\"><div class=\\"ObjectPageSection--sectionContentInner--2-136\\">Test</div></div></section></section><div class=\\"ObjectPage--fillerDiv--2-112\\"></div></div></div></div>"`;
 
 exports[`ObjectPage No Header 1`] = `
 <div
@@ -297,19 +300,22 @@ exports[`ObjectPage No Header 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"
@@ -420,19 +426,22 @@ exports[`ObjectPage Not crashing with 0 sections 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"
@@ -500,19 +509,22 @@ exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"
@@ -616,19 +628,22 @@ exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"
@@ -727,19 +742,22 @@ exports[`ObjectPage Only Sections 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"
@@ -980,19 +998,22 @@ exports[`ObjectPage Set selected section id 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"
@@ -1098,19 +1119,22 @@ exports[`ObjectPage With Subsections 1`] = `
 >
   <div
     class="ObjectPage--outerScrollbar-"
+    style="width: 12px;"
   >
     <div
       class="ObjectPage--innerScrollbar-"
+      style="margin-left: -12px; width: 24px;"
     >
       <div
-        class="ObjectPage--scrollbarContent-"
+        style="width: 12px;"
       />
     </div>
   </div>
   <header
     aria-roledescription="Object page header"
     class="ObjectPage--header-"
     role="banner"
+    style="padding-right: 12px;"
   >
     <span
       class="ObjectPage--actions-"

packages/main/src/components/ObjectPage/index.tsx

@@ -31,6 +31,7 @@ import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
 import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import '@ui5/webcomponents/dist/icons/navigation-up-arrow.js';
+import { getScrollBarWidth } from '@ui5/webcomponents-react-base/lib/utils';
 
 export interface ObjectPagePropTypes extends CommonProps {
   title?: string;
@@ -50,6 +51,7 @@ export interface ObjectPagePropTypes extends CommonProps {
 }
 
 const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'ObjectPage' });
+const defaultScrollbarWidth = 12;
 
 const findSectionIndexById = (sections, id) => {
   const index = Children.toArray(sections).findIndex(
@@ -103,6 +105,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
   const hideHeaderButtonPressed = useRef(false);
   const stableOnScrollRef = useRef(null);
   const scroller = useRef(null);
+  const [scrollbarWidth, setScrollbarWidth] = useState(defaultScrollbarWidth);
 
   const classes = useStyles();
 
@@ -491,6 +494,12 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
 
   useEffect(() => {
     adjustDummyDivHeight();
+    requestAnimationFrame(() => {
+      const scrollbarWidth = getScrollBarWidth();
+      if (scrollbarWidth && scrollbarWidth !== 0 && scrollbarWidth !== defaultScrollbarWidth) {
+        setScrollbarWidth(scrollbarWidth);
+      }
+    });
     setIsMounted(true);
   }, []);
 
@@ -508,6 +517,14 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
     headerClasses.put(classes.alwaysVisibleHeader);
   }
 
+  const [scrollBarWidthStyle, scrollBarWidthMargin, scrollBarWidthPadding] = useMemo(() => {
+    return [
+      { width: `${scrollbarWidth}px` },
+      { marginLeft: `-${scrollbarWidth}px`, width: `${2 * scrollbarWidth}px` },
+      { paddingRight: `${scrollbarWidth}px` }
+    ];
+  }, [scrollbarWidth]);
+
   return (
     <div
       data-component-name="ObjectPage"
@@ -518,15 +535,16 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
       title={tooltip}
     >
       <ObjectPageScroller ref={scroller} scrollContainer={contentContainer}>
-        <div className={classes.outerScrollbar}>
-          <div ref={scrollBar} className={classes.innerScrollbar}>
-            <div ref={innerScrollBar} className={classes.scrollbarContent} />
+        <div style={scrollBarWidthStyle} className={classes.outerScrollbar}>
+          <div ref={scrollBar} style={scrollBarWidthMargin} className={classes.innerScrollbar}>
+            <div ref={innerScrollBar} style={scrollBarWidthStyle} />
           </div>
         </div>
         <header
           ref={topHeader}
           role="banner"
           aria-roledescription="Object page header"
+          style={scrollBarWidthPadding}
           className={headerClasses.valueOf()}
         >
           <span className={classes.actions}>{headerActions}</span>