From bee56c49c88417a8a5718e54f0ab5b82d5955ba0 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Tue, 25 Aug 2026 09:38:56 +0200
Subject: [PATCH 01/10] feat(call): center the tiles of the stripe like the
 tiles of the grid

The stripe kept the default placement, so its tiles were always laid out
from the start of the row. They are now placed like the tiles of the
grid, which centers them.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/Grid/VideosGrid.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CallView/Grid/VideosGrid.vue b/src/components/CallView/Grid/VideosGrid.vue
index a24697e51c5..db3ee4c36de 100644
--- a/src/components/CallView/Grid/VideosGrid.vue
+++ b/src/components/CallView/Grid/VideosGrid.vue
@@ -430,10 +430,10 @@ export default {
 		},
 
 		// Placement of every tile of the grid, in the order they are rendered.
-		// The stripe is a single scrollable row, and the empty call view has a
-		// layout of its own, so their tiles keep the default placement.
+		// The empty call view has a layout of its own, so its tiles keep the
+		// default placement.
 		tilePlacements() {
-			if (this.isStripe || this.orderedVideos.length === 0) {
+			if (this.orderedVideos.length === 0) {
 				return []
 			}
 

From a9247202efd189d14746abf5f4cb5dac4d8fe8bb Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Wed, 19 Aug 2026 14:04:08 +0200
Subject: [PATCH 02/10] feat(call): show the local video as a tile of the
 stripe

The local video was pinned next to the stripe with a size of its own,
so it was neither paginated nor placed like the tiles it sits with. It
now takes a slot of the stripe grid, exactly like it already does in the
full grid, and is centered with the other tiles when the stripe holds
every participant.

The local video keeps being left out of the recording, which is the only
mode not reserving a slot for it anymore.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/Grid/VideosGrid.vue   | 39 ++++---------------
 src/components/CallView/shared/LocalVideo.vue | 14 -------
 2 files changed, 7 insertions(+), 46 deletions(-)

diff --git a/src/components/CallView/Grid/VideosGrid.vue b/src/components/CallView/Grid/VideosGrid.vue
index db3ee4c36de..28d430347f6 100644
--- a/src/components/CallView/Grid/VideosGrid.vue
+++ b/src/components/CallView/Grid/VideosGrid.vue
@@ -110,18 +110,6 @@
 						</template>
 					</NcButton>
 				</div>
-				<LocalVideo
-					v-if="isStripe && !isRecording"
-					ref="localVideo"
-					class="video"
-					:class="{ 'local-video--highlighted': isLocalVideoAlone && isStripe }"
-					:isStripe="true"
-					:showControls="false"
-					:token="token"
-					:localMediaModel="localMediaModel"
-					:localCallParticipantModel="localCallParticipantModel"
-					@clickVideo="handleClickLocalVideo" />
-
 				<template v-if="devMode">
 					<NcButton
 						variant="tertiary"
@@ -300,9 +288,9 @@ export default {
 			return videosCap ? Math.min(videosCap, count) : count
 		})
 
-		// The full grid reserves one slot for the local video, unless it is not
-		// shown (stripe or recording mode).
-		const noLocalVideoReserve = computed(() => props.isStripe || props.isRecording)
+		// The grid reserves one slot for the local video, unless it is not shown
+		// (recording mode).
+		const noLocalVideoReserve = computed(() => props.isRecording)
 
 		const gridDimensions = useGridDimensions({
 			wrapper: gridWrapper,
@@ -316,8 +304,8 @@ export default {
 
 		// Number of grid slots (videos per page) at any given moment, clamped to
 		// `videosCap` (`0` means no cap).
-		// The local video always takes one slot, unless it is not shown (stripe
-		// or recording mode).
+		// The local video always takes one slot, unless it is not shown
+		// (recording mode).
 		// The cap is primarily enforced by shrinking the grid layout (see
 		// `computeGridDimensions`); this clamp keeps the "videos per page" math
 		// consistent even before the layout has been recomputed.
@@ -444,13 +432,6 @@ export default {
 			})
 		},
 
-		// Whether the local video is the only tile left in the stripe. The models
-		// given to the stripe already leave out whoever is shown in the promoted
-		// area, so no tile is ever duplicated and only an empty stripe is special.
-		isLocalVideoAlone() {
-			return this.orderedVideos.length === 0
-		},
-
 		// Computed css to reactively style the grid
 		gridStyle() {
 			let columns = this.columns
@@ -636,7 +617,7 @@ export default {
 	}
 
 	&.stripe {
-		padding: var(--grid-gap) var(--grid-gap) 0 0;
+		padding-block-start: var(--grid-gap);
 	}
 }
 
@@ -746,7 +727,7 @@ export default {
 		}
 
 		&__next {
-			inset-inline-end: calc(var(--navigation-position) + var(--grid-gap));
+			inset-inline-end: var(--navigation-position);
 		}
 	}
 }
@@ -782,10 +763,4 @@ export default {
 	}
 }
 
-.local-video--highlighted {
-	inset-block-end: var(--grid-gap);
-	inset-inline-end: var(--grid-gap);
-	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
 </style>
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 4611906f110..9bc6805ec43 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -196,7 +196,6 @@ export default {
 			return {
 				'not-connected': this.isNotConnected,
 				'video-container-grid': this.isGrid,
-				'video-container-stripe': this.isStripe,
 				'video-container-big': this.isBig,
 				'video-container-small': this.isSmall,
 				presenter: this.isPresenterOverlay && this.mouseover,
@@ -392,19 +391,6 @@ export default {
 	flex-direction: column;
 }
 
-.video-container-stripe:not(.local-video--sidebar) {
-	// aspect-ratio is set according to the maximum video resolution after applying constraints (720*540)
-	--aspect-ratio: 1.33333;
-	--stripe-height: 242px;
-	position: relative;
-	flex: 0 0 calc(var(--aspect-ratio) * var(--stripe-height));
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	margin-top: auto;
-	height: var(--stripe-height) !important;
-}
-
 .video-container-big {
 	position: absolute;
 	width: calc(100% - var(--grid-gap) * 2);

From 040d91e323e163d8fe2e2b57576675f07bf775a5 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Wed, 19 Aug 2026 14:19:03 +0200
Subject: [PATCH 03/10] fix(call): make the stripe 150px tall

The stripe took 250px of the call view, which is more than it needs now
that its tiles are laid out like the tiles of the grid.

The compact tiles have to fit in what is left of the stripe once the
padding of its grid is taken out, so their minimum height follows.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/Grid/VideosGrid.vue     | 3 ++-
 src/components/CallView/Grid/gridLayout.spec.ts | 8 +++++++-
 src/components/CallView/Grid/gridLayout.ts      | 8 +++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/CallView/Grid/VideosGrid.vue b/src/components/CallView/Grid/VideosGrid.vue
index 28d430347f6..86cc3b73451 100644
--- a/src/components/CallView/Grid/VideosGrid.vue
+++ b/src/components/CallView/Grid/VideosGrid.vue
@@ -174,6 +174,7 @@ import {
 	getHalfColumnCount,
 	getHalfColumnMinWidth,
 	GRID_GAP,
+	STRIPE_HEIGHT,
 	TILE_COLUMN_SPAN,
 } from './gridLayout.ts'
 import { placeholderImage, placeholderModel, placeholderName, placeholderSharedData } from './gridPlaceholders.ts'
@@ -458,7 +459,7 @@ export default {
 
 		wrapperStyle() {
 			if (this.isStripe) {
-				return 'height: 250px'
+				return `height: ${STRIPE_HEIGHT}px`
 			} else {
 				return 'height: 100%'
 			}
diff --git a/src/components/CallView/Grid/gridLayout.spec.ts b/src/components/CallView/Grid/gridLayout.spec.ts
index 48ddcaa4bd9..4b1d0d50156 100644
--- a/src/components/CallView/Grid/gridLayout.spec.ts
+++ b/src/components/CallView/Grid/gridLayout.spec.ts
@@ -14,6 +14,7 @@ import {
 	getMinTileWidth,
 	getTargetAspectRatio,
 	GRID_GAP,
+	STRIPE_HEIGHT,
 	TILE_COLUMN_SPAN,
 } from './gridLayout.ts'
 
@@ -38,7 +39,12 @@ describe('gridLayout', () => {
 
 		test('uses the compact tile sizes for stripe/sidebar', () => {
 			expect(getMinTileWidth(true)).toBe(200)
-			expect(getMinTileHeight(true)).toBe(150)
+			expect(getMinTileHeight(true)).toBe(134)
+		})
+
+		test('fits a compact tile in the stripe', () => {
+			// The grid of the stripe is padded by a gap at its top
+			expect(getMinTileHeight(true)).toBeLessThanOrEqual(STRIPE_HEIGHT - GRID_GAP)
 		})
 
 		test('targets a wider aspect ratio for the full grid than the stripe', () => {
diff --git a/src/components/CallView/Grid/gridLayout.ts b/src/components/CallView/Grid/gridLayout.ts
index 9ceaa9b1205..6c8e74d2476 100644
--- a/src/components/CallView/Grid/gridLayout.ts
+++ b/src/components/CallView/Grid/gridLayout.ts
@@ -11,7 +11,13 @@ export const GRID_GAP = 8
 export const MIN_TILE_WIDTH = 320
 export const MIN_TILE_HEIGHT = 240
 export const MIN_TILE_WIDTH_COMPACT = 200
-export const MIN_TILE_HEIGHT_COMPACT = 150
+// A compact tile has to fit in what is left of the stripe once the padding of
+// its grid is taken out, see STRIPE_HEIGHT
+export const MIN_TILE_HEIGHT_COMPACT = 134
+
+// Height of the stripe, in px. Align with the height of the stripe wrapper in
+// VideosGrid
+export const STRIPE_HEIGHT = 150
 
 // Aspect ratio (width / height) the layout tries to reach for each tile.
 export const TARGET_ASPECT_RATIO = 1.5

From 867857578ec9100c6b6c407bee6a741615b04e4b Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Tue, 25 Aug 2026 09:39:43 +0200
Subject: [PATCH 04/10] fix(call): keep the grid tiles at the target aspect
 ratio

The columns of the grid shared whatever width was left, so a grid with
room to spare stretched its tiles far past the aspect ratio it aims for:
a stripe holding a few tiles laid them out at a ratio of 2 instead of
1.5. The number of columns is the only thing the layout can shrink, and
dropping a column only makes the remaining tiles wider, so the width of a
column is now capped and the room to spare is left around the tiles
rather than in them.

The columns no longer take the whole width once they are capped, so the
grid centers them.

The stripe aimed for square tiles, which is neither what its tiles are
capped to now nor what a camera gives, so every grid targets the same
aspect ratio and the mode does not have to be given to pick it.

The top padding of the stripe moves to its wrapper, as the height of the
grid is what the height of its tiles is derived from.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/Grid/VideosGrid.vue   | 36 +++++++++++++++---
 .../CallView/Grid/gridLayout.spec.ts          | 21 +++++++----
 src/components/CallView/Grid/gridLayout.ts    | 37 ++++++++++++++-----
 .../CallView/Grid/useGridDimensions.ts        |  6 +--
 4 files changed, 73 insertions(+), 27 deletions(-)

diff --git a/src/components/CallView/Grid/VideosGrid.vue b/src/components/CallView/Grid/VideosGrid.vue
index 86cc3b73451..578e4970612 100644
--- a/src/components/CallView/Grid/VideosGrid.vue
+++ b/src/components/CallView/Grid/VideosGrid.vue
@@ -42,7 +42,6 @@
 					<div
 						ref="grid"
 						class="grid"
-						:class="{ stripe: isStripe }"
 						:style="gridStyle"
 						@wheel="debounceHandleWheelEvent">
 						<template v-if="!devMode">
@@ -172,9 +171,11 @@ import { useCallViewStore } from '../../../stores/callView.ts'
 import {
 	computeTilePlacements,
 	getHalfColumnCount,
+	getHalfColumnMaxWidth,
 	getHalfColumnMinWidth,
 	GRID_GAP,
 	STRIPE_HEIGHT,
+	TARGET_ASPECT_RATIO,
 	TILE_COLUMN_SPAN,
 } from './gridLayout.ts'
 import { placeholderImage, placeholderModel, placeholderName, placeholderSharedData } from './gridPlaceholders.ts'
@@ -433,6 +434,22 @@ export default {
 			})
 		},
 
+		// Maximum width of a half column, so that the tiles are not stretched
+		// past the target aspect ratio when the grid has room to spare. The
+		// empty call view has a layout of its own and takes whatever width it
+		// is given, so it is never capped.
+		halfColumnMaxWidth() {
+			if (this.rows <= 0 || (this.orderedVideos.length === 0 && !this.isStripe)) {
+				return null
+			}
+
+			return getHalfColumnMaxWidth(this.videoHeight, TARGET_ASPECT_RATIO, this.halfColumnMinWidth)
+		},
+
+		halfColumnMinWidth() {
+			return getHalfColumnMinWidth(this.dpiAwareMinWidth)
+		},
+
 		// Computed css to reactively style the grid
 		gridStyle() {
 			let columns = this.columns
@@ -451,9 +468,16 @@ export default {
 			// `computeTilePlacements`). A tile keeps the exact same width either
 			// way, as it also takes the gap between its two half columns, so the
 			// tiles do not jump around when the placement changes.
+			const halfColumnWidth = this.halfColumnMaxWidth !== null
+				? `minmax(${this.halfColumnMinWidth}px, ${this.halfColumnMaxWidth}px)`
+				: `minmax(${this.halfColumnMinWidth}px, 1fr)`
+
 			return {
-				gridTemplateColumns: `repeat(${getHalfColumnCount(columns)}, minmax(${getHalfColumnMinWidth(this.dpiAwareMinWidth)}px, 1fr))`,
+				gridTemplateColumns: `repeat(${getHalfColumnCount(columns)}, ${halfColumnWidth})`,
 				gridTemplateRows: `repeat(${rows}, minmax(${this.dpiAwareMinHeight}px, 1fr))`,
+				// The columns no longer take the whole width once they are
+				// capped, so the grid itself has to center them
+				justifyContent: 'center',
 			}
 		},
 
@@ -501,7 +525,7 @@ export default {
 				minWidth: this.minWidth,
 				minHeight: this.minHeight,
 				videosCap: this.videosCap,
-				targetAspectRatio: this.targetAspectRatio,
+				targetAspectRatio: TARGET_ASPECT_RATIO,
 				videosCount: this.videosCount,
 				videoWidth: this.videoWidth,
 				videoHeight: this.videoHeight,
@@ -617,9 +641,6 @@ export default {
 		grid-column: span 2;
 	}
 
-	&.stripe {
-		padding-block-start: var(--grid-gap);
-	}
 }
 
 .grid-wrapper {
@@ -633,6 +654,9 @@ export default {
 	width: 100%;
 	min-width: 0;
 	position: relative;
+	// Kept out of the grid itself, whose measured height is the height of its
+	// tiles
+	padding-block-start: var(--grid-gap);
 }
 
 .dev-mode-video {
diff --git a/src/components/CallView/Grid/gridLayout.spec.ts b/src/components/CallView/Grid/gridLayout.spec.ts
index 4b1d0d50156..ff0a12d8eb0 100644
--- a/src/components/CallView/Grid/gridLayout.spec.ts
+++ b/src/components/CallView/Grid/gridLayout.spec.ts
@@ -9,12 +9,13 @@ import {
 	computeRowDistribution,
 	computeTilePlacements,
 	getHalfColumnCount,
+	getHalfColumnMaxWidth,
 	getHalfColumnMinWidth,
 	getMinTileHeight,
 	getMinTileWidth,
-	getTargetAspectRatio,
 	GRID_GAP,
 	STRIPE_HEIGHT,
+	TARGET_ASPECT_RATIO,
 	TILE_COLUMN_SPAN,
 } from './gridLayout.ts'
 
@@ -46,11 +47,6 @@ describe('gridLayout', () => {
 			// The grid of the stripe is padded by a gap at its top
 			expect(getMinTileHeight(true)).toBeLessThanOrEqual(STRIPE_HEIGHT - GRID_GAP)
 		})
-
-		test('targets a wider aspect ratio for the full grid than the stripe', () => {
-			expect(getTargetAspectRatio(false)).toBe(1.5)
-			expect(getTargetAspectRatio(true)).toBe(1)
-		})
 	})
 
 	describe('computeGridDimensions', () => {
@@ -140,7 +136,7 @@ describe('gridLayout', () => {
 						const layout = {
 							gridWidth,
 							gridHeight,
-							targetAspectRatio: getTargetAspectRatio(isStripe),
+							targetAspectRatio: TARGET_ASPECT_RATIO,
 							minWidth: getMinTileWidth(isStripe),
 							minHeight: getMinTileHeight(isStripe),
 							noLocalVideoReserve: isStripe,
@@ -224,6 +220,17 @@ describe('gridLayout', () => {
 		test('never returns a negative half column width', () => {
 			expect(getHalfColumnMinWidth(0)).toBe(0)
 		})
+
+		test('caps a half column so that a tile spanning two keeps the target aspect ratio', () => {
+			// A 142px tall tile targeting 1.5 is at most 213px wide
+			expect(getHalfColumnMaxWidth(142, 1.5, 0) * 2 + GRID_GAP).toBe(142 * 1.5)
+		})
+
+		test('never caps a half column below its minimum width', () => {
+			const minWidth = getHalfColumnMinWidth(320)
+			// A tile too short to be 320px wide at the target aspect ratio
+			expect(getHalfColumnMaxWidth(100, 1.5, minWidth)).toBe(minWidth)
+		})
 	})
 
 	describe('computeTilePlacements', () => {
diff --git a/src/components/CallView/Grid/gridLayout.ts b/src/components/CallView/Grid/gridLayout.ts
index 6c8e74d2476..3fe9fc142f9 100644
--- a/src/components/CallView/Grid/gridLayout.ts
+++ b/src/components/CallView/Grid/gridLayout.ts
@@ -21,7 +21,6 @@ export const STRIPE_HEIGHT = 150
 
 // Aspect ratio (width / height) the layout tries to reach for each tile.
 export const TARGET_ASPECT_RATIO = 1.5
-export const TARGET_ASPECT_RATIO_STRIPE = 1
 
 /**
  * Minimum tile width for the given layout mode.
@@ -41,15 +40,6 @@ export function getMinTileHeight(compact: boolean): number {
 	return compact ? MIN_TILE_HEIGHT_COMPACT : MIN_TILE_HEIGHT
 }
 
-/**
- * Target tile aspect ratio for the given layout mode.
- *
- * @param isStripe - whether the grid is shown as a stripe
- */
-export function getTargetAspectRatio(isStripe: boolean): number {
-	return isStripe ? TARGET_ASPECT_RATIO_STRIPE : TARGET_ASPECT_RATIO
-}
-
 type GridDimensionsOptions = {
 	/** Available grid width in px */
 	gridWidth: number
@@ -304,6 +294,33 @@ export function getHalfColumnMinWidth(minTileWidth: number): number {
 	return Math.max((minTileWidth - GRID_GAP) / TILE_COLUMN_SPAN, 0)
 }
 
+/**
+ * Maximum width of a half column, in px, for the given tile height.
+ *
+ * The columns of the grid share whatever width is left, so a grid with room to
+ * spare would stretch its tiles far past the aspect ratio the layout aims for:
+ * the number of columns is the only thing the layout can shrink, and dropping a
+ * column only makes the remaining tiles wider. Capping the width of a column
+ * keeps the tiles at the target aspect ratio and leaves the room to spare
+ * around them instead.
+ *
+ * A tile spans two half columns and the gap between them, so each half column
+ * holds half of the tile minus that gap.
+ *
+ * @param tileHeight - height of a tile of the grid in px
+ * @param targetAspectRatio - tile aspect ratio (width / height) the layout aims for
+ * @param minHalfColumnWidth - minimum width of a half column in px, never capped below
+ */
+export function getHalfColumnMaxWidth(
+	tileHeight: number,
+	targetAspectRatio: number,
+	minHalfColumnWidth: number,
+): number {
+	const maxTileWidth = tileHeight * targetAspectRatio
+
+	return Math.max((maxTileWidth - GRID_GAP) / TILE_COLUMN_SPAN, minHalfColumnWidth)
+}
+
 type TilePlacementOptions = {
 	/** Number of tiles laid out on the page, including the local video tile */
 	totalTiles: number
diff --git a/src/components/CallView/Grid/useGridDimensions.ts b/src/components/CallView/Grid/useGridDimensions.ts
index 3172341439b..953a92d2ec9 100644
--- a/src/components/CallView/Grid/useGridDimensions.ts
+++ b/src/components/CallView/Grid/useGridDimensions.ts
@@ -7,7 +7,7 @@ import type { Ref } from 'vue'
 
 import debounce from 'debounce'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { computeGridDimensions, getMinTileHeight, getMinTileWidth, getTargetAspectRatio } from './gridLayout.ts'
+import { computeGridDimensions, getMinTileHeight, getMinTileWidth, TARGET_ASPECT_RATIO } from './gridLayout.ts'
 
 type UseGridDimensionsOptions = {
 	/** Element to observe for size changes (its child grid is measured) */
@@ -79,7 +79,6 @@ export function useGridDimensions({
 	const minHeight = computed(() => getMinTileHeight(compact.value))
 	const dpiAwareMinWidth = computed(() => minWidth.value / dpiFactor.value)
 	const dpiAwareMinHeight = computed(() => minHeight.value / dpiFactor.value)
-	const targetAspectRatio = computed(() => getTargetAspectRatio(isStripe.value))
 	const gridAspectRatio = computed(() => (gridWidth.value / gridHeight.value).toPrecision(2))
 
 	/**
@@ -98,7 +97,7 @@ export function useGridDimensions({
 			gridWidth: gridWidth.value,
 			gridHeight: gridHeight.value,
 			videoCount: videoCount.value,
-			targetAspectRatio: targetAspectRatio.value,
+			targetAspectRatio: TARGET_ASPECT_RATIO,
 			minWidth: dpiAwareMinWidth.value,
 			minHeight: dpiAwareMinHeight.value,
 			noLocalVideoReserve: noLocalVideoReserve.value,
@@ -147,7 +146,6 @@ export function useGridDimensions({
 		minHeight,
 		dpiAwareMinWidth,
 		dpiAwareMinHeight,
-		targetAspectRatio,
 		gridAspectRatio,
 		/** Force a re-measure and recompute (e.g. for debugging) */
 		recompute,

From 264d4b925a936b0c7c49daa328d1391a1e029f63 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Wed, 19 Aug 2026 14:54:36 +0200
Subject: [PATCH 05/10] fix(call): shrink a grid which is down to a single row

The hypothetical tile height with one row less was divided by zero when
the grid had a single row, so removing a row looked better than removing
a column and the loop stopped without shrinking anything: a stripe kept
as many columns as the screen could hold, however few tiles it had.

An axis which is down to a single track is now never the one to remove,
which also makes the guards inside the branches redundant.

A grid holding nothing but the local video keeps a column for it, as an
implicit, content sized column would collapse to nothing as soon as the
camera is off.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 .../CallView/Grid/gridLayout.spec.ts          | 25 ++++++++-
 src/components/CallView/Grid/gridLayout.ts    | 51 +++++++++----------
 2 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/components/CallView/Grid/gridLayout.spec.ts b/src/components/CallView/Grid/gridLayout.spec.ts
index ff0a12d8eb0..38b7ec8976b 100644
--- a/src/components/CallView/Grid/gridLayout.spec.ts
+++ b/src/components/CallView/Grid/gridLayout.spec.ts
@@ -60,8 +60,16 @@ describe('gridLayout', () => {
 			noLocalVideoReserve: false,
 		}
 
-		test('returns no columns or rows when there are no tiles', () => {
+		test('keeps a tile for the local video when there is nothing else to lay out', () => {
+			// The local video takes a tile of its own, which needs a column of
+			// the grid: an implicit, content sized column would collapse to
+			// nothing as soon as the camera is off
 			expect(computeGridDimensions({ ...fullGrid, videoCount: 0 }))
+				.toEqual({ columns: 1, rows: 1 })
+		})
+
+		test('returns no columns or rows when there is no tile at all', () => {
+			expect(computeGridDimensions({ ...fullGrid, noLocalVideoReserve: true, videoCount: 0 }))
 				.toEqual({ columns: 0, rows: 0 })
 		})
 
@@ -107,6 +115,21 @@ describe('gridLayout', () => {
 			expect(result).toEqual({ columns: 5, rows: 1 })
 		})
 
+		test('shrinks a single row grid down to the tiles it holds', () => {
+			// A single row cannot be shrunk any further, so the columns are the
+			// only thing left to remove: a lone participant and the local video
+			// take 2 columns of a stripe which could hold 7 of them
+			expect(computeGridDimensions({
+				gridWidth: 1440,
+				gridHeight: 142,
+				videoCount: 1,
+				targetAspectRatio: TARGET_ASPECT_RATIO,
+				minWidth: 200,
+				minHeight: 134,
+				noLocalVideoReserve: false,
+			})).toEqual({ columns: 2, rows: 1 })
+		})
+
 		test('applies hysteresis on the current column count to avoid flickering', () => {
 			// 976px fits exactly 3 columns of 320px with two 8px gaps. Whether a
 			// fourth column is offered depends on the current column count.
diff --git a/src/components/CallView/Grid/gridLayout.ts b/src/components/CallView/Grid/gridLayout.ts
index 3fe9fc142f9..26f5d5bc6a8 100644
--- a/src/components/CallView/Grid/gridLayout.ts
+++ b/src/components/CallView/Grid/gridLayout.ts
@@ -136,11 +136,15 @@ export function computeGridDimensions({
 	// The last grid page is very likely not to have the same number of elements
 	// as the previous pages so the grid needs to be tweaked accordingly
 
-	// Nothing to lay out. Note that a zero-size grid (not measured yet, hidden
-	// or mid-transition) still falls back to a 1x1 layout below while tiles are
+	// Nothing to lay out, except for the local video: it takes a tile of its own
+	// unless no slot is reserved for it, so the grid still has to hold that one
+	// tile. Without a column of its own the tile would be laid out in an
+	// implicit, content sized column and collapse to nothing as soon as the
+	// camera is off. Note that a zero-size grid (not measured yet, hidden or
+	// mid-transition) still falls back to a 1x1 layout below while tiles are
 	// present, so the downstream slot math never goes negative.
 	if (videoCount <= 0) {
-		return { columns: 0, rows: 0 }
+		return noLocalVideoReserve ? { columns: 0, rows: 0 } : { columns: 1, rows: 1 }
 	}
 
 	// Start from the largest grid that fits the available space, then shrink it
@@ -158,30 +162,29 @@ export function computeGridDimensions({
 	// Only shrink when we have an 'overflow' of slots. If the tiles already
 	// populate the grid, there is no point in shrinking it.
 	while (videoCount < currentSlots) {
-		const previousColumns = columns
-		const previousRows = rows
-
 		// Current tile dimensions
 		const videoWidth = (gridWidth - GRID_GAP * (columns - 1)) / columns
 		const videoHeight = (gridHeight - GRID_GAP * (rows - 1)) / rows
 
-		// Hypothetical width/height with one column/row less than current
-		const videoWidthWithOneColumnLess = (gridWidth - GRID_GAP * (columns - 2)) / (columns - 1)
-		const videoHeightWithOneRowLess = (gridHeight - GRID_GAP * (rows - 2)) / (rows - 1)
-
-		// Hypothetical aspect ratio with one column/row less than current
-		const aspectRatioWithOneColumnLess = videoWidthWithOneColumnLess / videoHeight
-		const aspectRatioWithOneRowLess = videoWidth / videoHeightWithOneRowLess
-
-		// Deltas with target aspect ratio
-		const deltaAspectRatioWithOneColumnLess = Math.abs(aspectRatioWithOneColumnLess - targetAspectRatio)
-		const deltaAspectRatioWithOneRowLess = Math.abs(aspectRatioWithOneRowLess - targetAspectRatio)
+		// Deltas with the target aspect ratio of the hypothetical tiles with one
+		// column/row less than current. An axis which is down to a single track
+		// cannot be shrunk any further, so it is never the one to remove.
+		const deltaAspectRatioWithOneColumnLess = columns >= 2
+			? Math.abs((gridWidth - GRID_GAP * (columns - 2)) / (columns - 1) / videoHeight - targetAspectRatio)
+			: Number.POSITIVE_INFINITY
+		const deltaAspectRatioWithOneRowLess = rows >= 2
+			? Math.abs(videoWidth / ((gridHeight - GRID_GAP * (rows - 2)) / (rows - 1)) - targetAspectRatio)
+			: Number.POSITIVE_INFINITY
+
+		if (deltaAspectRatioWithOneColumnLess === Number.POSITIVE_INFINITY
+			&& deltaAspectRatioWithOneRowLess === Number.POSITIVE_INFINITY) {
+			// A single tile is left, there is nothing to shrink any more
+			break
+		}
 
 		// Compare the deltas to find out whether we need to remove a column or a row
 		if (deltaAspectRatioWithOneColumnLess <= deltaAspectRatioWithOneRowLess) {
-			if (columns >= 2) {
-				columns--
-			}
+			columns--
 
 			currentSlots = slotsFor(columns, rows, noLocalVideoReserve)
 
@@ -192,9 +195,7 @@ export function computeGridDimensions({
 				break
 			}
 		} else {
-			if (rows >= 2) {
-				rows--
-			}
+			rows--
 
 			currentSlots = slotsFor(columns, rows, noLocalVideoReserve)
 
@@ -205,10 +206,6 @@ export function computeGridDimensions({
 				break
 			}
 		}
-
-		if (previousColumns === columns && previousRows === rows) {
-			break
-		}
 	}
 
 	return { columns, rows }

From aaabd8f5be974c73db790de6d3f6cb5504156af5 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Wed, 19 Aug 2026 21:12:18 +0200
Subject: [PATCH 06/10] feat(call): combine the controls of the stripe above it

The stripe was paginated by two arrows sitting on its sides and
collapsed by a button of its own, which took room over the call and told
nothing about the pages there are.

The three of them now sit together over the top corner of the stripe, on
the surface the bottom bar puts its own buttons over the call and
painted with the dark palette the call view is painted with whichever
theme is set. Paging through the tiles and collapsing the stripe are two
controls of their own, so each of them keeps a surface of its own.

The controls are only there for as long as the call is being looked at,
and barely there until they are the ones hovered, as they sit over the
tiles. Paging only shows the arrows of the pages there are, so that a
stripe holding more participants than it can show says so, and unfolds
into the page it is on once it is hovered or focused.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 .../CallView/Grid/StripeControls.spec.ts      |  93 +++++++++
 .../CallView/Grid/StripeControls.vue          | 185 ++++++++++++++++++
 src/components/CallView/Grid/VideosGrid.vue   |  99 ++++------
 3 files changed, 319 insertions(+), 58 deletions(-)
 create mode 100644 src/components/CallView/Grid/StripeControls.spec.ts
 create mode 100644 src/components/CallView/Grid/StripeControls.vue

diff --git a/src/components/CallView/Grid/StripeControls.spec.ts b/src/components/CallView/Grid/StripeControls.spec.ts
new file mode 100644
index 00000000000..8a31f87d863
--- /dev/null
+++ b/src/components/CallView/Grid/StripeControls.spec.ts
@@ -0,0 +1,93 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import StripeControls from './StripeControls.vue'
+
+describe('StripeControls.vue', () => {
+	const SHOWN_SLOT = 'stripe-controls__slot--shown'
+
+	/**
+	 * @param props - the props to override
+	 */
+	function mountControls(props = {}) {
+		return mount(StripeControls, {
+			props: {
+				currentPage: 0,
+				numberOfPages: 1,
+				hasPreviousPage: false,
+				hasNextPage: false,
+				isOpen: true,
+				...props,
+			},
+		})
+	}
+
+	/**
+	 * The slots shown while the controls are not hovered, in rendering order.
+	 *
+	 * @param wrapper - the mounted controls
+	 */
+	function shownSlots(wrapper: ReturnType<typeof mountControls>) {
+		return wrapper.findAll('.stripe-controls__slot')
+			.map((slot) => slot.classes(SHOWN_SLOT))
+	}
+
+	describe('without pagination', () => {
+		test('holds the collapse control alone', () => {
+			const wrapper = mountControls()
+
+			expect(wrapper.findAll('.stripe-controls__group')).toHaveLength(1)
+			expect(shownSlots(wrapper)).toEqual([])
+			expect(wrapper.find('.stripe-controls__page').exists()).toBe(false)
+		})
+
+		test('holds the expand control alone when the stripe is collapsed', () => {
+			// A collapsed stripe shows no tile, so it is never paginated
+			const wrapper = mountControls({ isOpen: false, numberOfPages: 3, hasNextPage: true })
+
+			expect(wrapper.findAll('.stripe-controls__group')).toHaveLength(1)
+			expect(wrapper.find('.stripe-controls__page').exists()).toBe(false)
+		})
+	})
+
+	describe('with pagination', () => {
+		const paginated = { numberOfPages: 3, hasPreviousPage: true, hasNextPage: true, currentPage: 1 }
+
+		test('holds the paging controls next to the collapse control', () => {
+			expect(mountControls(paginated).findAll('.stripe-controls__group')).toHaveLength(2)
+		})
+
+		test('shows the arrows of the pages there are, and the page it is on once hovered', () => {
+			// Previous, page indicator and next
+			expect(shownSlots(mountControls(paginated))).toEqual([true, false, true])
+		})
+
+		test('only shows the arrow of the page there is', () => {
+			expect(shownSlots(mountControls({ ...paginated, currentPage: 0, hasPreviousPage: false })))
+				.toEqual([false, false, true])
+			expect(shownSlots(mountControls({ ...paginated, currentPage: 2, hasNextPage: false })))
+				.toEqual([true, false, false])
+		})
+
+		test('indicates the current page', () => {
+			expect(mountControls(paginated).find('.stripe-controls__page').text()).toBe('2/3')
+		})
+
+		test('emits the page to move to and the collapse', async () => {
+			const wrapper = mountControls(paginated)
+			const buttons = wrapper.findAll('button')
+
+			await buttons[0].trigger('click')
+			await buttons[1].trigger('click')
+			await buttons[2].trigger('click')
+
+			expect(wrapper.emitted('previous')).toHaveLength(1)
+			expect(wrapper.emitted('next')).toHaveLength(1)
+			expect(wrapper.emitted('toggle')).toHaveLength(1)
+		})
+	})
+})
diff --git a/src/components/CallView/Grid/StripeControls.vue b/src/components/CallView/Grid/StripeControls.vue
new file mode 100644
index 00000000000..c0ac4d778a0
--- /dev/null
+++ b/src/components/CallView/Grid/StripeControls.vue
@@ -0,0 +1,185 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import IconChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
+import IconChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+
+const props = defineProps<{
+	/** Index of the page currently shown in the stripe, starting at 0 */
+	currentPage: number
+	/** Number of pages the tiles of the stripe are spread over */
+	numberOfPages: number
+	/** Whether there is a page before the current one */
+	hasPreviousPage: boolean
+	/** Whether there is a page after the current one */
+	hasNextPage: boolean
+	/** Whether the stripe is expanded */
+	isOpen: boolean
+}>()
+
+const emit = defineEmits<{
+	previous: []
+	next: []
+	toggle: []
+}>()
+
+// A collapsed stripe shows no tile, so it is never paginated
+const isPaginated = computed(() => props.isOpen && props.numberOfPages > 1)
+
+const pageIndicator = computed(() => `${props.currentPage + 1}/${props.numberOfPages}`)
+
+const pageLabel = computed(() => t('spreed', 'Page {page} of {pages}', {
+	page: props.currentPage + 1,
+	pages: props.numberOfPages,
+}))
+
+const toggleLabel = computed(() => props.isOpen
+	? t('spreed', 'Collapse participant bar')
+	: t('spreed', 'Expand participant bar'))
+</script>
+
+<template>
+	<div class="stripe-controls">
+		<!-- Paging through the tiles, which the stripe only does when it holds
+			more of them than it can show -->
+		<div v-if="isPaginated" class="stripe-controls__group">
+			<div class="stripe-controls__slot" :class="{ 'stripe-controls__slot--shown': hasPreviousPage }">
+				<NcButton
+					variant="tertiary"
+					size="small"
+					:disabled="!hasPreviousPage"
+					:aria-label="t('spreed', 'Previous page of videos')"
+					:title="t('spreed', 'Previous page of videos')"
+					@click="emit('previous')">
+					<template #icon>
+						<IconChevronLeft
+							class="bidirectional-icon"
+							:size="20" />
+					</template>
+				</NcButton>
+			</div>
+
+			<div class="stripe-controls__slot">
+				<span
+					class="stripe-controls__page"
+					role="status"
+					:aria-label="pageLabel">
+					{{ pageIndicator }}
+				</span>
+			</div>
+
+			<div class="stripe-controls__slot" :class="{ 'stripe-controls__slot--shown': hasNextPage }">
+				<NcButton
+					variant="tertiary"
+					size="small"
+					:disabled="!hasNextPage"
+					:aria-label="t('spreed', 'Next page of videos')"
+					:title="t('spreed', 'Next page of videos')"
+					@click="emit('next')">
+					<template #icon>
+						<IconChevronRight
+							class="bidirectional-icon"
+							:size="20" />
+					</template>
+				</NcButton>
+			</div>
+		</div>
+
+		<!-- Collapsing and expanding the stripe itself -->
+		<div class="stripe-controls__group">
+			<NcButton
+				variant="tertiary"
+				size="small"
+				:aria-label="toggleLabel"
+				:title="toggleLabel"
+				@click="emit('toggle')">
+				<template #icon>
+					<IconChevronDown
+						v-if="isOpen"
+						:size="20" />
+					<IconChevronUp
+						v-else
+						:size="20" />
+				</template>
+			</NcButton>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+// The controls are painted with the palette of the stripe they belong to, which
+// is the dark one the call view is painted with whichever theme is set
+.stripe-controls {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	width: fit-content;
+	padding-block-start: var(--default-grid-baseline);
+	// Barely there while the call is not being looked at, as they sit over the
+	// tiles, and in their own color as soon as it is
+	opacity: .4;
+	transition: opacity var(--animation-quick) ease-in-out;
+
+	#call-container:hover & {
+		opacity: 1;
+	}
+}
+
+// Paging through the tiles and collapsing the stripe are two controls, each on
+// a surface of its own
+.stripe-controls__group {
+	display: flex;
+	align-items: center;
+	// The surface the bottom bar puts its own buttons over the call
+	border-radius: var(--border-radius-pill, calc(var(--default-clickable-area) / 2));
+	background-color: var(--color-primary-light);
+}
+
+// Every control of a group takes the room it needs once the controls are
+// hovered, and only the ones worth showing on their own take any before that
+.stripe-controls__slot {
+	display: grid;
+	// A collapsed track is only as narrow as what it holds unless its minimum is
+	// given, and a button does not shrink below its clickable area, so the room
+	// it keeps is taken out of the flow by the slot itself
+	grid-template-columns: minmax(0, 0fr);
+	overflow: hidden;
+	opacity: 0;
+	transition: grid-template-columns var(--animation-quick) ease-in-out,
+		opacity var(--animation-quick) ease-in-out;
+
+	&--shown {
+		grid-template-columns: minmax(0, 1fr);
+		opacity: 1;
+	}
+
+	.stripe-controls:hover &,
+	.stripe-controls:focus-within & {
+		grid-template-columns: minmax(0, 1fr);
+		opacity: 1;
+	}
+}
+
+.stripe-controls__page {
+	display: block;
+	padding-inline: var(--default-grid-baseline);
+	color: var(--color-main-text);
+	white-space: nowrap;
+	font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.stripe-controls,
+	.stripe-controls__slot {
+		transition: none;
+	}
+}
+</style>
diff --git a/src/components/CallView/Grid/VideosGrid.vue b/src/components/CallView/Grid/VideosGrid.vue
index 578e4970612..67d0ed9038d 100644
--- a/src/components/CallView/Grid/VideosGrid.vue
+++ b/src/components/CallView/Grid/VideosGrid.vue
@@ -4,30 +4,32 @@
 -->
 
 <template>
-	<div ref="gridWrapper" class="grid-main-wrapper" :class="{ 'is-grid': !isStripe, overlap: isOverlap }">
-		<NcButton
+	<!-- The call view is dark whichever theme is set, so the stripe over it and
+		the controls it holds are painted with the palette of the call -->
+	<div
+		ref="gridWrapper"
+		class="grid-main-wrapper"
+		:class="{ 'is-grid': !isStripe, overlap: isOverlap }"
+		:data-theme-dark="isStripe || undefined">
+		<div
 			v-if="isStripe && !isRecording"
-			class="stripe--collapse"
-			variant="tertiary-no-background"
-			:title="stripeButtonTitle"
-			:aria-label="stripeButtonTitle"
-			@click="handleClickStripeCollapse">
-			<template #icon>
-				<IconChevronDown
-					v-if="stripeOpen"
-					fillColor="#ffffff"
-					:size="20" />
-				<IconChevronUp
-					v-else
-					fillColor="#ffffff"
-					:size="20" />
-			</template>
-		</NcButton>
+			class="stripe-controls-position"
+			:class="{ 'stripe-controls-position--collapsed': !stripeOpen }">
+			<StripeControls
+				:currentPage="currentPage"
+				:numberOfPages="numberOfPages"
+				:hasPreviousPage="hasPreviousPage"
+				:hasNextPage="hasNextPage"
+				:isOpen="stripeOpen"
+				@previous="previous"
+				@next="next"
+				@toggle="handleClickStripeCollapse" />
+		</div>
 		<TransitionWrapper :name="isStripe ? 'slide-down' : undefined">
 			<div v-if="!isStripe || stripeOpen" class="wrapper" :style="wrapperStyle">
 				<div :class="[isStripe ? 'stripe-wrapper' : 'grid-wrapper']">
 					<NcButton
-						v-if="hasPreviousPage && gridWidth > 0"
+						v-if="!isStripe && hasPreviousPage && gridWidth > 0"
 						variant="tertiary-no-background"
 						class="grid-navigation grid-navigation__previous"
 						:aria-label="t('spreed', 'Previous page of videos')"
@@ -96,7 +98,7 @@
 							@clickVideo="handleClickLocalVideo" />
 					</div>
 					<NcButton
-						v-if="hasNextPage && gridWidth > 0"
+						v-if="!isStripe && hasNextPage && gridWidth > 0"
 						variant="tertiary-no-background"
 						class="grid-navigation grid-navigation__next"
 						:aria-label="t('spreed', 'Next page of videos')"
@@ -157,15 +159,14 @@ import { t } from '@nextcloud/l10n'
 import debounce from 'debounce'
 import { computed, inject, ref, toRef, useTemplateRef, watch } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import IconChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconChevronRight from 'vue-material-design-icons/ChevronRight.vue'
-import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 import EmptyCallView from '../shared/EmptyCallView.vue'
 import LocalVideo from '../shared/LocalVideo.vue'
 import VideoBottomBar from '../shared/VideoBottomBar.vue'
 import VideoVue from '../shared/VideoVue.vue'
+import StripeControls from './StripeControls.vue'
 import { getTalkConfig } from '../../../services/CapabilitiesManager.ts'
 import { useCallViewStore } from '../../../stores/callView.ts'
 import {
@@ -194,12 +195,11 @@ export default {
 		LocalVideo,
 		EmptyCallView,
 		NcButton,
+		StripeControls,
 		TransitionWrapper,
 		VideoBottomBar,
-		IconChevronDown,
 		IconChevronLeft,
 		IconChevronRight,
-		IconChevronUp,
 	},
 
 	props: {
@@ -387,14 +387,6 @@ export default {
 	},
 
 	computed: {
-		stripeButtonTitle() {
-			if (this.stripeOpen) {
-				return t('spreed', 'Collapse participant bar')
-			} else {
-				return t('spreed', 'Expand participant bar')
-			}
-		},
-
 		// Number of video components (it does not include the local video)
 		videosCount() {
 			if (!this.isStripe && this.orderedVideos.length === 0) {
@@ -656,7 +648,7 @@ export default {
 	position: relative;
 	// Kept out of the grid itself, whose measured height is the height of its
 	// tiles
-	padding-block-start: var(--grid-gap);
+	padding-block: var(--grid-gap);
 }
 
 .dev-mode-video {
@@ -729,7 +721,23 @@ export default {
 	}
 }
 
+.stripe-controls-position {
+	position: absolute;
+	top: var(--grid-gap);
+	inset-inline-end: var(--grid-gap);
+	z-index: 2;
+
+	// A collapsed stripe holds no tile to sit over, and no room of its own to
+	// sit in, so the controls take the room above it
+	&--collapsed {
+		top: calc(-1 * (var(--clickable-area-small) + var(--default-grid-baseline) + var(--grid-gap)));
+	}
+}
+
 .grid-navigation {
+	z-index: 2;
+	opacity: .7;
+
 	.grid-wrapper & {
 		position: absolute;
 		top: calc(50% - var(--default-clickable-area) / 2);
@@ -743,31 +751,6 @@ export default {
 		}
 	}
 
-	.stripe-wrapper & {
-		position: absolute;
-		top: calc(var(--navigation-position) + var(--grid-gap));
-
-		&__previous {
-			inset-inline-start: var(--navigation-position);
-		}
-
-		&__next {
-			inset-inline-end: var(--navigation-position);
-		}
-	}
-}
-
-.stripe--collapse {
-	position: absolute !important;
-	top: calc(-1 * (var(--default-clickable-area) + var(--grid-gap)));
-	inset-inline-end: var(--navigation-position);
-}
-
-.stripe--collapse,
-.grid-navigation {
-	z-index: 2;
-	opacity: .7;
-
 	#call-container:hover & {
 		background-color: rgba(0, 0, 0, 0.1) !important;
 

From 02661778d06b8238194a3036341dd5b90001ba0c Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Wed, 19 Aug 2026 21:12:27 +0200
Subject: [PATCH 07/10] fix(call): collapse and expand the stripe together with
 the promoted area

The stripe slid down on its way out while being taken out of the flow
right away, so the promoted area took the room of the stripe as soon as
the transition started and was resized in one go while the stripe was
still on its way.

The stripe is now collapsed and expanded by its height, so the promoted
area is laid out again on every frame and follows it. The tiles keep
their height while it happens, so they slide out of the way rather than
being squashed, and the transition is left out for whoever asked not to
be shown motion.

The transition also runs both ways now: the classes of the shared
transitions are the ones of Vue 2, so only the way out was animated.

The box holding the grid is renamed on the way, as `wrapper` is also the
name of the root of VideoBottomBar, whose root is given the scope of the
grid and would be laid out over the whole height of its tile by the
rules of that box.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/Grid/VideosGrid.vue | 58 +++++++++++++++------
 src/components/CallView/Grid/gridLayout.ts  |  3 +-
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/CallView/Grid/VideosGrid.vue b/src/components/CallView/Grid/VideosGrid.vue
index 67d0ed9038d..f694ecf83c6 100644
--- a/src/components/CallView/Grid/VideosGrid.vue
+++ b/src/components/CallView/Grid/VideosGrid.vue
@@ -25,8 +25,8 @@
 				@next="next"
 				@toggle="handleClickStripeCollapse" />
 		</div>
-		<TransitionWrapper :name="isStripe ? 'slide-down' : undefined">
-			<div v-if="!isStripe || stripeOpen" class="wrapper" :style="wrapperStyle">
+		<Transition name="stripe-collapse">
+			<div v-if="!isStripe || stripeOpen" class="videos-wrapper" :class="{ 'videos-wrapper--stripe': isStripe }">
 				<div :class="[isStripe ? 'stripe-wrapper' : 'grid-wrapper']">
 					<NcButton
 						v-if="!isStripe && hasPreviousPage && gridWidth > 0"
@@ -150,7 +150,7 @@
 					</div>
 				</template>
 			</div>
-		</TransitionWrapper>
+		</Transition>
 	</div>
 </template>
 
@@ -161,7 +161,6 @@ import { computed, inject, ref, toRef, useTemplateRef, watch } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconChevronRight from 'vue-material-design-icons/ChevronRight.vue'
-import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 import EmptyCallView from '../shared/EmptyCallView.vue'
 import LocalVideo from '../shared/LocalVideo.vue'
 import VideoBottomBar from '../shared/VideoBottomBar.vue'
@@ -175,7 +174,6 @@ import {
 	getHalfColumnMaxWidth,
 	getHalfColumnMinWidth,
 	GRID_GAP,
-	STRIPE_HEIGHT,
 	TARGET_ASPECT_RATIO,
 	TILE_COLUMN_SPAN,
 } from './gridLayout.ts'
@@ -196,7 +194,6 @@ export default {
 		EmptyCallView,
 		NcButton,
 		StripeControls,
-		TransitionWrapper,
 		VideoBottomBar,
 		IconChevronLeft,
 		IconChevronRight,
@@ -473,14 +470,6 @@ export default {
 			}
 		},
 
-		wrapperStyle() {
-			if (this.isStripe) {
-				return `height: ${STRIPE_HEIGHT}px`
-			} else {
-				return 'height: 100%'
-			}
-		},
-
 		devStripe: {
 			get() {
 				return this.isStripe
@@ -602,6 +591,8 @@ export default {
 <style lang="scss" scoped>
 .grid-main-wrapper {
 	--navigation-position: calc(var(--default-grid-baseline) * 2);
+	// Align with STRIPE_HEIGHT in gridLayout.ts
+	--stripe-height: 150px;
 	position: relative;
 	width: 100%;
 }
@@ -610,12 +601,44 @@ export default {
 	height: 100%;
 }
 
-.wrapper {
+// Not named `wrapper`: the root of VideoBottomBar is, and the root of a child
+// component is given the scope of its parent, so the rules below would be its
+// own as well
+.videos-wrapper {
 	width: 100%;
+	height: 100%;
 	display: flex;
 	position: relative;
 	bottom: 0;
 	inset-inline-start: 0;
+
+	&--stripe {
+		height: var(--stripe-height);
+	}
+}
+
+// The stripe takes its room from the promoted area, so it is collapsed and
+// expanded by its height rather than by a transform: the promoted area is laid
+// out again on every frame of the transition and follows the stripe instead of
+// jumping once it is over.
+.stripe-collapse-enter-active,
+.stripe-collapse-leave-active {
+	overflow: hidden;
+	transition: height var(--animation-slow) ease-in-out;
+}
+
+// The height of the stripe is given by a class, which the transition has to win
+// over whichever order the two end up in
+.videos-wrapper.stripe-collapse-enter-from,
+.videos-wrapper.stripe-collapse-leave-to {
+	height: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.stripe-collapse-enter-active,
+	.stripe-collapse-leave-active {
+		transition: none;
+	}
 }
 
 .grid {
@@ -646,6 +669,10 @@ export default {
 	width: 100%;
 	min-width: 0;
 	position: relative;
+	// The stripe keeps its height while it is collapsed or expanded, so that its
+	// tiles slide out of the way instead of being squashed on the way
+	flex: 0 0 auto;
+	height: var(--stripe-height);
 	// Kept out of the grid itself, whose measured height is the height of its
 	// tiles
 	padding-block: var(--grid-gap);
@@ -666,6 +693,7 @@ export default {
 		border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
 	}
 
+	// The bottom bar of the tile
 	.wrapper {
 		position: absolute;
 	}
diff --git a/src/components/CallView/Grid/gridLayout.ts b/src/components/CallView/Grid/gridLayout.ts
index 26f5d5bc6a8..7070d901026 100644
--- a/src/components/CallView/Grid/gridLayout.ts
+++ b/src/components/CallView/Grid/gridLayout.ts
@@ -15,8 +15,7 @@ export const MIN_TILE_WIDTH_COMPACT = 200
 // its grid is taken out, see STRIPE_HEIGHT
 export const MIN_TILE_HEIGHT_COMPACT = 134
 
-// Height of the stripe, in px. Align with the height of the stripe wrapper in
-// VideosGrid
+// Height of the stripe, in px. Align with var(--stripe-height) in VideosGrid
 export const STRIPE_HEIGHT = 150
 
 // Aspect ratio (width / height) the layout tries to reach for each tile.

From 9a1495c4aa11f7c17a82a1cfe14251ca636c5b94 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Tue, 25 Aug 2026 13:20:45 +0200
Subject: [PATCH 08/10] fix: remove unused prop showControls

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 src/components/CallView/CallView.vue                     | 2 --
 src/components/CallView/shared/LocalVideo.vue            | 5 -----
 src/components/CallView/shared/ViewerOverlayCallView.vue | 1 -
 3 files changed, 8 deletions(-)

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index fc1e52809c7..2ae32ce37bc 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -47,7 +47,6 @@
 						:localMediaModel="localMediaModel"
 						:localCallParticipantModel="localCallParticipantModel"
 						:isStripe="false"
-						:showControls="false"
 						:isSidebar="false"
 						isBig
 						fitVideo />
@@ -154,7 +153,6 @@
 					ref="localVideo"
 					class="local-video"
 					:class="{ 'local-video--sidebar': isSidebar }"
-					:showControls="false"
 					:fitVideo="true"
 					:isStripe="true"
 					:token="token"
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 9bc6805ec43..fe864903fbd 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -129,11 +129,6 @@ export default {
 			default: false,
 		},
 
-		showControls: {
-			type: Boolean,
-			default: true,
-		},
-
 		unSelectable: {
 			type: Boolean,
 			default: false,
diff --git a/src/components/CallView/shared/ViewerOverlayCallView.vue b/src/components/CallView/shared/ViewerOverlayCallView.vue
index 27631aa6b7a..74e64fabbd0 100644
--- a/src/components/CallView/shared/ViewerOverlayCallView.vue
+++ b/src/components/CallView/shared/ViewerOverlayCallView.vue
@@ -77,7 +77,6 @@
 							v-if="localModel.attributes.videoEnabled"
 							class="viewer-overlay__local-video"
 							:token="token"
-							:showControls="false"
 							:localMediaModel="localModel"
 							:localCallParticipantModel="localCallParticipantModel"
 							isSmall

From 9b802ee26ac62d35dedabaaa659c149843e0de73 Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Tue, 25 Aug 2026 13:21:59 +0200
Subject: [PATCH 09/10] fix(usePagination): last page overlaps the page before
 it whenever the videos do not divide evenly into pages.

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 .../CallView/Grid/usePagination.spec.ts       | 24 +++++++++++++++++--
 src/components/CallView/Grid/usePagination.ts |  9 ++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/CallView/Grid/usePagination.spec.ts b/src/components/CallView/Grid/usePagination.spec.ts
index e8daa6a6037..a90a5322a4e 100644
--- a/src/components/CallView/Grid/usePagination.spec.ts
+++ b/src/components/CallView/Grid/usePagination.spec.ts
@@ -43,6 +43,25 @@ describe('usePagination', () => {
 			expect(hasNextPage.value).toBe(true)
 		})
 
+		test('fills the last page by overlapping the one before it', () => {
+			const pagination = createPagination(7, 3)
+
+			pagination.next()
+			expect(pagination.displayedVideos.value).toEqual([3, 4, 5])
+
+			// Only one video is left over, but the page stays full by showing
+			// the last `slots` videos instead of trailing off with a single one
+			pagination.next()
+			expect(pagination.displayedVideos.value).toEqual([4, 5, 6])
+		})
+
+		test('does not overlap when the videos divide evenly into pages', () => {
+			const pagination = createPagination(6, 3)
+
+			pagination.next()
+			expect(pagination.displayedVideos.value).toEqual([3, 4, 5])
+		})
+
 		test('shows nothing while the layout is not known yet (0 slots)', () => {
 			const { displayedVideos, numberOfPages, hasNextPage, hasPreviousPage } = createPagination(7, 0)
 
@@ -73,7 +92,8 @@ describe('usePagination', () => {
 
 			pagination.next()
 			expect(pagination.currentPage.value).toBe(2)
-			expect(pagination.displayedVideos.value).toEqual([6])
+			// The last page is shifted back to stay full, so it overlaps page 1
+			expect(pagination.displayedVideos.value).toEqual([4, 5, 6])
 			expect(pagination.hasNextPage.value).toBe(false)
 		})
 
@@ -96,7 +116,7 @@ describe('usePagination', () => {
 			pagination.next()
 
 			expect(pagination.currentPage.value).toBe(2)
-			expect(pagination.displayedVideos.value).toEqual([6])
+			expect(pagination.displayedVideos.value).toEqual([4, 5, 6])
 		})
 
 		test('does not navigate before the first page', () => {
diff --git a/src/components/CallView/Grid/usePagination.ts b/src/components/CallView/Grid/usePagination.ts
index 9a3ba24ae0c..7a8e6374bb3 100644
--- a/src/components/CallView/Grid/usePagination.ts
+++ b/src/components/CallView/Grid/usePagination.ts
@@ -17,6 +17,10 @@ import { computed, ref, watch } from 'vue'
  * resize or when participants leave), so the pagination never points past the
  * end of the list.
  *
+ * Every page is full: rather than trailing off with a half empty grid, the last
+ * page is shifted back to end on the last video, so it overlaps the page before
+ * it whenever the videos do not divide evenly into pages.
+ *
  * @param videosCount - the number of videos to paginate
  * @param slots - number of videos per page (`0` while the grid layout is not
  *   yet known, in which case nothing is displayed)
@@ -35,7 +39,10 @@ export function usePagination(videosCount: Readonly<Ref<number>>, slots: Readonl
 			return [0, 0]
 		}
 
-		const start = currentPage.value * slots.value
+		// The last page is shifted back so it holds `slots.value` tiles like
+		// every other page, rather than trailing off with a half empty grid
+		const lastPageStart = Math.max(videosCount.value - slots.value, 0)
+		const start = Math.min(currentPage.value * slots.value, lastPageStart)
 		return [start, start + slots.value]
 	})
 

From f7751e7a237b1f3f9f2152e38e01cb1be23f0b7f Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Tue, 25 Aug 2026 13:22:14 +0200
Subject: [PATCH 10/10] fix: improve transitions

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 .../CallView/Grid/StripeControls.vue           |  7 ++++++-
 src/components/CallView/Grid/VideosGrid.vue    | 18 +++++++++++-------
 .../CallView/Grid/gridLayout.spec.ts           |  4 ++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/CallView/Grid/StripeControls.vue b/src/components/CallView/Grid/StripeControls.vue
index c0ac4d778a0..bedb241903b 100644
--- a/src/components/CallView/Grid/StripeControls.vue
+++ b/src/components/CallView/Grid/StripeControls.vue
@@ -128,7 +128,12 @@ const toggleLabel = computed(() => props.isOpen
 	opacity: .4;
 	transition: opacity var(--animation-quick) ease-in-out;
 
-	#call-container:hover & {
+	@media (hover: none) {
+		opacity: 1;
+	}
+
+	#call-container:hover &,
+	&:focus-within {
 		opacity: 1;
 	}
 }
diff --git a/src/components/CallView/Grid/VideosGrid.vue b/src/components/CallView/Grid/VideosGrid.vue
index f694ecf83c6..2046e4d993c 100644
--- a/src/components/CallView/Grid/VideosGrid.vue
+++ b/src/components/CallView/Grid/VideosGrid.vue
@@ -634,13 +634,6 @@ export default {
 	height: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-	.stripe-collapse-enter-active,
-	.stripe-collapse-leave-active {
-		transition: none;
-	}
-}
-
 .grid {
 	display: grid;
 	height: 100%;
@@ -754,6 +747,7 @@ export default {
 	top: var(--grid-gap);
 	inset-inline-end: var(--grid-gap);
 	z-index: 2;
+	transition: top var(--animation-slow) ease-in-out;
 
 	// A collapsed stripe holds no tile to sit over, and no room of its own to
 	// sit in, so the controls take the room above it
@@ -799,4 +793,14 @@ export default {
 	}
 }
 
+// Kept last in the stylesheet so it overrides the transitions declared above,
+// which it only ties with on specificity
+@media (prefers-reduced-motion: reduce) {
+	.stripe-collapse-enter-active,
+	.stripe-collapse-leave-active,
+	.stripe-controls-position {
+		transition: none;
+	}
+}
+
 </style>
diff --git a/src/components/CallView/Grid/gridLayout.spec.ts b/src/components/CallView/Grid/gridLayout.spec.ts
index 38b7ec8976b..34e3d943198 100644
--- a/src/components/CallView/Grid/gridLayout.spec.ts
+++ b/src/components/CallView/Grid/gridLayout.spec.ts
@@ -44,8 +44,8 @@ describe('gridLayout', () => {
 		})
 
 		test('fits a compact tile in the stripe', () => {
-			// The grid of the stripe is padded by a gap at its top
-			expect(getMinTileHeight(true)).toBeLessThanOrEqual(STRIPE_HEIGHT - GRID_GAP)
+			// The grid of the stripe is padded by a gap at its top and bottom
+			expect(getMinTileHeight(true)).toBe(STRIPE_HEIGHT - 2 * GRID_GAP)
 		})
 	})