diff --git a/changelog/fix-8781-transaction-search-fields b/changelog/fix-8781-transaction-search-fields new file mode 100644 index 00000000000..ef142316156 --- /dev/null +++ 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 index 90288f81f17..3788096bc00 100644 --- 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; + } + } + } + } }