Plan Downgrade Limits Success Block for React

Nothing was downgraded. The limits and use are typed in LIMITS, the two days in AS_OF and EFFECTIVE, and every figure on the page is worked out from them: the days to go, the amount over, the amount to spare and the number of limits that are over. Choosing a reason only changes this page and says so in a polite status line. To wire it, build LIMITS from your plan definitions and the workspace's real usage, and post the reason from pick.

Each bar is on its own scale, the larger of use and the cap, so an overshoot still fits. The solid stretch is whatever fits under the cap, the hatched stretch is the part over it, and a mark at the cap separates them; a limit that fits shows a solid stretch only. The bars are a drawing, hidden from assistive technology: the line above each says "7 of 3" and the line below says "4 members over the limit" or "1 project to spare", so the words never depend on the shading.

They are a single-choice Toggle Group that may be empty: pressing the chosen chip again clears it, and the status line says what was noted or that it was cleared. Arrow keys move between the chips and Space or Enter presses one. Nothing is sent: the choice is kept on this page only.

The Pro card folds into a sentence ("Everything fits: 7 of 25 members, 6.4 of 100 GB, 9 of 50 projects") so the Free card, where the difference is, comes first; the two actions share a row pinned to the bottom of the screen, and the status line is read out but not shown. From the small breakpoint up the Pro card shows its bars, and from the medium breakpoint the two cards sit side by side.

Back to settings and Keep Pro are links to your own routes. Each is a button with render set to an a element and nativeButton={false}.