fix(usage): make api details card scrollable

This commit is contained in:
Supra4E8C
2026-02-13 16:13:15 +08:00
parent 5dbff4c3e0
commit ab3922f9e6

View File

@@ -59,7 +59,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
sortKey === key ? (sortDir === 'asc' ? ' ▲' : ' ▼') : ''; sortKey === key ? (sortDir === 'asc' ? ' ▲' : ' ▼') : '';
return ( return (
<Card title={t('usage_stats.api_details')}> <Card title={t('usage_stats.api_details')} className={styles.detailsFixedCard}>
{loading ? ( {loading ? (
<div className={styles.hint}>{t('common.loading')}</div> <div className={styles.hint}>{t('common.loading')}</div>
) : sorted.length > 0 ? ( ) : sorted.length > 0 ? (
@@ -82,6 +82,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
</button> </button>
))} ))}
</div> </div>
<div className={styles.detailsScroll}>
<div className={styles.apiList}> <div className={styles.apiList}>
{sorted.map((api, index) => { {sorted.map((api, index) => {
const isExpanded = expandedApis.has(api.endpoint); const isExpanded = expandedApis.has(api.endpoint);
@@ -147,6 +148,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
); );
})} })}
</div> </div>
</div>
</> </>
) : ( ) : (
<div className={styles.hint}>{t('usage_stats.no_data')}</div> <div className={styles.hint}>{t('usage_stats.no_data')}</div>