diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 630456b5f59892..12c142e0a4cbba 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -489,12 +489,9 @@
 	/* stylelint-enable function-comma-space-after */
 }
 
-@mixin custom-scrollbars-on-hover() {
+@mixin custom-scrollbars-on-hover($track-color: #1e1e1e, $handle-color: #757575) {
 	visibility: hidden;
 
-	$handle-color: #757575;
-	$track-color: #1e1e1e;
-
 	// WebKit
 	&::-webkit-scrollbar {
 		width: 12px;
@@ -520,4 +517,12 @@
 	& > * {
 		visibility: visible;
 	}
+
+	// Always enable scrollbar on Mobile devices.
+	@media (hover: none) {
+		.scrollable {
+			visibility: visible;
+		}
+	}
+
 }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 0bedb39061af4c..9b3d535d69727c 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -1,19 +1,30 @@
 .block-editor-list-view-tree {
-	width: 100%;
-	border-collapse: collapse;
+	//extending over the padding of the sidebar so that we don't get the icons cut off
+	width: calc(100% + #{ $grid-unit-20 });
+	max-width: calc(100% + #{ $grid-unit-20 });
+	margin: 0 ($grid-unit-20 * -1) 0 0;
 	padding: 0;
-	margin: 0;
+	overflow-x: auto;
+	@include custom-scrollbars-on-hover(#ffffff);
+	display: block;
+	border-collapse: collapse;
 
 	// Move upwards when in modal.
 	.components-modal__content & {
 		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
 		width: calc(100% + #{ $grid-unit-15 });
 	}
+
+	tbody {
+		display: flex;
+		flex-direction: column;
+	}
 }
 
 .block-editor-list-view-leaf {
 	// Use position relative for row animation.
 	position: relative;
+	display: flex;
 
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
@@ -190,6 +201,10 @@
 		flex: 0 0 $icon-size;
 	}
 
+	.block-editor-list-view-block__contents-cell {
+		flex-basis: 100%;
+	}
+
 	.block-editor-list-view-block__menu-cell,
 	.block-editor-list-view-block__mover-cell,
 	.block-editor-list-view-block__contents-cell {
@@ -228,6 +243,8 @@
 
 	.block-editor-list-view-block__menu-cell {
 		padding-right: $grid-unit-05;
+		display: flex;
+		align-items: center;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -278,6 +295,12 @@
 		}
 	}
 
+	.block-editor-block-settings-menu {
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+
 	.block-editor-inserter__toggle {
 		background: $gray-900;
 		color: $white;
@@ -290,18 +313,17 @@
 		}
 	}
 
-	.block-editor-list-view-block-select-button__label-wrapper {
-		min-width: 120px;
-	}
-
 	.block-editor-list-view-block-select-button__title {
-		flex: 1;
-		position: relative;
+		margin-right: auto;
+		display: inline-flex;
+		align-items: center;
 
 		.components-truncate {
-			position: absolute;
 			width: 100%;
-			transform: translateY(-50%);
+			display: inline-block;
+			max-width: 120px;
+			text-overflow: ellipsis;
+			overflow: hidden;
 		}
 	}
 
diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
index 9cf3c59f8b632d..b9685d481b92e1 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -208,52 +208,50 @@ function __ExperimentalOffCanvasEditor(
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
 			/>
-			<div className="offcanvas-editor-list-view-tree-wrapper">
-				<TreeGrid
-					id={ id }
-					className="block-editor-list-view-tree"
-					aria-label={ __( 'Block navigation structure' ) }
-					ref={ treeGridRef }
-					onCollapseRow={ collapseRow }
-					onExpandRow={ expandRow }
-					onFocusRow={ focusRow }
-					applicationAriaLabel={ __( 'Block navigation structure' ) }
-				>
-					<ListViewContext.Provider value={ contextValue }>
-						<ListViewBranch
-							blocks={ clientIdsTree }
-							selectBlock={ selectEditorBlock }
-							showBlockMovers={ showBlockMovers }
-							fixedListWindow={ fixedListWindow }
-							selectedClientIds={ selectedClientIds }
-							isExpanded={ isExpanded }
-							shouldShowInnerBlocks={ shouldShowInnerBlocks }
-							selectBlockInCanvas={ selectBlockInCanvas }
-						/>
-						<TreeGridRow
-							level={ 1 }
-							setSize={ 1 }
-							positionInSet={ 1 }
-							isExpanded={ true }
-						>
-							<TreeGridCell>
-								{ ( treeGridCellProps ) => (
-									<Appender { ...treeGridCellProps } />
-								) }
-							</TreeGridCell>
-							{ ! clientIdsTree.length && (
-								<TreeGridCell withoutGridItem>
-									<div className="offcanvas-editor-list-view-is-empty">
-										{ __(
-											'Your menu is currently empty. Add your first menu item to get started.'
-										) }
-									</div>
-								</TreeGridCell>
+			<TreeGrid
+				id={ id }
+				className="block-editor-list-view-tree"
+				aria-label={ __( 'Block navigation structure' ) }
+				ref={ treeGridRef }
+				onCollapseRow={ collapseRow }
+				onExpandRow={ expandRow }
+				onFocusRow={ focusRow }
+				applicationAriaLabel={ __( 'Block navigation structure' ) }
+			>
+				<ListViewContext.Provider value={ contextValue }>
+					<ListViewBranch
+						blocks={ clientIdsTree }
+						selectBlock={ selectEditorBlock }
+						showBlockMovers={ showBlockMovers }
+						fixedListWindow={ fixedListWindow }
+						selectedClientIds={ selectedClientIds }
+						isExpanded={ isExpanded }
+						shouldShowInnerBlocks={ shouldShowInnerBlocks }
+						selectBlockInCanvas={ selectBlockInCanvas }
+					/>
+					<TreeGridRow
+						level={ 1 }
+						setSize={ 1 }
+						positionInSet={ 1 }
+						isExpanded={ true }
+					>
+						<TreeGridCell>
+							{ ( treeGridCellProps ) => (
+								<Appender { ...treeGridCellProps } />
 							) }
-						</TreeGridRow>
-					</ListViewContext.Provider>
-				</TreeGrid>
-			</div>
+						</TreeGridCell>
+						{ ! clientIdsTree.length && (
+							<TreeGridCell withoutGridItem>
+								<div className="offcanvas-editor-list-view-is-empty">
+									{ __(
+										'Your menu is currently empty. Add your first menu item to get started.'
+									) }
+								</div>
+							</TreeGridCell>
+						) }
+					</TreeGridRow>
+				</ListViewContext.Provider>
+			</TreeGrid>
 		</AsyncModeProvider>
 	);
 }
diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss
index e65646a318d3d6..66569702246fd9 100644
--- a/packages/block-editor/src/components/off-canvas-editor/style.scss
+++ b/packages/block-editor/src/components/off-canvas-editor/style.scss
@@ -14,13 +14,7 @@
 	}
 }
 
-.offcanvas-editor-list-view-tree-wrapper {
-	max-width: 100%;
-	overflow-x: auto;
-}
-
 .offcanvas-editor-list-view-leaf {
-	display: block;
 	// sidebar width - tab panel padding
 	max-width: $sidebar-width - (2 * $grid-unit-20);
 }