This is more UX horror than programming horror, but this seems like the right community for this. I had to help make this shit.

There was a list of bank transactions that you could scroll through, and you could expand a transaction and change some of its details. If you change its category, a list of checkboxes will show up for applying the category change to other transactions that are similar. This list also was scrollable. There was a scrollable list inside a scrollable list. Neither of these scrollable lists had a scrollbar.

The button on the expanded transaction for saving the changes triggered not one, not two, but three API calls. Everything’s peachy if all the calls succeed or they all fail, but what do you show the user if it some fail and some succeed? Who the fuck knows.

• This file is over 20k lines long, and 400kB

• It is nested over 10 levels deep in many places

• There is no naming consistency. The original file used BEM, but now it switches randomly between whatever the devs felt like at the time. There are random contractions all over the place (eg, a parent container might have the class payment-items, but the children are p-item)

• There is no style consistency. It switches randomly between kebab case, camel case, snake case, a mix of kebab and snake case (!!) or no case at all (just one long word with no separators). A parent element might use one case, but then the child element will use a different case for the exact same term