SYL-4118: Mobile UI fixes in admin panel (#17442)

![image](https://github.com/user-attachments/assets/e582bae6-bfd2-4def-aa11-89b1159bbd2e)

src/Sylius/Bundle/AdminBundle/templates/order/show/content/header/title_block/title.html.twig

@@ -3,7 +3,7 @@
 {% set order = hookable_metadata.context.resource %}
 
 <div class="col-12 col-md-6">
-    <div class="d-md-flex gap-2 align-items-center">
+    <div class="d-flex gap-2 align-items-center">
         <h1 class="page-title">
             {{ 'sylius.ui.order'|trans }}
             #{{ order.number }}

src/Sylius/Bundle/AdminBundle/templates/order/show/content/sections/payments/items.html.twig

@@ -2,6 +2,7 @@
 
 <div class="py-3">
     {% if order.hasPayments %}
+        <div class="table-responsive">
             <table class="table table-vcenter table-borderless table-sm card-table">
                 <tbody>
                 {% for payment in order.payments %}
@@ -11,6 +12,7 @@
                 {% endfor %}
                 </tbody>
             </table>
+        </div>
     {% else %}
         <span class="px-3 text-secondary italic" {{ sylius_test_html_attribute('no-payments') }}>{{ 'sylius.ui.no_payments'|trans }}</span>
     {% endif %}

src/Sylius/Bundle/AdminBundle/templates/order/show/content/sections/shipments/item/actions.html.twig

@@ -1,4 +1,4 @@
-<td class="w-1">
+<td class="w-1 px-2">
     <div class="d-flex justify-content-end">
         {% hook 'actions' %}
     </div>

src/Sylius/Bundle/AdminBundle/templates/order/show/content/sections/shipments/item/general.html.twig

@@ -1,6 +1,6 @@
 {% set shipment = hookable_metadata.context.shipment %}
 
-<td class="px-3 py-2">
+<td class="px-3 py-2 text-nowrap">
     <div class="py-2">
         <strong {{ sylius_test_html_attribute('shipment-method') }}>{{ shipment.method.name }}</strong>
         <div class="text-secondary">{{ ux_icon('tabler:world') }} {{ shipment.method.zone }}</div>

src/Sylius/Bundle/AdminBundle/templates/order/show/content/sections/shipments/items.html.twig

@@ -2,6 +2,7 @@
 
 <div class="py-3">
     {% if order.hasShipments %}
+        <div class="table-responsive">
             <table class="table table-vcenter table-borderless table-sm card-table">
                 <tbody>
                 {% for shipment in order.shipments %}
@@ -11,6 +12,7 @@
                 {% endfor %}
                 </tbody>
             </table>
+        </div>
     {% else %}
         <span class="px-3 text-secondary italic">{{ 'sylius.ui.there_are_no_shipments_to_display'|trans }}</span>
     {% endif %}

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/content/header/title_block.html.twig

@@ -1,3 +1,3 @@
-<div class="row mt-3">
+<div class="row mt-3 row-gap-2">
     {% hook 'title_block' %}
 </div>

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/navbar.html.twig

@@ -1,5 +1,5 @@
 <header class="navbar d-print-none">
-    <div class="container-xl d-flex">
+    <div class="container-xl d-flex gap-2 flex-nowrap">
         {% hook 'sylius_admin.common.component.navbar' with { _prefixes: [] } %}
     </div>
 </header>

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/navbar/items.html.twig

@@ -1,3 +1,3 @@
-<div class="nav align-items-center gap-3">
+<div class="nav align-items-center gap-3 flex-nowrap flex-shrink-0">
     {% hook 'items' %}
 </div>

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/navbar/menu.html.twig

@@ -1,3 +1,3 @@
-<div class="d-flex flex-wrap sm-align-items-center gap-3" id="navbar-menu">
+<div class="d-flex flex-wrap gap-3 flex-shrink-1" id="navbar-menu">
     {% hook 'menu' %}
 </div>