Nav Redesign v2: fix horizontal table scrolling (#90420)

Automattic · May 13, 2024 · b39ffeb · b39ffeb
1 parent ce9f136
commit b39ffeb
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 23 deletions.
diff --git a/client/sites-dashboard-v2/dotcom-style.scss b/client/sites-dashboard-v2/dotcom-style.scss
@@ -116,8 +116,21 @@
 		}
 	}
 
+	table.dataviews-view-table {
+		table-layout: fixed;
+	}
+
 	table.dataviews-view-table thead .dataviews-view-table__row th {
 		border-bottom-color: var(--color-border-secondary);
+		padding-left: 16px;
+		@include break-large {
+			padding-left: 26px;
+		}
+		@include break-huge {
+			&:first-child {
+				padding-left: 64px;
+			}
+		}
 
 		span,
 		.dataviews-view-table-header-button {
@@ -127,6 +140,14 @@
 
 	table.dataviews-view-table .dataviews-view-table__row td {
 		border-bottom-color: var(--color-border-secondary);
+		@include break-large {
+			padding-left: 26px;
+		}
+		@include break-huge {
+			&:first-child {
+				padding-left: 64px;
+			}
+		}
 	}
 
 	table.dataviews-view-table th,

diff --git a/client/sites-dashboard-v2/sites-dataviews/index.tsx b/client/sites-dashboard-v2/sites-dataviews/index.tsx
@@ -1,3 +1,5 @@
+import { DESKTOP_BREAKPOINT, WIDE_BREAKPOINT } from '@automattic/viewport';
+import { useBreakpoint } from '@automattic/viewport-react';
 import { __ } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import classnames from 'classnames';
@@ -51,6 +53,17 @@ const DotcomSitesDataViews = ( {
 }: Props ) => {
 	const { __ } = useI18n();
 	const userId = useSelector( getCurrentUserId );
+	const isWide = useBreakpoint( WIDE_BREAKPOINT );
+	const isDesktop = useBreakpoint( DESKTOP_BREAKPOINT );
+	const getSiteNameColWidth = ( isDesktop: boolean, isWide: boolean ) => {
+		if ( isWide ) {
+			return '40%';
+		}
+		if ( isDesktop ) {
+			return '50%';
+		}
+		return '70%';
+	};
 
 	const openSitePreviewPane = useCallback(
 		( site: SiteExcerptData ) => {
@@ -110,6 +123,7 @@ const DotcomSitesDataViews = ( {
 						<span>{ __( 'Site' ) }</span>
 					</SiteSort>
 				),
+				width: getSiteNameColWidth( isDesktop, isWide ),
 				getValue: ( { item }: { item: SiteInfo } ) => item.URL,
 				render: ( { item }: { item: SiteInfo } ) => {
 					return <SiteField site={ item } openSitePreviewPane={ openSitePreviewPane } />;
@@ -123,13 +137,15 @@ const DotcomSitesDataViews = ( {
 				render: ( { item }: { item: SiteInfo } ) => <SitePlan site={ item } userId={ userId } />,
 				enableHiding: false,
 				enableSorting: false,
+				width: '5%',
 			},
 			{
 				id: 'status',
 				header: <span>{ __( 'Status' ) }</span>,
 				render: ( { item }: { item: SiteInfo } ) => <SiteStatus site={ item } />,
 				enableHiding: false,
 				enableSorting: false,
+				width: '116px',
 			},
 			{
 				id: 'last-publish',
@@ -147,6 +163,7 @@ const DotcomSitesDataViews = ( {
 					item.options?.updated_at ? <TimeSince date={ item.options.updated_at } /> : '',
 				enableHiding: false,
 				enableSorting: false,
+				width: '100px',
 			},
 			{
 				id: 'stats',
@@ -159,13 +176,15 @@ const DotcomSitesDataViews = ( {
 				render: ( { item }: { item: SiteInfo } ) => <SiteStats site={ item } />,
 				enableHiding: false,
 				enableSorting: false,
+				width: '80px',
 			},
 			{
 				id: 'actions',
 				header: <span>{ __( 'Actions' ) }</span>,
 				render: ( { item }: { item: SiteInfo } ) => <ActionsField site={ item } />,
 				enableHiding: false,
 				enableSorting: false,
+				width: '48px',
 			},
 			// Dummy fields to allow people to sort by them on mobile.
 			{
@@ -202,7 +221,7 @@ const DotcomSitesDataViews = ( {
 				enableSorting: false,
 			},
 		],
-		[ __, openSitePreviewPane, userId, dataViewsState, setDataViewsState ]
+		[ __, openSitePreviewPane, userId, dataViewsState, setDataViewsState, isWide, isDesktop ]
 	);
 
 	// Create the itemData packet state

diff --git a/client/sites-dashboard-v2/sites-dataviews/style.scss b/client/sites-dashboard-v2/sites-dataviews/style.scss
@@ -14,7 +14,7 @@
 }
 
 .sites-dataviews__site-name {
-	align-self: center;
+	align-self: flex-start;
 	display: inline-block;
 	text-align: left;
 	text-overflow: ellipsis;
@@ -50,18 +50,6 @@
 	}
 }
 
-.preview-hidden {
-	.sites-dataviews__site-name {
-		width: 180px;
-	}
-
-	@media (min-width: 2040px) {
-		.sites-dataviews__site-name {
-			width: 250px;
-		}
-	}
-}
-
 .is-section-a8c-for-agencies-sites {
 	a.site-actions__menu-item {
 		&:hover,

diff --git a/client/sites-dashboard-v2/style.scss b/client/sites-dashboard-v2/style.scss
@@ -38,6 +38,23 @@
 		padding-block-start: 24px;
 	}
 
+	.sites-dataviews__site {
+		.button {
+			flex-shrink: 0;
+			@include breakpoint-deprecated("<480px") {
+				width: 90px;
+			}
+		}
+		.sites-dataviews__site-name {
+			padding: 0;
+		}
+	}
+	th[data-field-id="actions"] {
+		padding-inline-end: 16px;
+		text-align: end;
+	}
+
+
 	@media (min-width: $break-large) {
 		background: inherit;
 
@@ -58,15 +75,25 @@
 
 		.dataviews-view-table tr th:first-child,
 		.dataviews-view-table tr td:first-child {
-			padding-left: 64px;
+			padding-left: 30px;
 		}
 		.dataviews-view-table tr th:last-child,
 		.dataviews-view-table tr td:last-child {
-			padding-right: 64px;
+			padding-right: 30px;
 			width: 20px;
 			white-space: nowrap;
 		}
 	}
+	@media (min-width: $break-huge) {
+		.dataviews-view-table tr th:first-child,
+		.dataviews-view-table tr td:first-child {
+			padding-left: 64px;
+		}
+		.dataviews-view-table tr th:last-child,
+		.dataviews-view-table tr td:last-child {
+			padding-right: 64px;
+		}
+	}
 
 	@media (max-width: 660px) {
 		.a4a-layout__header-main {
@@ -132,11 +159,11 @@
 
 		.dataviews-view-table tr th:first-child,
 		.dataviews-view-table tr td:first-child {
-			padding: 8px 24px 8px 16px;
+			padding: 8px 16px 8px 16px;
 		}
 		.dataviews-view-table tr td:last-child {
 			padding: 0;
-			padding-inline-end: 8px;
+			padding-inline-end: 16px;
 		}
 
 		.components-button.is-compact.has-icon:not(.has-text).dataviews-filters-button {
@@ -154,7 +181,7 @@
 			padding-bottom: 8px;
 
 			& > :first-child {
-				margin-inline-start: 8px;
+				margin-inline-start: 16px;
 			}
 
 			.components-input-control {
@@ -215,10 +242,6 @@
 				display: none;
 			}
 
-			th[data-field-id="actions"] {
-				padding-inline-end: 12px;
-				text-align: end;
-			}
 		}
 	}
 
@@ -562,6 +585,20 @@
 				.sites-overview {
 					padding: 0;
 
+					.dataviews-filters__view-actions {
+						& > :first-child {
+							margin-inline-start: 30px;
+						}
+
+						& > :last-child {
+							margin-inline-end: 30px;
+						}
+					}
+				}
+			}
+
+			@media only screen and (min-width: $break-huge) {
+				.sites-overview {
 					.dataviews-filters__view-actions {
 						& > :first-child {
 							margin-inline-start: 64px;

diff --git a/packages/viewport/src/index.ts b/packages/viewport/src/index.ts
@@ -42,6 +42,7 @@ const SERVER_WIDTH = 769;
 
 export const MOBILE_BREAKPOINT = '<480px';
 export const DESKTOP_BREAKPOINT = '>960px';
+export const WIDE_BREAKPOINT = '>1280px';
 
 const isServer = typeof window === 'undefined' || ! window.matchMedia;