From 32fa9b48a6b2beda564ce6680ac76945e4929364 Mon Sep 17 00:00:00 2001
From: neoapps-dev <asd22.info@gmail.com>
Date: Mon, 20 Apr 2026 18:33:14 +0300
Subject: [PATCH] fix: overlapping preventing you from changing username with
 mouse

---
 src/components/common/SkinViewer.tsx | 8 ++++----
 src/components/views/SkinsView.tsx   | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/common/SkinViewer.tsx b/src/components/common/SkinViewer.tsx
index fe924f5..a5be6f9 100644
--- a/src/components/common/SkinViewer.tsx
+++ b/src/components/common/SkinViewer.tsx
@@ -207,7 +207,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playPressSo
     }
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (document.activeElement?.tagName === 'INPUT' && e.key !== 'ArrowDown' && e.key !== 'ArrowRight') return;
+      if (document.activeElement?.tagName === 'INPUT') return;
 
       if (e.key === 'ArrowRight') {
         if (legacyMode) onNavigateRight();
@@ -268,18 +268,18 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playPressSo
       className={`absolute ${legacyMode ? 'left-[calc(50vw-340px)]' : 'left-16'} ${legacyMode ? 'top-1/2' : 'top-[40%]'} -translate-y-1/2 flex flex-col items-center gap-1 outline-none z-10`}
     >
       {!legacyMode && (
-        <div className={`bg-black/20 flex justify-center items-center ${legacyMode ? 'mb-0' : 'mb-2'} px-2 py-1 rounded-sm border-2 transition-colors ${isFocusedSection && focusIndex === 0 ? 'border-[#FFFF55]' : 'border-transparent'}`} data-focus="0" tabIndex={0}>
+        <div className={`relative z-20 bg-black/20 flex justify-center items-center ${legacyMode ? 'mb-0' : 'mb-2'} px-2 py-1 rounded-sm border-2 transition-colors ${isFocusedSection && focusIndex === 0 ? 'border-[#FFFF55]' : 'border-transparent'}`} data-focus="0" tabIndex={0}>
           <input
             type="text" value={username} maxLength={16}
             style={{ width: `${Math.max(username.length, 3) + 2}ch` }}
             onChange={(e) => setUsername(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === 'ArrowDown') {
+              if (e.key === 'Enter') {
                 e.currentTarget.blur();
                 e.stopPropagation();
               }
             }}
-            className="bg-transparent text-white focus:text-[#FFFF55] outline-none border-none text-center font-['Mojangles'] mc-text-shadow tracking-widest text-xl cursor-default"
+            className="bg-transparent text-white focus:text-[#FFFF55] outline-none border-none text-center font-['Mojangles'] mc-text-shadow tracking-widest text-xl cursor-text"
           />
         </div>
       )}
diff --git a/src/components/views/SkinsView.tsx b/src/components/views/SkinsView.tsx
index 9d32022..9772763 100644
--- a/src/components/views/SkinsView.tsx
+++ b/src/components/views/SkinsView.tsx
@@ -589,7 +589,7 @@ const SkinsView = memo(function SkinsView() {
                     value={skin.name}
                     maxLength={16}
                     onChange={(e) => handleNameChange(skin.id, e.target.value)}
-                    className={`bg-transparent text-center outline-none border-none text-base mc-text-shadow w-full truncate transition-colors ${isActive || isFocused ? "text-[#FFFF55]" : "text-white"} ${isDefaultSkin(skin.id) ? "pointer-events-none" : ""}`}
+                    className={`bg-transparent text-center outline-none border-none text-base mc-text-shadow w-full truncate transition-colors relative z-10 ${isActive || isFocused ? "text-[#FFFF55]" : "text-white"} ${isDefaultSkin(skin.id) ? "pointer-events-none" : ""}`}
                     onClick={(e) => e.stopPropagation()}
                     spellCheck={false}
                     readOnly={isDefaultSkin(skin.id)}
@@ -677,7 +677,7 @@ const SkinsView = memo(function SkinsView() {
                       onChange={(e) =>
                         handleCapeNameChange(cape.id, e.target.value)
                       }
-                      className={`bg-transparent text-center outline-none border-none text-base mc-text-shadow w-full truncate transition-colors ${isActive || isFocused ? "text-[#FFFF55]" : "text-white"}`}
+                      className={`bg-transparent text-center outline-none border-none text-base mc-text-shadow w-full truncate transition-colors relative z-10 ${isActive || isFocused ? "text-[#FFFF55]" : "text-white"}`}
                       onClick={(e) => e.stopPropagation()}
                       spellCheck={false}
                     />
@@ -774,7 +774,7 @@ const SkinsView = memo(function SkinsView() {
                   onFocus={() => setModalFocusIndex(0)}
                   autoFocus
                   spellCheck={false}
-                  className={`w-full h-12 bg-black/50 border-2 text-white px-4 text-xl outline-none transition-colors ${modalFocusIndex === 0 ? "border-[#FFFF55]" : "border-[#373737]"}`}
+                  className={`w-full h-12 bg-black/50 border-2 text-white px-4 text-xl outline-none transition-colors relative z-10 ${modalFocusIndex === 0 ? "border-[#FFFF55]" : "border-[#373737]"}`}
                 />
 
                 {importError && (