ThreatsDataViews: Improve responsiveness (#40670)

* Init project branch

* Init project branch

* Improve component responsiveness

* Init project branch

* Fix merge conflict

* Simplify, and only default to list view in mobile

* Fix spacing

* Minor adjustments to initialization of defaultLayouts, remove memo

* Remove style overrides on core component

* Reapply min-width for ScanToggleGroupControl

---------

Co-authored-by: Nate Weller <[email protected]>

Author: dkmyta

projects/js-packages/components/components/threats-data-views/index.tsx

@@ -16,6 +16,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
 import Badge from '../badge/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import ThreatFixerButton from '../threat-fixer-button/index.js';
 import ThreatSeverityBadge from '../threat-severity-badge/index.js';
 import {
@@ -91,6 +92,8 @@ export default function ThreatsDataViews( {
 	onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
 	header?: JSX.Element;
 } ): JSX.Element {
+	const [ isSm ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
+
 	const baseView = {
 		sort: {
 			field: 'severity',
@@ -126,14 +129,21 @@ export default function ThreatsDataViews( {
 		},
 	};
 
+	/**
+	 * Default View Type.
+	 *
+	 * Set the default view type (list or table) based on the initial screen size.
+	 */
+	const defaultViewType: 'list' | 'table' = isSm ? 'list' : 'table';
+
 	/**
 	 * DataView view object - configures how the dataset is visible to the user.
 	 *
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
 	 */
 	const [ view, setView ] = useState< View >( {
-		type: 'table',
-		...defaultLayouts.table,
+		type: defaultViewType,
+		...defaultLayouts[ defaultViewType ],
 	} );
 
 	/**

projects/plugins/protect/src/js/routes/home/styles.module.scss

@@ -2,11 +2,6 @@
 	padding-left: 0;
 	padding-right: 0;
 	overflow: hidden;
-
-	> * {
-		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
-		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
-	}
 }
 
 .view-scan-report {

projects/plugins/protect/src/js/routes/scan/styles.module.scss

@@ -1,3 +1,15 @@
+.scan-results-container {
+	:global {
+		@media ( max-width: 599px ) {
+			div.dataviews-wrapper .dataviews__view-actions {
+				flex-wrap: wrap;
+				justify-content: center;
+				gap: calc( var( --spacing-base ) * 1.5 ); // 12px;
+			}
+		}
+	}
+}
+
 .hero-main {
 	max-width: 550px;
 }
@@ -17,11 +29,6 @@
 	padding-left: 0;
 	padding-right: 0;
 	overflow: hidden;
-
-	> * {
-		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
-		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
-	}
 }
 
 .progress-animation {
@@ -33,3 +40,7 @@
 .last-checked {
 	width: fit-content;
 }
+
+.toggle-group-control {
+	min-width: 300px;
+}