Decouple Documents list from search-related CSS

changelog/fix-WOOPMNT-4181-dead-css-cleanup

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Decouple the Documents list from search-related CSS: drop the misleading has-search className and the dead responsive rules in its stylesheet

client/documents/list/__tests__/__snapshots__/index.test.tsx.snap

@@ -204,7 +204,7 @@ exports[`Documents list renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="components-surface components-card woocommerce-table documents-list woocommerce-report-table has-search has-actions has-menu emotion-0 emotion-1"
+      class="components-surface components-card woocommerce-table documents-list woocommerce-report-table has-actions has-menu emotion-0 emotion-1"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -672,7 +672,7 @@ exports[`Documents list renders table summary only when the documents summary da
       </div>
     </div>
     <div
-      class="components-surface components-card woocommerce-table documents-list woocommerce-report-table has-search has-actions has-menu emotion-0 emotion-1"
+      class="components-surface components-card woocommerce-table documents-list woocommerce-report-table has-actions has-menu emotion-0 emotion-1"
       data-wp-c16t="true"
       data-wp-component="Card"
     >

client/documents/list/index.tsx

@@ -237,7 +237,7 @@ export const DocumentsList = (): JSX.Element => {
 		<Page>
 			<DocumentsFilters />
 			<TableCard
-				className="documents-list woocommerce-report-table has-search"
+				className="documents-list woocommerce-report-table"
 				title={ title }
 				isLoading={ isLoading }
 				rowsPerPage={ parseInt( getQuery().per_page ?? '', 10 ) || 25 }

client/documents/list/style.scss

@@ -27,82 +27,8 @@ button.components-button.documents-list__download-button {
  * Depending on the wc-admin version, these styles are not loaded if not using the analytics report components, so they need to be included here.
  * If we switch to the Report components, we can remove them from here, as they would be loaded by wc-admin.
 */
-$gap: 16px;
-$gap-small: 12px;
 .woocommerce-report-table {
-	.woocommerce-search {
-		flex-grow: 1;
-	}
-
 	.woocommerce-card__header {
 		position: relative;
 	}
-
-	&.has-compare,
-	&.has-search {
-		.woocommerce-table__actions {
-			align-items: center;
-			text-align: left;
-			display: grid;
-			width: 100%;
-			grid-template-columns: auto 1fr auto;
-		}
-
-		@include breakpoint( '<960px' ) {
-			.woocommerce-table__actions {
-				grid-gap: $gap-small;
-				grid-template-columns: auto 1fr;
-				grid-row-start: 2;
-				grid-row-end: 2;
-				grid-column-start: 1;
-				grid-column-end: 4;
-				margin: 0;
-
-				.woocommerce-table__compare {
-					display: flex;
-				}
-
-				.woocommerce-search {
-					grid-area: 2 / 2 / 3 / 4;
-					margin-right: 0;
-				}
-			}
-		}
-
-		&.has-search:not( .has-compare ) {
-			.woocommerce-table__actions {
-				grid-template-columns: 1fr auto;
-
-				.woocommerce-search {
-					align-self: center;
-					grid-column-start: 1;
-					grid-column-end: 2;
-				}
-			}
-
-			@include breakpoint( '<960px' ) {
-				.woocommerce-table__actions {
-					grid-template-columns: 1fr;
-
-					.woocommerce-search {
-						grid-area: 2 / 1 / 3 / 2;
-						margin: 0;
-					}
-				}
-			}
-		}
-
-		.woocommerce-search {
-			margin: 0 $gap;
-
-			.woocommerce-select-control__control {
-				height: 38px;
-			}
-		}
-
-		.woocommerce-compare-button {
-			padding: 3px $gap-small;
-			height: auto;
-		}
-	}
 }