Merge pull request #127 from contember/pr/fix-overflows

Use position sticky on all required layout panels

packages/admin/src/styles/_globalOverrides.sass

@@ -1,12 +1,17 @@
 @import 'common'
 
+html, body
+	margin: 0
+	padding: 0
+
 body
 	font-family: $font-family-base
 	line-height: 1.5
-	overflow-x: hidden
 	margin: 0
 	padding: 0
 	font-smoothing: antialiased
+	@media (min-width: $breakpoint-min-medium)
+		width: fit-content
 	-webkit-font-smoothing: antialiased
 
 h1, h2, h3, h4, h5, h6

packages/admin/src/styles/index.sass

@@ -1,11 +1,11 @@
 @import 'common'
 
-@import 'globalOverrides'
-
 @import 'theme'
 
 @import '../../../ui/src/index'
 
+@import 'globalOverrides'
+
 // ## Components
 // @import 'parts/*'
 @import 'parts/avatar'

packages/ui/src/components/Layout/LayoutChrome.sass

@@ -1,13 +1,15 @@
 @import '../../styles/common'
 
 .#{$cui-conf-globalPrefix}layout-chrome
+	$layout-chrome-bar-width-aspect: 0.333
+	--layout-chrome-bar-width: #{100vw * $layout-chrome-bar-width-aspect}
+
 	align-items: stretch
 	color: var(--cui-color--medium)
 	display: flex
 	flex-direction: column
 	min-height: 100vh
 
-	$tablet-width: 0.33333
 	&-bar,
 	&-body
 		--cui-layout-chrome-padding-bottom: calc(var(--cui-padding-bottom) + var(--cui-edge-offset-bottom) + env(safe-area-inset-bottom, 0em))
@@ -25,16 +27,18 @@
 		--cui-layout-section-padding-left: calc(var(--cui-layout-page-padding-left) - var(--cui-edge-offset-left, 0em))
 		--cui-layout-section-padding-right: calc(var(--cui-layout-page-padding-right) - var(--cui-edge-offset-right, 0em))
 		--cui-layout-section-padding-top: var(--cui-layout-page-padding-top)
-		--cui-layout-section-gap: #{$cui-gap * 4}
+		--cui-layout-section-gap: calc(4 * var(--cui-gap))
 
 	&-bar
 		background: var(--cui-background-color)
 		display: flex
 		flex-direction: column
+		height: 100vh
+		left: 0
 		max-height: 100vh
 		position: sticky
 		top: 0
-		z-index: 1
+		z-index: 3
 	&-bar-header
 		display: flex
 		flex-direction: row
@@ -78,8 +82,9 @@
 			gap: calc(var(--cui-gap) * 2)
 
 	@media (max-width: $breakpoint-max-medium)
+		--layout-chrome-bar-width: 0
 		&-bar
-			height: 100vh
+			max-width: 100vw
 		&-body
 			min-height: 100vh
 		&.view-collapsed &-bar
@@ -95,21 +100,15 @@
 		&-bar
 			--cui-edge-offset-right: 0em
 			background: linear-gradient(to right, var(--cui-background-color) 25%, var(--cui-background-color--below))
-			width: 100% * $tablet-width
+			min-width: var(--layout-chrome-bar-width)
 		&-bar-body
 			padding-left: env(safe-area-inset-left, 0em)
 		&-body
 			--cui-layout-section-gap: #{$cui-gap * 8}
-			width: 100% - (100% * $tablet-width)
 			display: flex
 			flex-direction: column
 		&-navigation-button
 			display: none
 
 	@media (min-width: $breakpoint-min-large)
-		&-bar
-			flex-shrink: 0
-			width: unset
-			min-width: $breakpoint-min-large - $breakpoint-min-medium
-		&-body
-			width: calc(100% - #{$breakpoint-min-large * $tablet-width})
+		--layout-chrome-bar-width: #{$breakpoint-min-large * $layout-chrome-bar-width-aspect}

packages/ui/src/components/Layout/LayoutPage.sass

@@ -38,7 +38,6 @@
 		display: flex
 		flex-direction: column
 		margin-top: calc(-1 * var(--cui-control-border-width))
-		overflow: visible
 		&-title
 			margin: 0
 		&-content
@@ -54,30 +53,22 @@
 			margin-right: auto
 			flex-basis: $breakpoint-min-medium
 	@media (min-width: $breakpoint-min-xlarge)
-		height: 100vh
-		max-height: 100vh
 		&-content-wrap
 			flex-direction: row
-			overflow: hidden
-		&-content
-			border-right: 1px solid transparent
-			overflow-y: auto
-			&.is-overflowing
-				border-right-color: var(--cui-color--lower)
 		&-aside
-			background-color: unset
+			background-color: var(--cui-background-color)
+			border-left: 1px solid transparent
 			border-top: unset
+			bottom: 0
+			height: calc(100vh - var(--cui-content-offset-top, 0))
 			margin-top: unset
 			max-width: 50%
 			overflow-y: auto
 			position: sticky
-			top: 0
+			right: 0
+			top: var(--cui-content-offset-top, 0)
+			z-index: 1
 			&-content
 				padding-left: var(--cui-layout-section-padding-left)
-
-
-@media (min-width: $breakpoint-min-xlarge)
-	html
-		height: 100vh
-		margin: 0
-		padding: 0
+			.view-aside-divider > &
+				border-left-color: var(--cui-color--lower)

packages/ui/src/components/Layout/LayoutPage.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
-import { memo, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { CSSProperties, memo, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useClassNamePrefix } from '../../auxiliary'
-import { toEnumClass, toStateClass, toThemeClass } from '../../utils'
+import { toEnumClass, toThemeClass } from '../../utils'
 import { SectionTabs, useSectionTabsRegistration } from '../SectionTabs'
 import { Stack } from '../Stack'
 import { TitleBar, TitleBarProps } from '../TitleBar'
@@ -10,41 +10,9 @@ import { ThemeScheme } from './Types'
 
 export const PageLayoutContent = ({ children }: { children: ReactNode }) => {
 	const prefix = useClassNamePrefix()
-	const [isOverflowing, setIsOverflowing] = useState(false)
-	const contentRef = useRef<HTMLDivElement>(null)
-
-	useEffect(() => {
-		if (!contentRef.current) {
-			return
-		}
-
-		const contentRefCopy = contentRef.current
-
-		const listener = () => {
-			const offsetWidth = Math.floor(contentRefCopy.offsetWidth ?? 0)
-			const scrollWidth = Math.floor(contentRefCopy.scrollWidth ?? 0)
-			const scrollLeft = Math.floor(contentRefCopy.scrollLeft ?? 0)
-			const scrollRight = scrollWidth - offsetWidth - scrollLeft
-
-			const nextIsOverflowing = offsetWidth < scrollWidth && scrollRight > 1
-
-			setIsOverflowing(nextIsOverflowing)
-		}
-
-		listener()
-		contentRefCopy.addEventListener('scroll', listener, { passive: true })
-
-		return () => {
-			contentRefCopy.removeEventListener('scroll', listener)
-		}
-	}, [])
 
 	return <div
-		ref={contentRef}
-		className={classNames(
-			`${prefix}layout-page-content`,
-			toStateClass('overflowing', isOverflowing),
-		)}>
+		className={`${prefix}layout-page-content`}>
 		<div className={`${prefix}layout-page-content-container`}>
 			{children}
 		</div>
@@ -133,6 +101,65 @@ export const LayoutPage = memo(({
 	const themeContent = themeContentProp ?? themeContentContext
 	const themeControls = themeControlsProp ?? themeControlsContext
 
+	const [contentOffsetTop, setContentOffsetTop] = useState<number | undefined>(undefined)
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	useLayoutEffect(() => {
+		if (!contentRef.current) {
+			return
+		}
+
+		const ref = contentRef.current
+
+		const topOffsetHandler = () => {
+			const contentOffsetTop = ref.offsetTop
+
+			setContentOffsetTop(contentOffsetTop)
+		}
+
+		topOffsetHandler()
+
+		window.addEventListener('resize', topOffsetHandler, { passive: true })
+
+		return () => {
+			window.removeEventListener('resize', topOffsetHandler)
+		}
+	}, [])
+
+	const [showDivider, setShowDivider] = useState<boolean>(false)
+
+	useEffect(() => {
+		if (!document?.body?.parentElement) {
+			return
+		}
+
+		const container = document.body.parentElement
+
+		console.log(container)
+
+		const scrollHandler = () => {
+			const visibleWidth = container.offsetWidth
+			const contentWidth = container.scrollWidth
+			const scrollLeft = container.scrollLeft
+
+			console.log({
+				visibleWidth,
+				contentWidth,
+				scrollLeft,
+			})
+
+			setShowDivider(contentWidth > visibleWidth && scrollLeft + visibleWidth < contentWidth)
+		}
+
+		scrollHandler()
+
+		window.addEventListener('scroll', scrollHandler, { passive: true })
+
+		return () => {
+			window.removeEventListener('scroll', scrollHandler)
+		}
+	}, [])
+
 	return <div className={classNames(
 		`${prefix}layout-page`,
 		toThemeClass(themeContent ?? theme, 'content'),
@@ -142,7 +169,14 @@ export const LayoutPage = memo(({
 		{(title || actions) && <TitleBar after={<SectionTabs />} navigation={navigation} actions={actions} headingProps={headingProps}>
 			{title}
 		</TitleBar>}
-		<div className={`${prefix}layout-page-content-wrap`}>
+		<div
+			ref={contentRef}
+			className={classNames(
+				`${prefix}layout-page-content-wrap`,
+				showDivider ? 'view-aside-divider' : undefined,
+			)}
+			style={{ '--cui-content-offset-top': `${contentOffsetTop}px` } as CSSProperties}
+		>
 			<PageLayoutContent>
 				{children}
 			</PageLayoutContent>

packages/ui/src/styles/components/titleBar.sass

@@ -15,6 +15,8 @@
 	padding-top: var(--cui-padding-top)
 	position: sticky
 	top: 0
+	left: var(--layout-chrome-bar-width, 0)
+	width: calc(100vw - var(--layout-chrome-bar-width, 0))
 	z-index: 2
 
 	&::after