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

@@ -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

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();

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.