# Files changed · PR \#9539 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/9539/diffs)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

[fix\(web\): restore composer controls as space becomes available](https://git.cafe/pingdotgg/t3code/pull/9539.md)

Version: 2

Head commit: 4268800cb893e232484f21865c4a63e74f2ffb52

Base commit: 07c4ab5077fa9c32bf34ab07dd2caa3907878dd9

Comparison base: 0ba06a122bc73f705bfc18875366b4eeb1160992

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## apps/web/src/components/composerFooterLayout.test.ts

Status: modified; +27; −0

```diff
@@ -333,6 +333,33 @@
     ).toEqual({ hiddenCount: 0, visible: true });
   });
 
+  it("restores the blocks that fit when the full cluster has no slack", () => {
+    const partlyRestored = resolveRestingComposerControlsLayout({
+      ...base,
+      hostWidth: 357,
+      previous: { hiddenCount: 2, visible: true },
+    });
+    expect(partlyRestored).toEqual({ hiddenCount: 1, visible: true });
+    expect(
+      resolveRestingComposerControlsLayout({ ...base, hostWidth: 357, previous: partlyRestored }),
+    ).toEqual(partlyRestored);
+    expect(
+      resolveRestingComposerControlsLayout({ ...base, hostWidth: 358, previous: partlyRestored }),
+    ).toEqual({ hiddenCount: 0, visible: true });
+  });
+
+  it("requires slack before partially restoring a cluster", () => {
+    // One inline block, the picker, and overflow need 149 + 60 + 24 + 8 = 241px.
+    const previous = { hiddenCount: 2, visible: true };
+    expect(resolveRestingComposerControlsLayout({ ...base, hostWidth: 241, previous })).toEqual(
+      previous,
+    );
+    expect(resolveRestingComposerControlsLayout({ ...base, hostWidth: 242, previous })).toEqual({
+      hiddenCount: 1,
+      visible: true,
+    });
+  });
+
   it("still resolves from scratch when there is no previous layout", () => {
     expect(resolveRestingComposerControlsLayout({ ...base, hostWidth: 357 })).toEqual({
       hiddenCount: 0,
```

## apps/web/src/components/composerFooterLayout.ts

Status: modified; +7; −3

```diff
@@ -134,9 +134,13 @@
   // composer re-measures on every render, so without that margin a host
   // sitting exactly on a threshold flips a block in and out until React
   // gives up with "Maximum update depth exceeded".
+  if (previous) {
+    const previousHiddenCount = Math.min(previous.hiddenCount, blockWidths.length);
-  if (previous && hiddenCount < previous.hiddenCount) {
-    if (restingComposerControlsWidth(input, hiddenCount) > hostWidth - RESTING_CONTROLS_SLACK_PX) {
-      hiddenCount = Math.min(previous.hiddenCount, blockWidths.length);
+    while (
+      hiddenCount < previousHiddenCount &&
+      restingComposerControlsWidth(input, hiddenCount) > hostWidth - RESTING_CONTROLS_SLACK_PX
+    ) {
+      hiddenCount += 1;
     }
   }
   const minimumWidth = restingComposerControlsWidth(input, hiddenCount, input.minimumFixedWidth);
```