From 85f724d5cca03dfcde79db528404979a50f4949d Mon Sep 17 00:00:00 2001
From: ShinkoNet <shinko@netcavy.net>
Date: Tue, 12 Aug 2025 18:09:35 +1000
Subject: [PATCH] v3.1.1 ui improvements

---
 src/meta.js      |  2 +-
 src/ui/panel.ts  | 24 ++++++++++++++----------
 src/ui/styles.ts |  3 +++
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/meta.js b/src/meta.js
index 6c04b36..6c03fd8 100644
--- a/src/meta.js
+++ b/src/meta.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Wplace Overlay Pro
 // @namespace    http://tampermonkey.net/
-// @version      3.0.0
+// @version      3.1.1
 // @description  Overlays tiles on wplace.live. Can also resize, and color-match your overlay to wplace's palette. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under GPLv3.
 // @author       shinkonet
 // @match        https://wplace.live/*
diff --git a/src/ui/panel.ts b/src/ui/panel.ts
index 1e04e2f..92a0e6e 100644
--- a/src/ui/panel.ts
+++ b/src/ui/panel.ts
@@ -67,23 +67,27 @@ export function createUI() {
                     <span class="op-title-text">Positioning</span>
                 </div>
                 <div class="op-title-right">
-                    <span class="op-muted" id="op-offset-indicator">Offset X 0, Y 0</span>
                     <button class="op-chevron" id="op-collapse-positioning" title="Collapse/Expand">▾</button>
                 </div>
             </div>
             <div id="op-positioning-body">
-                <div class="op-row space">
-                    <div>
+                <div class="op-row-col">
+                    <div class="op-row space-between">
                         <span class="op-muted" id="op-place-label">Place overlay:</span>
-                        <div class="op-small-text">Click a pixel on the canvas to set the anchor.</div>
+                        <span class="op-muted" id="op-offset-indicator">Offset X 0, Y 0</span>
                     </div>
-                    <button class="op-button" id="op-autocap-toggle" title="Capture next clicked pixel as anchor">Disabled</button>
                 </div>
-                <div class="op-nudge-row" style="text-align: right;">
-                    <button class="op-icon-btn" id="op-nudge-left" title="Left">←</button>
-                    <button class="op-icon-btn" id="op-nudge-down" title="Down">↓</button>
-                    <button class="op-icon-btn" id="op-nudge-up" title="Up">↑</button>
-                    <button class="op-icon-btn" id="op-nudge-right" title="Right">→</button>
+                <div class="op-row">
+                    <button class="op-button" id="op-autocap-toggle" title="Capture next clicked pixel as anchor">Disabled</button>
+                    <div class="op-nudge-row" style="margin-left:auto;">
+                        <button class="op-icon-btn" id="op-nudge-left" title="Left">←</button>
+                        <button class="op-icon-btn" id="op-nudge-down" title="Down">↓</button>
+                        <button class="op-icon-btn" id="op-nudge-up" title="Up">↑</button>
+                        <button class="op-icon-btn" id="op-nudge-right" title="Right">→</button>
+                    </div>
+                </div>
+                <div class="op-row center">
+                    <div class="op-small-text">Click a pixel on the canvas to set the anchor.</div>
                 </div>
             </div>
         </div>
diff --git a/src/ui/styles.ts b/src/ui/styles.ts
index 7e68cc5..0a35d10 100644
--- a/src/ui/styles.ts
+++ b/src/ui/styles.ts
@@ -50,6 +50,9 @@ export function injectStyles() {
 
       .op-row { display: flex; align-items: center; gap: 8px; }
       .op-row.space { justify-content: space-between; }
+      .op-row.center { justify-content: center; text-align: center; }
+      .op-row-col { display: flex; flex-direction: column; gap: 4px; }
+      .space-between { justify-content: space-between; }
       .op-small-text { font-size: 11px; color: var(--op-muted); }
 
       .op-button { background: var(--op-btn); color: var(--op-text); border: 1px solid var(--op-btn-border); border-radius: 10px; padding: 6px 10px; cursor: pointer; }