Merge pull request #175 from contember/pr/fix-scroll-bars

Pr/fix scroll bars
contember · Feb 7, 2022 · 8c1c13e · 8c1c13e
2 parents 6f4d2bb + 558e82e
commit 8c1c13e
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 16 deletions.
diff --git a/packages/admin/src/styles/parts/sideDimensions.sass b/packages/admin/src/styles/parts/sideDimensions.sass
@@ -31,7 +31,6 @@
 			right: 1px
 			text-transform: uppercase
 			top: 1px
-			z-index: 1
 
 	.#{$cui-conf-globalPrefix}layout-page-content &
 		@media (min-width: $breakpoint-min-medium)

diff --git a/packages/ui/src/components/Layout/LayoutChrome.sass b/packages/ui/src/components/Layout/LayoutChrome.sass
@@ -9,7 +9,6 @@
 	display: flex
 	flex-direction: column
 	min-height: 100vh
-	min-width: 100vw
 
 	&-bar,
 	&-body
@@ -43,12 +42,16 @@
 	&-bar-header
 		display: flex
 		flex-direction: row
+		gap: calc(var(--cui-gap) * 2)
 		justify-content: space-between
 		padding-bottom: var(--cui-layout-chrome-padding-bottom)
 		padding-left: var(--cui-layout-chrome-padding-left)
 		padding-right: var(--cui-layout-chrome-padding-right)
 		padding-top: var(--cui-layout-chrome-padding-top)
 		position: relative
+		&-inner
+			flex: 1
+			overflow: hidden
 	&-bar-body
 		border-top: 1px solid transparent
 		flex-grow: 1
@@ -73,12 +76,14 @@
 		position: relative
 	&-navigation-button
 		height: var(--cui-control-height)
-		margin: 0.125em
-		& > .#{$cui-conf-globalPrefix}button-content
+		margin-top: -0.5em
+		margin-bottom: -0.5em
+		.#{$cui-conf-globalPrefix}button-content
+			align-items: center
 			display: flex
-			flex-direction: row
-			flex-wrap: nowrap
 			gap: calc(var(--cui-gap) * 2)
+			padding-left: calc(var(--cui-gap) * 3)
+			padding-right: calc(var(--cui-gap) * 3)
 
 	@media (max-width: $breakpoint-max-medium)
 		--layout-chrome-bar-width: 0

diff --git a/packages/ui/src/components/Layout/LayoutChrome.tsx b/packages/ui/src/components/Layout/LayoutChrome.tsx
@@ -91,7 +91,7 @@ export const LayoutChrome = memo(({
 		<DropdownContentContainerProvider>
 			<div className={`${prefix}layout-chrome-bar`}>
 				<div className={`${prefix}layout-chrome-bar-header`}>
-					{sidebarHeader}
+					{sidebarHeader && <div className={`${prefix}layout-chrome-bar-header-inner`}>{sidebarHeader}</div>}
 					<Button distinction="seamless" className={`${prefix}layout-chrome-navigation-button`} onClick={toggleCollapsed}>
 						<span className={`${prefix}chrome-menu-button-label`}>Menu</span>
 						<Icon blueprintIcon={collapsed ? 'menu' : 'cross'} />

diff --git a/packages/ui/src/components/Layout/LayoutPage.sass b/packages/ui/src/components/Layout/LayoutPage.sass
@@ -11,7 +11,6 @@
 	&-content-wrap
 		background-color: var(--cui-background-color)
 		display: flex
-		flex-basis: 100%
 		flex-direction: column
 		position: relative
 	&-content

diff --git a/packages/ui/src/components/Section/Section.sass b/packages/ui/src/components/Section/Section.sass
@@ -17,13 +17,13 @@
   padding-top: var(--cui-section-padding-top)
   scroll-margin-top: 6em // TODO: This is approximate, e.g. use some --cui-custom-property
   &:first-child
-    margin-top: calc(-1 * var(--cui-section-padding-top, 0em))
+    margin-top: calc(-1 * var(--cui-layout-page-padding-top, 0em))
     border-color: transparent
   & + &
     margin-bottom: 0
     margin-top: calc(-1 * var(--cui-layout-section-gap, 0em))
-  &:last-child:not(:first-child)
-    margin-bottom: calc(-1 * var(--cui-layout-section-gap, 0em))
+  &:last-child
+    margin-bottom: calc(-1 * var(--cui-layout-page-padding-bottom, 0em))
 
   .message--nesting-warning
     display: none

diff --git a/packages/ui/src/styles/_root.sass b/packages/ui/src/styles/_root.sass
@@ -27,15 +27,16 @@ $cui-buildState-alreadyOutputRoot: false !default
 		margin: 0
 		padding: 0
 
+	html
+		display: flex
+
 	body
+		flex: 1 1 100%
 		font-family: var(--cui-font-family)
 		line-height: var(--cui-line-height)
 		margin: 0
 		padding: 0
 		font-smoothing: antialiased
-		min-width: 100vw
-		@media (min-width: $breakpoint-min-medium)
-			width: fit-content
 		-webkit-font-smoothing: antialiased
 
 	h1, h2, h3, h4, h5, h6

diff --git a/packages/ui/src/styles/components/titleBar.sass b/packages/ui/src/styles/components/titleBar.sass
@@ -16,8 +16,7 @@
 	position: sticky
 	top: 0
 	left: var(--layout-chrome-bar-width, 0)
-	width: calc(100vw - var(--layout-chrome-bar-width, 0))
-	z-index: 2
+	z-index: 1
 
 	&::after
 		content: ""