style(RecipePanel): adjust layout, spacing, and sizing for better visual balance

[DaPandamonium]

This PR updates the RecipePanel layout to improve readability and spacing across input, output, and statline sections.

Changes include:

• Adjusted outer container width and padding for better centering
• Unified gap spacing between sections using gap-2 and gap-3
• Output stack cards now use consistent border, padding, and size for clarity
• Statline layout made more compact with smaller font and cleaner alignment
• Removed transition animation from tab panel for a faster, cleaner experience

This is a visual-only PR with no functional logic changes.

Also, I'm a very junior dev still learning and really enjoying contributing to this project. Feedback is very welcome!

[DaPandamonium]

Hey @wizjany , hope you didnt mind at all for playing around with it, tbh loving the project!

Just to summarize the changes, here's an image

[wizjany]

Yup, absolutely. I'll take a look this weekend. I've been meaning to get back to this but I'm busy actually playing the game and with my other hobbies.
As you've probably noticed, there's a lot of duplication across the detail files, especially around this panel. I'll try and get this merged and do some cleanup to consolidate in various places.

[wizjany]

I like the changes overall but it looks like some overflow containment went missing somewhere. I thought it might be due to the max width on the dialog (max-w-[1100px]) but that doesn't seem to be it. Long item lists will break out of their parent.

[DaPandamonium]

I like the changes overall but it looks like some overflow containment went missing somewhere. I thought it might be due to the max width on the dialog (max-w-[1100px]) but that doesn't seem to be it. Long item lists will break out of their parent.

So maybe we can add a scrollbar within in the card inside.

[DaPandamonium]

Last commit

[wizjany]

works fine on the right side but not when scrolled to the left?

honestly not sure what's going on. going to have to dissect the changes and figure out what's responsible. I don't know css nuances well enough.

[DaPandamonium]

This is fixed, it was an issue with divs especially when setting max-width so moved that to outer div

[DaPandamonium]

@wizjany Heya! I think its great now, let me know if you notice something.

[wizjany]

uh whoops, I typed up a reply but apparently didn't post it.

I like the general look of this (the grouping, the more muted text, etc) but there's still a lot of examples of bad spacing and inconsistencies tbh.
The flex and widths are forcing lots of extra space. The chances aren't lined up vertically (or even the same font size).

[DaPandamonium]

@wizjany no worries! Ah that item, good catch. I fixed it, and improved a little. There are too many items but so far looks good on my end ^^

[DaPandamonium]

Hey @wizjany , wanted to check up if you had any time to check it ^^

[wizjany]

Sorry I've been preoccupied. I'm not a big fan of putting js hacks into css. I feel like there should be a way to do this purely with css.