Improve collapsible group headers for better readability and formatting consistency

This commit is contained in:
2026-01-28 18:48:04 +00:00
parent 0de8c0ee71
commit 22117fa23d

View File

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