diff --git a/ui/src/pages/OrderPriceList.vue b/ui/src/pages/OrderPriceList.vue
index 4ab5ade..1df756f 100644
--- a/ui/src/pages/OrderPriceList.vue
+++ b/ui/src/pages/OrderPriceList.vue
@@ -154,7 +154,8 @@
class="table-wrap"
:style="{
'--sticky-scroll-comp': `${scrollRightComp}px`,
- '--sticky-left-width': `${topScrollLeftWidth}px`
+ '--sticky-left-width': `${topScrollLeftWidth}px`,
+ '--table-right-padding': `${tableRightPadding}px`
}"
>
@@ -1484,13 +1485,18 @@ const horizontalOverflowActive = computed(() => {
})
const scrollRightComp = computed(() => horizontalOverflowActive.value ? stickyScrollComp.value : 0)
const topScrollLeftWidth = computed(() => horizontalOverflowActive.value ? stickyLeftWidth.value : 0)
+const tableRightPadding = computed(() => horizontalOverflowActive.value ? stickyLeftWidth.value + 96 : 0)
+const effectiveTableWidth = computed(() => {
+ const wrapWidth = Number(tableWrapWidth.value || 0)
+ return horizontalOverflowActive.value ? tableMinWidth.value : Math.max(tableMinWidth.value, wrapWidth)
+})
const tableScrollWidth = computed(() => Math.max(
- tableMinWidth.value + scrollRightComp.value + (horizontalOverflowActive.value ? 48 : 0),
- horizontalOverflowActive.value ? measuredTableScrollWidth.value : tableMinWidth.value
+ effectiveTableWidth.value + scrollRightComp.value + (horizontalOverflowActive.value ? 48 : 0),
+ horizontalOverflowActive.value ? measuredTableScrollWidth.value : effectiveTableWidth.value
))
const tableStyle = computed(() => ({
- width: `${tableMinWidth.value}px`,
- minWidth: `${tableMinWidth.value}px`,
+ width: `${effectiveTableWidth.value}px`,
+ minWidth: `${effectiveTableWidth.value}px`,
tableLayout: 'fixed'
}))
const stickyColumnNames = computed(() => {
@@ -1751,9 +1757,9 @@ function updateTableScrollWidth () {
const measured = Math.max(
Number(middle?.scrollWidth || 0),
Number(table?.scrollWidth || 0),
- tableMinWidth.value + scrollRightComp.value + (horizontalOverflowActive.value ? 48 : 0)
+ effectiveTableWidth.value + scrollRightComp.value + (horizontalOverflowActive.value ? 48 : 0)
)
- const nextMeasured = horizontalOverflowActive.value ? measured : tableMinWidth.value
+ const nextMeasured = horizontalOverflowActive.value ? measured : effectiveTableWidth.value
if (nextMeasured > 0 && nextMeasured !== measuredTableScrollWidth.value) {
measuredTableScrollWidth.value = nextMeasured
}
@@ -1999,7 +2005,7 @@ onBeforeUnmount(() => {
height: calc(var(--pricing-table-height) - var(--top-scroll-height));
min-height: calc(var(--pricing-table-height) - var(--top-scroll-height));
max-height: calc(var(--pricing-table-height) - var(--top-scroll-height));
- padding-right: calc(var(--sticky-left-width, 0px) + 96px);
+ padding-right: var(--table-right-padding, 0px);
box-sizing: border-box;
overflow: auto !important;
scrollbar-gutter: stable both-edges;