From 9f76302ccca58f9900c0bc15111e10eaec059c64 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 20 Jun 2023 15:11:45 +0200 Subject: allow wrapper to shrink, consider gaps and padddings in columns calculation Signed-off-by: Maksim Sukharev --- src/components/CallView/Grid/Grid.vue | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) (limited to 'src/components/CallView') diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue index ab7e3eb53..c349ae740 100644 --- a/src/components/CallView/Grid/Grid.vue +++ b/src/components/CallView/Grid/Grid.vue @@ -405,12 +405,15 @@ export default { // Max number of columns possible columnsMax() { - if (Math.floor(this.gridWidth / this.dpiAwareMinWidth) < 1) { - // Return at least 1 column - return 1 - } else { - return Math.floor(this.gridWidth / this.dpiAwareMinWidth) - } + // Max amount of columns that fits on screen, including gaps and paddings (8px) + const calculatedApproxColumnsMax = Math.floor((this.gridWidth - 8 * this.columns) / this.dpiAwareMinWidth) + // Max amount of columns that fits on screen (with one more gap, as if we try to fit one more column) + const calculatedHypotheticalColumnsMax = Math.floor((this.gridWidth - 8 * (this.columns + 1)) / this.dpiAwareMinWidth) + // If we about to change current columns amount, check if one more column could fit the screen + // This helps to avoid flickering, when resize within 8px from minimal gridWidth for current amount of columns + const calculatedColumnsMax = calculatedApproxColumnsMax === this.columns ? calculatedApproxColumnsMax : calculatedHypotheticalColumnsMax + // Return at least 1 column + return calculatedColumnsMax <= 1 ? 1 : calculatedColumnsMax }, // Max number of rows possible @@ -675,7 +678,7 @@ export default { // currently if the user is not on the 'first page', upon resize the // current position in the videos array is lost (first element // in the grid goes back to be first video) - debounce(this.makeGrid(), 200) + debounce(this.makeGrid(), 200) }, // Find the right size if the grid in rows and columns (we already know @@ -894,12 +897,14 @@ export default { .grid-wrapper { width: 100%; + min-width: 0; position: relative; flex: 1 0 auto; } .stripe-wrapper { width: 100%; + min-width: 0; position: relative; } -- cgit v1.2.3