List View: Update with scrolling and custom scrollbar. (#49793)

* List View: Update with scrolling and custom scrollbar.

* Update mixin, fix Safari, fix gutter.

* Add stable gutter for templates.

* Refactor approach to use color for show/hide.

* Polish for firefox, retire $track-color.

* Simplify, add focus-within.

packages/base-styles/_mixins.scss

@@ -514,32 +514,46 @@
 	/* stylelint-enable function-comma-space-after */
 }
 
-@mixin custom-scrollbars-on-hover($handle-color, $track-color) {
-	visibility: hidden;
+@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {
 
 	// WebKit
 	&::-webkit-scrollbar {
 		width: 12px;
 		height: 12px;
 	}
 	&::-webkit-scrollbar-track {
-		background-color: $track-color;
+		background-color: transparent;
 	}
 	&::-webkit-scrollbar-thumb {
 		background-color: $handle-color;
 		border-radius: 8px;
 		border: 3px solid transparent;
 		background-clip: padding-box;
 	}
+	&:hover::-webkit-scrollbar-thumb, // This needs specificity.
+	&:focus::-webkit-scrollbar-thumb,
+	&:focus-within::-webkit-scrollbar-thumb {
+		background-color: $handle-color-hover;
+	}
 
 	// Firefox 109+ and Chrome 111+
-	scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color"
 	scrollbar-width: thin;
-	scrollbar-gutter: stable;
+	scrollbar-gutter: stable both-edges;
+	scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color"
 
 	&:hover,
 	&:focus,
-	& > * {
-		visibility: visible;
+	&:focus-within {
+		scrollbar-color: $handle-color-hover transparent;
+	}
+
+	// Needed to fix a Safari rendering issue.
+	will-change: transform;
+
+	// Always show scrollbar on Mobile devices.
+	@media (hover: none) {
+		& {
+			scrollbar-color: $handle-color-hover transparent;
+		}
 	}
 }

packages/edit-post/src/components/secondary-sidebar/style.scss

@@ -1,3 +1,8 @@
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-site/src/components/secondary-sidebar/style.scss
+ */
+
 .edit-post-editor__inserter-panel,
 .edit-post-editor__document-overview-panel {
 	height: 100%;
@@ -6,10 +11,11 @@
 }
 
 .edit-post-editor__document-overview-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	// Width of the list view panel.
-	width: 350px;
+	@include break-medium() {
+		// Same width as the Inserter.
+		// @see packages/block-editor/src/components/inserter/style.scss
+		width: 350px;
+	}
 
 	.edit-post-sidebar__panel-tabs {
 		flex-direction: row-reverse;
@@ -62,8 +68,17 @@
 .edit-post-editor__list-view-panel-content,
 .edit-post-editor__list-view-container > .document-outline,
 .edit-post-editor__list-view-empty-headings {
-	overflow: auto;
 	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
 	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }

packages/edit-site/src/components/secondary-sidebar/style.scss

@@ -1,3 +1,8 @@
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-post/src/components/secondary-sidebar/style.scss
+ */
+
 .edit-site-editor__inserter-panel,
 .edit-site-editor__list-view-panel {
 	height: 100%;
@@ -6,9 +11,11 @@
 }
 
 .edit-site-editor__list-view-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
+	@include break-medium() {
+		// Same width as the Inserter.
+		// @see packages/block-editor/src/components/inserter/style.scss
+		width: 350px;
+	}
 }
 
 .edit-site-editor__inserter-panel-header {
@@ -42,6 +49,17 @@
 }
 
 .edit-site-editor__list-view-panel-content {
-	overflow-y: auto;
-	padding: $grid-unit-10;
+	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
+	// The table cells use an extra pixels of space left and right. We compensate for that here.
+	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }

packages/edit-site/src/components/sidebar/style.scss

@@ -3,7 +3,8 @@
 	overflow-y: auto;
 
 	.components-navigator-screen {
-		@include custom-scrollbars-on-hover($gray-700, $gray-900);
+		@include custom-scrollbars-on-hover(transparent, $gray-700);
+		scrollbar-gutter: stable;
 	}
 }