From 993991105ffefd0092897ba2b26e14e07731db13 Mon Sep 17 00:00:00 2001
From: fkwp <github-fkwp@w4ve.de>
Date: Wed, 23 Sep 2026 13:09:17 +0200
Subject: [PATCH] Keep five backgrounds of their own, which fills the grid

- At four the grid stopped at eight tiles, since the add tile goes at the
  limit, and left its last corner empty. At five it is nine at the limit,
  and four with the add tile is nine one short of it.
- Guarded as the rule rather than the number: the grid is whole at the
  limit and one short of it. Fails at four.
- The stylesheet had claimed a whole three-by-three at the limit all along;
  now it is one.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/MediaMuteAndSwitchButton.module.css |  5 +++--
 src/livekit/backgroundEffects.test.ts              | 10 ++++++++++
 src/livekit/backgroundImages.ts                    | 11 +++++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index 092cb23ce..b58655ea6 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -157,8 +157,9 @@ Please see LICENSE in the repository root for full details.
  * The Background effects grid.
  *
  * Three across matches the design and keeps a thumbnail readable at a glance;
- * with no effect, blur, two shipped images and the add tile it also settles
- * into a tidy three-by-three at the maximum number of images.
+ * with no effect, blur and two shipped images, the five a user may add fill it
+ * to a whole three-by-three at the limit, where the add tile goes away, and
+ * four and the add tile fill it one short of it.
  *
  * minmax(0, 1fr) rather than 1fr: a grid track will not shrink below its
  * content's minimum width by default, and a tile carrying a label is wider
diff --git a/src/livekit/backgroundEffects.test.ts b/src/livekit/backgroundEffects.test.ts
index 6ad7de07c..d086cb890 100644
--- a/src/livekit/backgroundEffects.test.ts
+++ b/src/livekit/backgroundEffects.test.ts
@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { maxAddedBackgrounds } from "./backgroundImages";
 import { describe, expect, test } from "vitest";
 
 import {
@@ -46,6 +47,15 @@ describe("the chosen background effect", () => {
     }
   });
 
+  // Three to a row, and the add tile goes at the limit. At four of their own
+  // the grid stopped at eight and left its last corner empty; the rule is that
+  // it is whole both at the limit and one short of it, with the add tile.
+  test("fills the grid at the limit and one short of it", () => {
+    const fixed = 2 + shippedBackgrounds.length; // no effect, blur, shipped
+    expect((fixed + maxAddedBackgrounds) % 3).toBe(0);
+    expect((fixed + maxAddedBackgrounds - 1 + 1) % 3).toBe(0);
+  });
+
   test("gives every shipped background an image to draw", () => {
     for (const background of shippedBackgrounds)
       expect(imagePathFor(background.id)).toBeTruthy();
diff --git a/src/livekit/backgroundImages.ts b/src/livekit/backgroundImages.ts
index 3ab2a1c5d..9d714e2d6 100644
--- a/src/livekit/backgroundImages.ts
+++ b/src/livekit/backgroundImages.ts
@@ -7,8 +7,15 @@ Please see LICENSE in the repository root for full details.
 
 import { logger } from "matrix-js-sdk/lib/logger";
 
-/** The most backgrounds of their own a device keeps. */
-export const maxAddedBackgrounds = 4;
+/**
+ * The most backgrounds of their own a device keeps.
+ *
+ * Five, because it fills the grid. With no effect, blur and the two shipped
+ * images that makes nine tiles at the limit, where the add tile goes; and one
+ * short of it, four and the add tile make nine too. At four the grid stopped
+ * at eight and left its last corner empty.
+ */
+export const maxAddedBackgrounds = 5;
 
 /**
  * The longest edge an added background is kept at.