fix table widths

Automattic · May 8, 2024 · 74f4dd4 · 74f4dd4
1 parent a6e8f0c
commit 74f4dd4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/client/sites-dashboard-v2/dotcom-style.scss b/client/sites-dashboard-v2/dotcom-style.scss
@@ -81,13 +81,18 @@
 	table.dataviews-view-table {
 		--color-border-dataviews-view-table: #f1f1f1;
 		table-layout: fixed;
-		@include break-large {
-			width: auto;
-		}
 	}
 
 	table.dataviews-view-table thead .dataviews-view-table__row th {
 		border-bottom-color: var(--color-border-dataviews-view-table);
+		@include break-large {
+			padding-left: 26px;
+		}
+		@include break-huge {
+			&:first-child {
+				padding-left: 64px;
+			}
+		}
 
 		span,
 		.dataviews-view-table-header-button {
@@ -97,6 +102,14 @@
 
 	table.dataviews-view-table .dataviews-view-table__row td {
 		border-bottom-color: var(--color-border-dataviews-view-table);
+		@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
@@ -105,6 +105,7 @@ const DotcomSitesDataViews = ( {
 						<span>{ __( 'Site' ) }</span>
 					</SiteSort>
 				),
+				width: '45%',
 				getValue: ( { item }: { item: SiteInfo } ) => item.URL,
 				render: ( { item }: { item: SiteInfo } ) => {
 					return <SiteField site={ item } openSitePreviewPane={ openSitePreviewPane } />;
@@ -130,6 +131,7 @@ const DotcomSitesDataViews = ( {
 				},
 				enableHiding: false,
 				enableSorting: false,
+				width: '116px',
 			},
 			{
 				id: 'last-publish',
@@ -157,6 +159,7 @@ const DotcomSitesDataViews = ( {
 				render: ( { item }: { item: SiteInfo } ) => <ActionsField site={ item } />,
 				enableHiding: false,
 				enableSorting: false,
+				width: '48px',
 			},
 			{
 				id: 'magic',

diff --git a/client/sites-dashboard-v2/sites-dataviews/style.scss b/client/sites-dashboard-v2/sites-dataviews/style.scss
@@ -34,9 +34,9 @@
 		width: 180px;
 	}
 
-	@media (min-width: 2040px) {
+	@include break-wide {
 		.sites-dataviews__site-name {
-			width: 250px;
+			width: 260px;
 		}
 	}
 }

diff --git a/client/sites-dashboard-v2/style.scss b/client/sites-dashboard-v2/style.scss
@@ -58,15 +58,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 {
@@ -136,7 +146,7 @@
 		}
 		.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 +164,7 @@
 			padding-bottom: 8px;
 
 			& > :first-child {
-				margin-inline-start: 8px;
+				margin-inline-start: 16px;
 			}
 
 			.components-input-control {
@@ -220,7 +230,7 @@
 			}
 
 			th[data-field-id="actions"] {
-				padding-inline-end: 12px;
+				padding-inline-end: 16px;
 				text-align: end;
 			}
 		}
@@ -565,6 +575,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;