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/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..bedb241903b
--- /dev/null
+++ b/src/components/CallView/Grid/StripeControls.vue
@@ -0,0 +1,190 @@
+<!--
+  - 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;
+
+	@media (hover: none) {
+		opacity: 1;
+	}
+
+	#call-container:hover &,
+	&:focus-within {
+		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 a24697e51c5..2046e4d993c 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>
-		<TransitionWrapper :name="isStripe ? 'slide-down' : undefined">
-			<div v-if="!isStripe || stripeOpen" class="wrapper" :style="wrapperStyle">
+			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>
+		<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="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')"
@@ -42,7 +44,6 @@
 					<div
 						ref="grid"
 						class="grid"
-						:class="{ stripe: isStripe }"
 						:style="gridStyle"
 						@wheel="debounceHandleWheelEvent">
 						<template v-if="!devMode">
@@ -97,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')"
@@ -110,18 +111,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"
@@ -161,7 +150,7 @@
 					</div>
 				</template>
 			</div>
-		</TransitionWrapper>
+		</Transition>
 	</div>
 </template>
 
@@ -170,22 +159,22 @@ 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 {
 	computeTilePlacements,
 	getHalfColumnCount,
+	getHalfColumnMaxWidth,
 	getHalfColumnMinWidth,
 	GRID_GAP,
+	TARGET_ASPECT_RATIO,
 	TILE_COLUMN_SPAN,
 } from './gridLayout.ts'
 import { placeholderImage, placeholderModel, placeholderName, placeholderSharedData } from './gridPlaceholders.ts'
@@ -204,12 +193,10 @@ export default {
 		LocalVideo,
 		EmptyCallView,
 		NcButton,
-		TransitionWrapper,
+		StripeControls,
 		VideoBottomBar,
-		IconChevronDown,
 		IconChevronLeft,
 		IconChevronRight,
-		IconChevronUp,
 	},
 
 	props: {
@@ -300,9 +287,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 +303,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.
@@ -397,14 +384,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) {
@@ -430,10 +409,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 []
 			}
 
@@ -444,11 +423,20 @@ 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
+		// 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
@@ -469,17 +457,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))`,
-			}
-		},
-
-		wrapperStyle() {
-			if (this.isStripe) {
-				return 'height: 250px'
-			} else {
-				return 'height: 100%'
+				// The columns no longer take the whole width once they are
+				// capped, so the grid itself has to center them
+				justifyContent: 'center',
 			}
 		},
 
@@ -519,7 +506,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,
@@ -604,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%;
 }
@@ -612,12 +601,37 @@ 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;
 }
 
 .grid {
@@ -635,9 +649,6 @@ export default {
 		grid-column: span 2;
 	}
 
-	&.stripe {
-		padding: var(--grid-gap) var(--grid-gap) 0 0;
-	}
 }
 
 .grid-wrapper {
@@ -651,6 +662,13 @@ 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);
 }
 
 .dev-mode-video {
@@ -668,6 +686,7 @@ export default {
 		border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
 	}
 
+	// The bottom bar of the tile
 	.wrapper {
 		position: absolute;
 	}
@@ -723,7 +742,24 @@ export default {
 	}
 }
 
+.stripe-controls-position {
+	position: absolute;
+	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
+	&--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);
@@ -737,31 +773,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: calc(var(--navigation-position) + var(--grid-gap));
-		}
-	}
-}
-
-.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;
 
@@ -782,10 +793,14 @@ 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);
+// 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 48ddcaa4bd9..34e3d943198 100644
--- a/src/components/CallView/Grid/gridLayout.spec.ts
+++ b/src/components/CallView/Grid/gridLayout.spec.ts
@@ -9,11 +9,13 @@ import {
 	computeRowDistribution,
 	computeTilePlacements,
 	getHalfColumnCount,
+	getHalfColumnMaxWidth,
 	getHalfColumnMinWidth,
 	getMinTileHeight,
 	getMinTileWidth,
-	getTargetAspectRatio,
 	GRID_GAP,
+	STRIPE_HEIGHT,
+	TARGET_ASPECT_RATIO,
 	TILE_COLUMN_SPAN,
 } from './gridLayout.ts'
 
@@ -38,12 +40,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('targets a wider aspect ratio for the full grid than the stripe', () => {
-			expect(getTargetAspectRatio(false)).toBe(1.5)
-			expect(getTargetAspectRatio(true)).toBe(1)
+		test('fits a compact tile in the stripe', () => {
+			// The grid of the stripe is padded by a gap at its top and bottom
+			expect(getMinTileHeight(true)).toBe(STRIPE_HEIGHT - 2 * GRID_GAP)
 		})
 	})
 
@@ -58,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 })
 		})
 
@@ -105,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.
@@ -134,7 +159,7 @@ describe('gridLayout', () => {
 						const layout = {
 							gridWidth,
 							gridHeight,
-							targetAspectRatio: getTargetAspectRatio(isStripe),
+							targetAspectRatio: TARGET_ASPECT_RATIO,
 							minWidth: getMinTileWidth(isStripe),
 							minHeight: getMinTileHeight(isStripe),
 							noLocalVideoReserve: isStripe,
@@ -218,6 +243,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 9ceaa9b1205..7070d901026 100644
--- a/src/components/CallView/Grid/gridLayout.ts
+++ b/src/components/CallView/Grid/gridLayout.ts
@@ -11,11 +11,15 @@ 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 var(--stripe-height) 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
-export const TARGET_ASPECT_RATIO_STRIPE = 1
 
 /**
  * Minimum tile width for the given layout mode.
@@ -35,15 +39,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
@@ -140,11 +135,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
@@ -162,30 +161,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)
 
@@ -196,9 +194,7 @@ export function computeGridDimensions({
 				break
 			}
 		} else {
-			if (rows >= 2) {
-				rows--
-			}
+			rows--
 
 			currentSlots = slotsFor(columns, rows, noLocalVideoReserve)
 
@@ -209,10 +205,6 @@ export function computeGridDimensions({
 				break
 			}
 		}
-
-		if (previousColumns === columns && previousRows === rows) {
-			break
-		}
 	}
 
 	return { columns, rows }
@@ -298,6 +290,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,
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]
 	})
 
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 4611906f110..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,
@@ -196,7 +191,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 +386,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);
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