Fix WooCommerce Order Screen responsive problem to show full order's details.

fix-wc-orders-screen.php

<?php

/* 
Fix WooCommerce Order Screen responsive problem to show full order's details.
Snippet by Amirhp.Com - Tested on WC 9.1.2 & WP 6.6.1
*/
add_action("manage_shop_order_posts_custom_column", "wc_fix_render_column", 10, 2 );
add_action("manage_woocommerce_page_wc-orders_custom_column", "wc_fix_render_column", 10, 2 );
add_action("admin_enqueue_scripts", "wc_fix_admin_styles");

function wc_fix_admin_styles(){
  $screen    = get_current_screen();
  $screen_id = $screen ? $screen->id : '';
  if (in_array( $screen_id, wc_get_screen_ids() ) ) {
    wp_enqueue_style("woocommerce_admin_styles");
    wp_add_inline_style("woocommerce_admin_styles", '@media screen and (max-width: 782px) {
      .post-type-shop_order .wp-list-table tr:not(.is-expanded) td.column-order_number a.order-view, .woocommerce_page_wc-orders .wc-orders-list-table.wp-list-table tr:not(.is-expanded) td.column-order_number a.order-view{ width: calc(100% - 2rem); }
      .order_number.column-order_number.has-row-actions.column-primary { display: block; }
      .post-type-shop_order .wp-list-table td.column-order_number .order-preview, .woocommerce_page_wc-orders .wc-orders-list-table.wp-list-table td.column-order_number .order-preview { display: none; }
      .post-type-shop_order .wp-list-table tr:not(.is-expanded) td.column-order_date, .woocommerce_page_wc-orders .wc-orders-list-table.wp-list-table tr:not(.is-expanded) td.column-order_date { width: 16ch !important; }
    }');
  }
}
function wc_fix_render_column($column_id, $order_id){
  if ($column_id == "order_number") {
    echo '<button type="button" class="toggle-row"><span class="screen-reader-text">Show more details</span></button>';
  }
}