Fix transactions search view when it has too many search terms (#8996)

Co-authored-by: Nagesh Pai <[email protected]> Co-authored-by: Jessy Pappachan <[email protected]> Co-authored-by: Francesco <[email protected]> Co-authored-by: Timur Karimov <[email protected]> Co-authored-by: Eric Jinks <[email protected]>
Automattic · Jun 26, 2024 · 88302ad · 88302ad
1 parent e85cc3b
commit 88302ad
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/changelog/fix-8781-transaction-search-fields b/changelog/fix-8781-transaction-search-fields
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Make the search box, and typed search term visible clearly on the 'Payments > Transactions' page, when there are too many existing search tags.
diff --git a/client/transactions/list/style.scss b/client/transactions/list/style.scss
@@ -134,4 +134,64 @@ $gap-small: 12px;
 			height: auto;
 		}
 	}
+
+	.components-card__header {
+		// These styles improve the overflow behaviour of the Search component within the TableCard, when many tags are selected. Used for transaction list views. See PR #8996
+		.woocommerce-search.woocommerce-select-control
+			.woocommerce-select-control__listbox {
+			position: relative;
+			top: 5px;
+		}
+		.woocommerce-table__actions {
+			justify-content: space-between;
+
+			& > div {
+				width: 85%;
+				margin-right: 0;
+			}
+
+			button.woocommerce-table__download-button {
+				@include breakpoint( '<1040px' ) {
+					.woocommerce-table__download-button__label {
+						display: none;
+					}
+				}
+			}
+
+			.woocommerce-select-control.is-focused
+				.woocommerce-select-control__control {
+				flex-wrap: wrap;
+
+				.woocommerce-select-control__tags {
+					white-space: wrap;
+				}
+			}
+			.woocommerce-select-control__tags {
+				overflow-x: auto;
+				white-space: nowrap;
+				scrollbar-width: none;
+				margin-right: 25px;
+
+				&::after {
+					content: '';
+					position: absolute;
+					top: 0;
+					right: 0;
+					width: 25px;
+					height: 100%;
+					background: linear-gradient(
+						to right,
+						rgba( 255, 255, 255, 0 ),
+						rgba( 255, 255, 255, 1 ) 90%
+					);
+				}
+			}
+
+			@include breakpoint( '<960px' ) {
+				.woocommerce-search {
+					margin: 0;
+				}
+			}
+		}
+	}
 }