Minor layout changes for the achievements tab

static/js/game.js

@@ -131,6 +131,8 @@ function handleAchievementUnlock(data) {
 
 function fetchUserAchievements() {
     const achievementsGrid = document.getElementById('achievementsGrid');
+    const achievementInfoBox = document.getElementById('achievementInfoBox');
+    
     if (!achievementsGrid) {
         console.error('Achievements grid not found');
         return;
@@ -138,9 +140,16 @@ function fetchUserAchievements() {
 
     if (!currentUser) {
         displaySignInMessage(achievementsGrid, 'achievements');
+        if (achievementInfoBox) {
+            achievementInfoBox.style.display = 'none';
+        }
         return;
     }
 
+    if (achievementInfoBox) {
+        achievementInfoBox.style.display = 'block';
+    }
+
     fetch('/get-user-achievements', {
         headers: {
             'Authorization': getSessionToken()
@@ -169,12 +178,11 @@ function displaySignInMessage(container, feature) {
     container.innerHTML = `
         <div class="sign-in-message">
             <p>Please sign in to view your ${feature}.</p>
-            <button id="signInButton" class="glowing-button">Sign In</button>
         </div>
     `;
-    document.getElementById('signInButton').addEventListener('click', showLoginForm);
 }
 
+
 function displayNoAchievementsMessage(container) {
     container.innerHTML = `
         <div class="no-achievements-message">
@@ -2056,7 +2064,7 @@ function onCustomizationTabOpen() {
     }
 
     // Show loading indicator immediately
-    skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
+    // skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
 
     // Load skin options asynchronously
     setTimeout(() => {

static/js/skinselector.js

@@ -31,9 +31,9 @@ function loadSkinOptions() {
 
 function fetchAndCacheSkins() {
     const skinCustomization = document.getElementById('skinCustomization');
-    if (skinCustomization) {
-        skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
-    }
+    // if (skinCustomization) {
+    //     skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
+    // }
 
     const cachedEtag = localStorage.getItem('skinCacheEtag');
     const headers = {