Fix store bonus ribbon layout across languages (#4748)

## Description:

Moved the Store Bonus Ribbon lower within the pack card and fixed its
width to prevent translated text from affecting its position.

before
<img width="364" height="503" alt="スクリーンショット 2026-07-28 17 48 50"
src="https://github.com/user-attachments/assets/0f1f986f-637b-4b04-a284-a2b6de5e67b3"
/>

after
<img width="234" height="319" alt="スクリーンショット 2026-07-28 17 49 08"
src="https://github.com/user-attachments/assets/d8f99b70-8960-4ac7-a626-bed18aac73e0"
/>


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory

## Please put your Discord username so you can be contacted if a bug or
regression is found:
aotumuri

src/client/components/CosmeticButton.ts

@@ -258,7 +258,7 @@ export class CosmeticButton extends LitElement {
         >
         ${pack.bonusAmount > 0
           ? html`<div
-              class="absolute top-3 -right-8 bg-green-500 text-white text-[10px] font-black px-8 py-0.5 rotate-45 shadow-md uppercase tracking-wide pointer-events-none"
+              class="absolute top-8 -right-10 w-40 bg-green-500 text-white text-[10px] font-black py-0.5 rotate-45 shadow-md uppercase tracking-wide pointer-events-none"
             >
               ${translateText("cosmetics.free", {
                 numFree: pack.bonusAmount.toLocaleString(),