Fix: убрана горизонтальная полоса прокрутки в таблице товаров (overflow-x: hidden, колонки 100%)

Made-with: Cursor

HISTORY.md

@@ -2,6 +2,16 @@
 
 # История изменений ERP WaterSurf
 
+## 2025-02-25 22:40 UTC – Убрана горизонтальная полоса прокрутки в таблице товаров
+
+**Проблема**: В табличной части заказа по-прежнему отображалась горизонтальная полоса прокрутки.
+
+**Решение**: Для обёртки таблицы задано `overflow-x: hidden`, у колонок убраны `min-width`, для ячеек включены `overflow: hidden` и `box-sizing: border-box`. Ширины колонок заданы в сумме 100% (45+14+12+10+14+5), чтобы таблица не выходила за контейнер.
+
+**Изменения**: theme-compact.css.
+
+---
+
 ## 2025-02-25 22:35 UTC – Табличная часть заказа: без скролла, цена/стоимость с разделителем
 
 **Проблема**: В таблице товаров появлялась горизонтальная полоса прокрутки; поле «Товар» слишком широкое; в полях «Цена» и «Стоимость» не было разделителя разрядов.

app/static/css/theme-compact.css

@@ -86,7 +86,7 @@
 
 /* Таблица товаров: без горизонтального скролла, компактные колонки */
 .ws-table-wrap {
-  overflow-x: auto;
+  overflow-x: hidden;
   max-width: 100%;
 }
 
@@ -94,12 +94,42 @@
   table-layout: fixed;
   width: 100%;
   min-width: 0;
+  border-collapse: collapse;
+}
+
+.ws-table-items th,
+.ws-table-items td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
 }
 
 /* Товар: ограниченная ширина, длинное название обрезается */
 .ws-table-items .ws-col-product {
-  width: 28%;
-  overflow: hidden;
+  width: 45%;
+}
+
+/* Цена: поле под 8 знаков, значение справа */
+.ws-table-items .ws-col-price {
+  width: 14%;
+}
+
+/* Валюта */
+.ws-table-items .ws-col-currency {
+  width: 12%;
+}
+
+.ws-table-items .ws-col-qty {
+  width: 10%;
+}
+
+/* Стоимость: справа, разделитель в JS */
+.ws-table-items .ws-col-cost {
+  width: 14%;
+}
+
+.ws-table-items .ws-col-del {
+  width: 5%;
 }
 
 .ws-table-items .ws-col-product select {
@@ -108,47 +138,21 @@
   text-overflow: ellipsis;
 }
 
-/* Цена: поле под 8 знаков, значение справа */
-.ws-table-items .ws-col-price {
-  width: 14%;
-}
-
 .ws-table-items .ws-col-price input {
   width: 100% !important;
   max-width: 100%;
   text-align: right;
   font-variant-numeric: tabular-nums;
-}
-
-/* Валюта */
-.ws-table-items .ws-col-currency {
-  width: 12%;
+  box-sizing: border-box;
 }
 
 .ws-table-items .ws-col-currency select {
   max-width: 100%;
 }
 
-.ws-table-items .ws-col-qty {
-  width: 10%;
-  min-width: 4rem;
-}
-
 .ws-table-items td.ws-col-qty input,
 .ws-table-items .ws-col-qty input {
   width: 4ch !important;
-  max-width: 5rem;
+  max-width: 100%;
   box-sizing: border-box;
 }
-
-/* Стоимость: справа, разделитель в JS */
-.ws-table-items .ws-col-cost {
-  width: 14%;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.ws-table-items .ws-col-del {
-  width: 5%;
-  min-width: 3rem;
-}