small fixes/enhancements

WordPress · Dec 24, 2024 · ce8f5db · ce8f5db
1 parent 36424b4
commit ce8f5db
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -37,7 +37,7 @@ import type {
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
-import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
+import { usePreviewSize } from './preview-size-picker';
 const { Badge } = unlock( componentsPrivateApis );
 
 interface GridItemProps< Item > {
@@ -277,9 +277,8 @@ export default function ViewGrid< Item >( {
 		{ regularFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
+	const previewSize = usePreviewSize();
 	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
-	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
 	return (
 		<>
 			{ hasData && (
@@ -291,14 +290,14 @@ export default function ViewGrid< Item >( {
 					aria-busy={ isLoading }
 				>
 					<VStack spacing={ 8 }>
-						{ chunk( data, usedPreviewSize ).map( ( row, i ) => (
+						{ chunk( data, previewSize ).map( ( row, i ) => (
 							<Composite.Row
 								key={ i }
 								role="row"
 								className="dataviews-view-grid__row"
 							>
 								<Grid
-									templateColumns={ `repeat( ${ usedPreviewSize }, minmax(0, 1fr) )` }
+									templateColumns={ `repeat( ${ previewSize }, minmax(0, 1fr) )` }
 									gap={ 8 }
 								>
 									{ row.map( ( item: any ) => (

diff --git a/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
@@ -43,7 +43,7 @@ function useViewPortBreakpoint() {
 	return 'mobile';
 }
 
-export function useUpdatedPreviewSizeOnViewportChange() {
+export function usePreviewSize() {
 	const view = useContext( DataViewsContext ).view as ViewGrid;
 	const viewport = useViewPortBreakpoint();
 	return useMemo( () => {
@@ -53,15 +53,14 @@ export function useUpdatedPreviewSizeOnViewportChange() {
 			const breakValueProp = viewport === 'mobile' ? 'min' : 'default';
 			return viewportBreaks[ viewport ][ breakValueProp ];
 		}
-		let newPreviewSize;
 		const breakValues = viewportBreaks[ viewport ];
 		if ( previewSize < breakValues.min ) {
-			newPreviewSize = breakValues.min;
+			return breakValues.min;
 		}
 		if ( previewSize > breakValues.max ) {
-			newPreviewSize = breakValues.max;
+			return breakValues.max;
 		}
-		return newPreviewSize;
+		return previewSize;
 	}, [ viewport, view ] );
 }
 

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -1,7 +1,4 @@
 .dataviews-view-grid {
-	display: flex;
-	align-items: flex-start;
-	justify-content: center;
 	margin-bottom: auto;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
@@ -118,7 +115,7 @@
 }
 
 .dataviews-view-grid.dataviews-view-grid {
-	@container (max-width: 480px) {
+	@container (max-width: 430px) {
 		padding-left: $grid-unit-30;
 		padding-right: $grid-unit-30;
 	}