✨ Improve collapsible group headers for better readability and formatting consistency

code/websites/pokedex.online/src/views/ChallongeTest.vue

@@ -14,9 +14,14 @@
         <div class="controls-grid">
           <!-- API Key Configuration -->
           <div class="control-group collapsible-group">
-            <div class="collapsible-header" @click="apiKeyCollapsed = !apiKeyCollapsed">
+            <div
+              class="collapsible-header"
+              @click="apiKeyCollapsed = !apiKeyCollapsed"
+            >
               <label class="control-label">API Key Configuration</label>
-              <span class="collapse-icon">{{ apiKeyCollapsed ? '▶' : '▼' }}</span>
+              <span class="collapse-icon">{{
+                apiKeyCollapsed ? '▶' : '▼'
+              }}</span>
             </div>
             <div v-show="!apiKeyCollapsed" class="collapsible-content">
               <div class="status success">
@@ -86,10 +91,18 @@
           </div>
 
           <!-- OAuth Authentication (v2.1 only) -->
-          <div v-if="apiVersion === 'v2.1'" class="control-group oauth-section collapsible-group">
-            <div class="collapsible-header" @click="oauthCollapsed = !oauthCollapsed">
+          <div
+            v-if="apiVersion === 'v2.1'"
+            class="control-group oauth-section collapsible-group"
+          >
+            <div
+              class="collapsible-header"
+              @click="oauthCollapsed = !oauthCollapsed"
+            >
               <label class="control-label">OAuth Authentication</label>
-              <span class="collapse-icon">{{ oauthCollapsed ? '▶' : '▼' }}</span>
+              <span class="collapse-icon">{{
+                oauthCollapsed ? '▶' : '▼'
+              }}</span>
             </div>
             <div v-show="!oauthCollapsed" class="collapsible-content">
               <div v-if="isAuthenticated" class="oauth-status">
@@ -121,10 +134,18 @@
           </div>
 
           <!-- Client Credentials (v2.1 only) -->
-          <div v-if="apiVersion === 'v2.1'" class="control-group collapsible-group">
-            <div class="collapsible-header" @click="clientCredsCollapsed = !clientCredsCollapsed">
+          <div
+            v-if="apiVersion === 'v2.1'"
+            class="control-group collapsible-group"
+          >
+            <div
+              class="collapsible-header"
+              @click="clientCredsCollapsed = !clientCredsCollapsed"
+            >
               <label class="control-label">Client Credentials</label>
-              <span class="collapse-icon">{{ clientCredsCollapsed ? '▶' : '▼' }}</span>
+              <span class="collapse-icon">{{
+                clientCredsCollapsed ? '▶' : '▼'
+              }}</span>
             </div>
             <div v-show="!clientCredsCollapsed" class="collapsible-content">
               <div class="info-badge" v-if="isClientCredsAuthenticated">
@@ -133,7 +154,8 @@
               <div
                 class="info-badge warning"
                 v-if="
-                  isClientCredsAuthenticated && tournamentScope === ScopeType.USER
+                  isClientCredsAuthenticated &&
+                  tournamentScope === ScopeType.USER
                 "
               >
                 ⚠️ Client credentials may not work with USER scope - switch to