From 3fff62864223c6c2b22b9f6e1722c15033ba3a8b Mon Sep 17 00:00:00 2001
From: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
Date: Wed, 14 Jan 2026 00:51:50 +0000
Subject: [PATCH] Skins padding fix (#2893)

## Description:

Fixes some visual issues in the skins modal **tailwind only changes +
small movement of logic check**

(padding issue)
<img width="830" height="155" alt="image"
src="https://github.com/user-attachments/assets/6581f887-ee23-4751-a9a3-82416aa1a381"
/>

(huge gap at bottom because it was trying to put a button there but then
stopping due to requirespurchase=false)
<img width="218" height="302" alt="image"
src="https://github.com/user-attachments/assets/0837b256-1137-4ae4-9940-8a4375143f54"
/>



Now:
<img width="303" height="297" alt="image"
src="https://github.com/user-attachments/assets/4ba1556a-444a-4e3e-9d1a-73355dd34dbb"
/>

<img width="844" height="213" alt="image"
src="https://github.com/user-attachments/assets/cce2472c-9ac4-4caf-8052-1d597610b1c9"
/>



## 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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

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

w.o.n
---
 src/client/TerritoryPatternsModal.ts   |  4 ++--
 src/client/components/PatternButton.ts | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts
index 03086d46b..86701db41 100644
--- a/src/client/TerritoryPatternsModal.ts
+++ b/src/client/TerritoryPatternsModal.ts
@@ -174,8 +174,8 @@ export class TerritoryPatternsModal extends BaseModal {
     }
 
     return html`
-      <div class="flex flex-col gap-4">
-        <div class="flex justify-center">
+      <div class="flex flex-col">
+        <div class="pt-4 flex justify-center">
           ${hasLinkedAccount(this.userMeResponse)
             ? this.renderMySkinsButton()
             : html``}
diff --git a/src/client/components/PatternButton.ts b/src/client/components/PatternButton.ts
index 58ba1a863..037dc4743 100644
--- a/src/client/components/PatternButton.ts
+++ b/src/client/components/PatternButton.ts
@@ -137,9 +137,9 @@ export class PatternButton extends LitElement {
           </div>
         </button>
 
-        <div class="w-full mt-2">
-          ${this.requiresPurchase && this.pattern?.product
-            ? html`
+        ${this.requiresPurchase && this.pattern?.product
+          ? html`
+              <div class="w-full mt-2">
                 <button
                   class="w-full px-4 py-2 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg text-xs font-bold uppercase tracking-wider cursor-pointer transition-all duration-200
                    hover:bg-green-500/30 hover:shadow-[0_0_15px_rgba(74,222,128,0.2)]"
@@ -150,9 +150,9 @@ export class PatternButton extends LitElement {
                     >(${this.pattern.product.price})</span
                   >
                 </button>
-              `
-            : html`<div class="h-[34px]"></div>`}
-        </div>
+              </div>
+            `
+          : null}
       </div>
     `;
   }