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,15 +2,17 @@
 
 <div class="py-3">
     {% if order.hasPayments %}
-        <table class="table table-vcenter table-borderless table-sm card-table">
-            <tbody>
-            {% for payment in order.payments %}
-                <tr {{ sylius_test_html_attribute('payment') }}>
-                    {% hook 'item' with { resource: order, payment } %}
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
+        <div class="table-responsive">
+            <table class="table table-vcenter table-borderless table-sm card-table">
+                <tbody>
+                {% for payment in order.payments %}
+                    <tr {{ sylius_test_html_attribute('payment') }}>
+                        {% hook 'item' with { resource: order, payment } %}
+                    </tr>
+                {% 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,15 +2,17 @@
 
 <div class="py-3">
     {% if order.hasShipments %}
-        <table class="table table-vcenter table-borderless table-sm card-table">
-            <tbody>
-            {% for shipment in order.shipments %}
-                <tr {{ sylius_test_html_attribute('shipment') }}>
-                    {% hook 'item' with { shipment } %}
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
+        <div class="table-responsive">
+            <table class="table table-vcenter table-borderless table-sm card-table">
+                <tbody>
+                {% for shipment in order.shipments %}
+                    <tr {{ sylius_test_html_attribute('shipment') }}>
+                        {% hook 'item' with { shipment } %}
+                    </tr>
+                {% 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>