Fix mobile layout; scroll tables themselves, not cards

web/src/main/resources/static/css/app.css

@@ -155,6 +155,8 @@ a:not(.btn):hover { color: var(--c-text-link-hover); }
 
 /* Tables */
 table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
+/* Прокручивается только таблица (обёртка ставится скриптом table-scroll.js), не карточка */
+.table-scroll-box { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
 th { text-align: left; font-weight: 500; color: var(--c-text-muted); padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--c-border); }
 td { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--c-border); }
 tr:last-child td { border-bottom: none; }
@@ -185,6 +187,16 @@ tr:last-child td { border-bottom: none; }
 .filter-select { width: auto; }
 .hidden { display: none !important; }
 
+/* На узком экране формы-строки растягиваются и переносят элементы:
+   нативный select иначе тянется по самому длинному пункту и вылезает за экран */
+@media (max-width: 640px) {
+    .inline-form { display: flex; flex-wrap: wrap; width: 100%; }
+    .inline-form .input, .inline-form select { width: 100%; min-width: 0; }
+    .inline-form .btn { flex: 0 0 auto; }
+    .actions-cell .inline-form { display: inline-block; width: auto; }
+    .actions-cell .inline-form .input, .actions-cell .inline-form select { width: auto; }
+}
+
 /* Toast-уведомление */
 .toast { position: fixed; top: 1rem; right: 1rem; z-index: 50; width: 20rem; }
 
@@ -412,9 +424,12 @@ th.th-filterable { padding-bottom: 0.35rem; }
 .article-nav .btn { min-width: 0; max-width: calc(50% - 0.4rem); overflow: hidden; white-space: nowrap; }
 .article-nav .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 1000px) {
-    .learn-layout { grid-template-columns: 1fr; }
+    /* minmax(0, 1fr), а не 1fr: иначе колонка растягивается до min-content
-    .learn-main { order: 1; }
+       длинных строк кода и таблиц и страница вылезает за экран */
-    .learn-side { position: static; max-height: none; order: 2; }
+    .learn-layout { grid-template-columns: minmax(0, 1fr); }
+    .learn-layout > * { min-width: 0; }
+    .learn-main { order: 1; min-width: 0; }
+    .learn-side { position: static; max-height: none; order: 2; min-width: 0; }
 }
 
 /* Панель форматирования markdown и встроенный редактор */

web/src/main/resources/static/js/table-scroll.js

@@ -0,0 +1,23 @@
+/* Прокрутка только самой таблицы, а не всей карточки.
+   Оборачиваем таблицы в .table-scroll-box; таблицы в markdown-статьях
+   уже обёрнуты сервером (.table-scroll) и пропускаются. */
+(function () {
+    function wrap(table) {
+        if (table.closest('.table-scroll, .table-scroll-box')) return;
+        if (table.closest('.md-body')) return;
+        var box = document.createElement('div');
+        box.className = 'table-scroll-box';
+        table.parentNode.insertBefore(box, table);
+        box.appendChild(table);
+    }
+
+    function ready() {
+        document.querySelectorAll('table').forEach(wrap);
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', ready);
+    } else {
+        ready();
+    }
+})();

web/src/main/resources/templates/fragments/base.html

@@ -10,6 +10,7 @@
     <link id="hljs-dark" rel="stylesheet" th:href="@{/css/hljs-github-dark.css}" disabled>
     <script th:src="@{/js/htmx.min.js}" defer></script>
     <script th:src="@{/js/highlight.min.js}" defer></script>
+    <script th:src="@{/js/table-scroll.js}" defer></script>
     <script th:src="@{/js/tablekit.js}" defer></script>
     <script th:src="@{/js/ui-state.js}" defer></script>
     <script th:src="@{/js/md-content.js}" defer></script>