Repository navigation
fix(inspector): stabilize queue panel hint to prevent layout shifts - #90
Conversation
The queue hint used different messages for empty, queued, and shedding states. When the queue crossed those states, the rendered content changed height and caused the panel content below it to jump. Replace the state-specific messages with one stable message that describes all three queue states without changing the panel layout.
|
@KrAG2000 is attempting to deploy a commit to the breakscale OSS Program Team on Vercel. A member of the Team first needs to authorize it. |
|
Thanks! The jump is worth fixing, but the state messages are doing real work, especially the shedding one with the live rate. Could you keep those and reserve the hint's height instead (a min-height on it, say) so the panel stops shifting? |
- Restored the queued and shedding messages, including the live shed rate - Stack each panel's hint variants in one grid cell sized to the tallest one - Show only the active hint; hidden ones keep their space via visibility - Hold a calmer hint for 1.5s before it replaces a worse one to stop intense flickering (at a specific load) - Keep the replica "Reads served stale" row visible, showing 0% when none - Let the replica bottleneck warning take the stale-read hint's slot when both apply - Move the replica set into ReplicaSetSection so it can use hooks
|
Having the live rate make sense. I reverted those messages and kept the height of the tallest message. It will show up empty at times but it looks good (I tried to not have empty space earlier, thats why i removed those variable messages earlier) Same issue was in Read Replicas. Fixed that too! Although I have tried to maintain your code structure, do verify the code once :) |
|
Nice, this is the right fix. One thing: the new code landed between two existing doc comments and their functions, so the |
|
How can I miss that?😱 |
The queue hint previously showed different messages for empty, queued, and shedding states. When the queue moved between these states, the rendered content changed height and caused the panel content below it to shift.
What this changes
Replaces the state-specific queue hint messages with one stable message that describes all three queue states without changing the panel layout.
Why
The previous messages changed as the queue state changed, which caused unnecessary layout movement in the Inspector panel. A single stable message keeps the layout consistent while still explaining how work is processed, waits, or is turned away depending on queue capacity and consumer speed.
Verification
bun run testpassesbun run typecheckandbun run lintpassbun run buildpasseshttps://github.com/user-attachments/assets/5fe6420a-740d-4404-a945-6b9146ed1613
https://github.com/user-attachments/assets/8d1e2f14-a7ee-4e8b-8574-b6dd470461be