#####Problem
The Mismatch finder tool was originally designed following WiKit's grid system and breakpoints. With the creation of Codex, a new set of standard grids and breakpoints were introduced and, with them, some differences in spacing and margins that we now need to resolve.
#####Solution
In both the home and the results views of the Mismatch finder, we'll need to (please see specs for details):
- Apply new max-width values to paragraphs and page content
- Replace WiKit breakpoint values by Codex's
- Adjust the page (and header and footer) margins according to each breakpoint
- Improve the placement of the "Random mismatches" button on mobile: its placement should change when a spacing of 1.5em cannot be maintained between the TextArea label and the button in narrower screens
| [[ https://www.figma.com/file/ZUdkxlbZCSHoluhVrjANSE/WiKit-to-Codex-Migration?type=design&node-id=242-12678&mode=design&t=jIJQyYqG06K2zsU7-0 | Specifications are available in Figma ]] |
Please note that all specs indicate needed changes exclusively.
To support the replacement, here's a [[ https://docs.google.com/spreadsheets/d/1CmrW7JVt9o2TvAfyIVScOE_Vc1h8DLpBqvsVhAB84kU/edit#gid=1602375525 | WiKit to Codex tokens mapping ]]. You can find the WiKit tokens matched with their corresponding Codex token.
#####Considerations
- After this change, the component breakpoint that modifies the layout of the WiKit Table won't match the new Codex tablet breakpoint. This is not a problem: we'll actually be updating the Table's breakpoint as part of its porting to the MSMF repository (see T348271). It will be replaced by a custom value that prioritizes the readability of the Table content.
#####Acceptance criteria
[] The Mismatch Finder's layout is adjusted to follow the new Codex grid system
[] Mismatch Finder uses Codex's breakpoints