Nav sidebar scrolls if the items don't fit on the screen (#43906)

Automattic · Jul 10, 2020 · 65157db · 65157db
1 parent 11ad76e
commit 65157db
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/...l-site-editing-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/index.tsx b/...l-site-editing-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/index.tsx
@@ -153,18 +153,18 @@ function WpcomBlockEditorNavSidebar() {
 						{ closeLabel }
 					</Button>
 				</div>
-				<div className="wpcom-block-editor-nav-sidebar-nav-sidebar__controls">
-					<ul className="wpcom-block-editor-nav-sidebar-nav-sidebar__page-list">
-						{ items.map( ( item ) => (
-							<NavItem
-								key={ item.id }
-								item={ item }
-								postType={ postType } // We know the post type of this item is always the same as the post type of the current editor
-								selected={ item.id === selectedItemId }
-								statusLabel={ statusLabels[ item.status ] }
-							/>
-						) ) }
-					</ul>
+				<ul className="wpcom-block-editor-nav-sidebar-nav-sidebar__page-list">
+					{ items.map( ( item ) => (
+						<NavItem
+							key={ item.id }
+							item={ item }
+							postType={ postType } // We know the post type of this item is always the same as the post type of the current editor
+							selected={ item.id === selectedItemId }
+							statusLabel={ statusLabels[ item.status ] }
+						/>
+					) ) }
+				</ul>
+				<div className="wpcom-block-editor-nav-sidebar-nav-sidebar__bottom-buttons">
 					<CreatePage postType={ postType } />
 					<ViewAllPosts postType={ postType } />
 				</div>

diff --git a/...-site-editing-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/style.scss b/...-site-editing-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/style.scss
@@ -41,6 +41,8 @@ $transition-period: 200ms;
 	width: $sidebar-width;
 	border-right: $border;
 	background: $white;
+	display: flex;
+	flex-direction: column;
 	animation: wpcom-block-editor-nav-sidebar-nav-sidebar__slide $transition-period ease-out;
 	@include reduce-motion( 'animation' );
 
@@ -64,6 +66,7 @@ $transition-period: 200ms;
 	border-bottom: $border;
 	box-sizing: content-box;
 	display: flex;
+	flex: $header-height 0 0;
 }
 
 .wpcom-block-editor-nav-sidebar-nav-sidebar__dismiss-sidebar-button {
@@ -105,13 +108,19 @@ $transition-period: 200ms;
 	}
 }
 
-.wpcom-block-editor-nav-sidebar-nav-sidebar__controls {
-	padding: 10px;
+.wpcom-block-editor-nav-sidebar-nav-sidebar__page-list {
+	padding: 0;
+	margin: 0;
+	overflow-y: scroll;
+	flex: 1;
+
+	li {
+		margin: 4px 8px;
+	}
 }
 
-.wpcom-block-editor-nav-sidebar__page-list li {
-	margin: 0;
-	padding: 0;
+.wpcom-block-editor-nav-sidebar-nav-sidebar__bottom-buttons {
+	margin: 8px;
 }
 
 @keyframes wpcom-block-editor-nav-sidebar__shrink {