fix (column resizing): snapping doesn't work if columns has a background

src/components/resizable-column/editor.scss

@@ -57,13 +57,10 @@
 		transform: translate(-6px, -6px) rotate(45deg);
 	}
 	// Drop down icon.
-	&::after {
-		content: "\f347";
-		font-family: Dashicons;
+	svg {
 		top: 2px;
 		position: relative;
 		margin-left: 4px;
-		font-size: 11px;
 		display: none;
 	}
 
@@ -116,7 +113,7 @@
 		background: transparent;
 		display: inline;
 	}
-	&::after {
+	svg {
 		display: inline;
 	}
 }

src/components/resizable-column/index.js

@@ -4,6 +4,7 @@
 import { fixFractionWidths, getSnapWidths } from './get-snap-widths'
 import { AdvancedTextControl, Popover } from '..'
 import { ColumnShowTooltipContext } from '../column-inner-blocks'
+import ArrowDownSvg from './images/arrow-down.svg'
 
 /**
  * External dependencies
@@ -37,6 +38,11 @@ const MIN_COLUMN_WIDTH_PERCENTAGE = {
 	Mobile: 10,
 }
 
+// Prevent rounding off decimals.
+const formatLabel = value => {
+	return ( Math.trunc( value * 10 ) / 10 ).toFixed( 1 )
+}
+
 const ResizableColumn = props => {
 	const { clientId } = useBlockEditContext()
 	const blockContext = useBlockContext()
@@ -207,15 +213,15 @@ const ResizableColumn = props => {
 
 			// Fix the widths, ensure that our total width is 100%
 			columnPercentages = ( columnWidths || [] ).map( width => {
-				return parseFloat( ( width / totalWidth * 100 ).toFixed( 1 ) )
+				return parseFloat( formatLabel( width / totalWidth * 100 ) )
 			} )
 			// Fix the widths, ensure that we don't end up with off numbers 49.9% and 50.1%.
 			columnPercentages = fixFractionWidths( columnPercentages, isShiftKey )
 
 			// Ensure that the total width is exactly 100%.
 			let totalCurrentWidth = columnPercentages.reduce( ( a, b ) => a + b, 0 )
 			if ( totalCurrentWidth !== 100 ) {
-				columnPercentages[ adjacentBlockIndex ] = parseFloat( ( columnPercentages[ adjacentBlockIndex ] + 100 - totalCurrentWidth ).toFixed( 1 ) )
+				columnPercentages[ adjacentBlockIndex ] = parseFloat( formatLabel( columnPercentages[ adjacentBlockIndex ] + 100 - totalCurrentWidth ) )
 			}
 
 			// There are cases where the total width may slightly go past 100%
@@ -235,7 +241,7 @@ const ResizableColumn = props => {
 					max-width: ${ width }% !important;
 				}
 				[data-block="${ adjacentBlocks[ i ].clientId }"] .stk-resizable-column__size-tooltip {
-					--width: '${ width.toFixed( 1 ) }%' !important;
+					--width: '${ formatLabel( width ) }%' !important;
 				}`
 			} ).join( '' )
 			setTempStyles( columnStyles )
@@ -251,8 +257,10 @@ const ResizableColumn = props => {
 		// control.
 		} else {
 			const newWidth = currentWidth + delta.width
-			columnPercentages = clamp( parseFloat( ( newWidth / maxWidth * 100 ).toFixed( 1 ) ), 0, 100 )
+			columnPercentages = clamp( parseFloat( formatLabel( newWidth / maxWidth * 100 ) ), 0, 100 )
 
+			// Fix the widths, ensure that we don't end up with off numbers 49.9% and 50.1%.
+			columnPercentages = fixFractionWidths( [ columnPercentages ], isShiftKey )[ 0 ]
 			setNewWidthsPercent( columnPercentages )
 
 			// Take into account the number of adjacent columns per row
@@ -267,7 +275,7 @@ const ResizableColumn = props => {
 					max-width: calc(${ columnPercentages }% - var(--stk-column-gap, 0px) * ${ adjacentColumnCount - 1 } / ${ adjacentColumnCount } ) !important;
 				}
 				[data-block="${ clientId }"] .stk-resizable-column__size-tooltip {
-					--width: '${ columnPercentages.toFixed( 1 ) }%' !important;
+					--width: '${ formatLabel( columnPercentages ) }%' !important;
 				}`
 			setTempStyles( columnStyles )
 
@@ -465,25 +473,21 @@ const ResizableTooltip = memo( props => {
 	let columnLabel = ''
 	if ( typeof adjacentBlocks !== 'undefined' && ! props.value && ! originalInputValue ) {
 		// The columns are evenly distributed by default.
-		if ( deviceType === 'Desktop' ) {
-			const value = ( 100 / adjacentBlocks.length ).toFixed( 1 )
+		if ( deviceType === 'Desktop' || deviceType === 'Tablet' ) {
+			const value = formatLabel( 100 / adjacentBlocks.length )
 			if ( value.toString() === '33.3' ) {
 				columnLabel = 33.33
 			} else {
 				columnLabel = value
 			}
+		} else {
+			// In mobile, the columns collapse to 100%.
+			columnLabel = 100.0
 		}
-		// In mobile, the columns are  "auto" so that we don't display
-		// inaccurate percentage widths.
-	} else if ( deviceType === 'Tablet' ) {
-		columnLabel = __( 'Auto', i18n )
-	} else {
-		// In mobile, the columns collapse to 100%.
-		columnLabel = 100.0
 	}
 
 	// Create the label of the tooltip.
-	const _label = ( props.value ? parseFloat( props.value ).toFixed( 1 ) : '' ) || originalInputValue || columnLabel
+	const _label = ( props.value ? formatLabel( parseFloat( props.value ) ) : '' ) || originalInputValue || columnLabel
 	const tooltipLabel = _label !== __( 'Auto', i18n ) ? `'${ _label }%'` : `'${ _label }'`
 
 	// Setup the input field when the popup opens.
@@ -593,6 +597,7 @@ const ResizableTooltip = memo( props => {
 						role="button"
 						tabIndex="0"
 					>
+						<ArrowDownSvg fill="currentColor" width="10" />
 					</div>
 				)
 			}

src/hooks/use-with-shift.js

@@ -8,15 +8,28 @@ const useWithShift = () => {
 
 	useEffect( () => {
 		const handleShiftKeyToggle = event => {
-			setIsShiftKey( event.shiftKey )
+			setIsShiftKey( !! event.shiftKey )
 		}
 
 		window.addEventListener( 'keydown', handleShiftKeyToggle ) // eslint-disable-line @wordpress/no-global-event-listener
 		window.addEventListener( 'keyup', handleShiftKeyToggle ) // eslint-disable-line @wordpress/no-global-event-listener
 
+		// This ensures to toggle the shift key when the iframe is in focus.
+		const iframe = document?.querySelector( 'iframe[name="editor-canvas"]' )
+		if ( iframe ) {
+			const doc = iframe.contentDocument || iframe.contentWindow.document
+			doc.addEventListener( 'keyup', handleShiftKeyToggle )
+		}
+
 		return () => {
 			window.removeEventListener( 'keydown', handleShiftKeyToggle ) // eslint-disable-line @wordpress/no-global-event-listener
 			window.removeEventListener( 'keyup', handleShiftKeyToggle ) // eslint-disable-line @wordpress/no-global-event-listener
+
+			const iframe = document?.querySelector( 'iframe[name="editor-canvas"]' )
+			if ( iframe ) {
+				const doc = iframe.contentDocument || iframe.contentWindow.document
+				doc.removeEventListener( 'keyup', handleShiftKeyToggle )
+			}
 		}
 	}, [] )