Address responsiveness issues with order list table in admin (#47684)

Improve (HPOS) order admin list's responsiveness.
This commit is contained in:
Jorge A. Torres 2024-05-23 15:24:03 -05:00 committed by GitHub
parent d9bcf83bf0
commit 36fa4f82ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 58 additions and 19 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Address responsiveness issues in orders list table.

View File

@ -3390,33 +3390,72 @@ ul.wc_coupon_list_block {
}
}
.woocommerce_page_wc-orders .wc-orders-list-table.wp-list-table,
.post-type-shop_order .wp-list-table {
td.check-column {
.check-column {
width: 1em;
vertical-align: top;
}
thead th.column-order_number {
width: 100%;
}
td.column-order_number {
padding-left: 0;
padding-bottom: 0.5em;
}
.toggle-row {
height: 20px;
}
td.column-order_status,
td.column-order_date {
display: inline-block !important;
padding: 0 1em 1em 1em !important;
&::before {
display: none !important;
.order-preview {
margin-top: 13px;
}
}
td.column-order_date {
padding-left: 0 !important;
td.column-order_total,
td.column-wc_actions {
text-align: left;
}
td.column-order_status {
float: right;
td.column-wc_actions {
min-height: 2.0em !important;
}
tr:not(.is-expanded) {
td.column-order_number {
vertical-align: top;
a.order-view {
display: inline-block;
width: calc(100% - 48px - 10ch - 20ch);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
td.column-order_date {
width: 10ch !important;
top: 1em;
right: calc(20ch + 48px);
}
td.column-order_status {
top: -1em;
right: 48px;
}
td.column-order_status,
td.column-order_date {
padding: 0 !important;
display: block !important;
float: right;
&::before {
display: none !important;
}
}
}
}
}
@ -7538,10 +7577,6 @@ table.bar_chart {
.is-expanded td:not(.hidden) {
overflow: visible;
}
.toggle-row {
top: -15px;
}
}
}
}