This is an attempt to ensure that we should the preview panel outside…

… the confines of the sidebar container.

Removing overflow: auto allows us to position elements beyond the container.
We have to detect fullscreen vs non-fullscreen mode to allow for varying top positions.
Also updated selected active states of the button.

packages/block-editor/src/components/block-styles/index.js

@@ -31,6 +31,7 @@ export default function BlockStyles( {
 		activeStyle,
 		genericPreviewBlock,
 		className: previewClassName,
+		isFullscreenActive,
 	} = useStylesForBlocks( {
 		clientId,
 		onSwitch,
@@ -57,7 +58,11 @@ export default function BlockStyles( {
 	};
 
 	return (
-		<div className={ classnames( 'block-editor-block-styles', className ) }>
+		<div
+			className={ classnames( 'block-editor-block-styles', className, {
+				'is-fullscreen-active': isFullscreenActive,
+			} ) }
+		>
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
 					const buttonText = style.label || style.name;
@@ -95,6 +100,7 @@ export default function BlockStyles( {
 								as="span"
 								limit={ 12 }
 								ellipsizeMode="tail"
+								className="block-editor-block-styles__item-text"
 								truncate
 							>
 								{ buttonText }

packages/block-editor/src/components/block-styles/style.scss

@@ -3,11 +3,15 @@
 	// Fixing the position is specific to the block inspector context.
 	&.block-inspector__block-styles .block-editor-inserter__preview-container {
 		position: fixed;
-		right: calc(#{$sidebar-width} + #{$grid-unit-40});
-		top: calc(#{$header-height} + #{$panel-header-height});
+		right: $sidebar-width + $grid-unit-40;
+		top: $header-height + $grid-unit-40 + $admin-bar-height; // $admin-bar-height;
 		left: auto;
 	}
 
+	&.is-fullscreen-active.block-inspector__block-styles .block-editor-inserter__preview-container {
+		top: $header-height + $grid-unit-40;
+	}
+
 	.block-editor-block-card__title.block-editor-block-card__title {
 		margin: 0;
 	}
@@ -32,13 +36,22 @@
 		&:focus,
 		&:hover {
 			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 		}
 
 		&.is-active,
 		&.is-active:hover {
-			color: $gray-900;
-			box-shadow: inset 0 0 0 2px $gray-900;
+			background-color: $gray-800;
+			box-shadow: none;
+		}
+
+		&.is-active .block-editor-block-styles__item-text,
+		&.is-active:hover .block-editor-block-styles__item-text {
+			color: $white;
+		}
+
+		&.is-active:focus {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
 		}
 	}
 }

packages/block-editor/src/components/block-styles/use-styles-for-block.js

@@ -67,11 +67,18 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 			blockType,
 			styles: getBlockStyles( block.name ),
 			className: block.attributes.className || '',
+			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
+				'fullscreenMode'
+			),
 		};
 	};
-	const { styles, block, blockType, className } = useSelect( selector, [
-		clientId,
-	] );
+	const {
+		styles,
+		block,
+		blockType,
+		className,
+		isFullscreenActive,
+	} = useSelect( selector, [ clientId ] );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const stylesToRender = getRenderedStyles( styles );
 	const activeStyle = getActiveStyle( stylesToRender, className );
@@ -95,5 +102,6 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 		activeStyle,
 		genericPreviewBlock,
 		className,
+		isFullscreenActive,
 	};
 }

packages/interface/src/components/interface-skeleton/style.scss

@@ -113,8 +113,6 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__sidebar {
-	overflow: auto;
-
 	@include break-medium() {
 		border-left: $border-width solid $gray-200;
 	}