Зафиксированы ширины колонок таблицы для стабильного отображения при редактировании

- Колонка 'Количество' фиксирована на 120px
- Колонка 'Причина' фиксирована на 150px
- Колонка 'Действия' фиксирована на 100px
- Input поле количества с margin-left: auto для выравнивания справа
- Таблица больше не 'прыгает' при переключении в режим редактирования
- Улучшена визуальная стабильность интерфейса
This commit is contained in:
2025-12-11 00:19:09 +03:00
parent b2a29bf1aa
commit 1607fbe3fe

View File

@@ -180,11 +180,11 @@
<thead class="table-light">
<tr>
<th scope="col" class="px-3 py-2">Товар</th>
<th scope="col" class="px-3 py-2 text-end">Количество</th>
<th scope="col" class="px-3 py-2">Причина</th>
<th scope="col" class="px-3 py-2 text-end" style="width: 120px;">Количество</th>
<th scope="col" class="px-3 py-2" style="width: 150px;">Причина</th>
<th scope="col" class="px-3 py-2">Примечания</th>
{% if document.can_edit %}
<th scope="col" class="px-3 py-2"></th>
<th scope="col" class="px-3 py-2" style="width: 100px;"></th>
{% endif %}
</tr>
</thead>
@@ -194,15 +194,15 @@
<td class="px-3 py-2">
<a href="{% url 'products:product-detail' item.product.id %}">{{ item.product.name }}</a>
</td>
<td class="px-3 py-2 text-end">
<td class="px-3 py-2 text-end" style="width: 120px;">
<span class="item-quantity-display">{{ item.quantity|smart_quantity }}</span>
{% if document.can_edit %}
<input type="number" class="form-control form-control-sm item-quantity-input"
value="{{ item.quantity }}" step="0.001" min="0.001"
style="display: none; width: 100px; text-align: right;">
style="display: none; width: 100px; text-align: right; margin-left: auto;">
{% endif %}
</td>
<td class="px-3 py-2">
<td class="px-3 py-2" style="width: 150px;">
<span class="item-reason-display"><span class="badge bg-light text-dark">{{ item.get_reason_display }}</span></span>
{% if document.can_edit %}
<select class="form-select form-select-sm item-reason-input" style="display: none;">
@@ -221,7 +221,7 @@
{% endif %}
</td>
{% if document.can_edit %}
<td class="px-3 py-2 text-end">
<td class="px-3 py-2 text-end" style="width: 100px;">
<div class="btn-group btn-group-sm item-action-buttons">
<button type="button" class="btn btn-outline-primary btn-edit-item" title="Редактировать">
<i class="bi bi-pencil"></i>