settings/tokens: Fix scope list formatting

app/components/tooltip.gjs

@@ -64,10 +64,12 @@ export default class Tooltip extends Component {
     return () => cleanup();
   });
 
+  // The `{{~@x~}}` is used for whitespace control to ensure we don't insert a leading whitespace element
   <template>
+    {{~@x~}}
     <span class='anchor' {{this.onInsertAnchor this}} />
 
-    {{#if this.visible}}
+    {{~#if this.visible}}
       {{#in-element this.containerElement}}
         <div class='tooltip' ...attributes {{this.attachTooltip this side=@side}}>
           {{#if (has-block)}}
@@ -77,6 +79,6 @@ export default class Tooltip extends Component {
           {{/if}}
         </div>
       {{/in-element}}
-    {{/if}}
+    {{/if~}}
   </template>
 }

e2e/routes/settings/tokens/index.spec.ts

@@ -28,4 +28,29 @@ test.describe('/settings/tokens', { tag: '@routes' }, () => {
     await expect(tokens[1].locator('[data-test-name]')).toHaveText('token-1');
     await expect(tokens[1].locator('[data-test-token]')).toHaveCount(0);
   });
+
+  test('scope formatting', async ({ page, msw }) => {
+    let user = msw.db.user.create({
+      login: 'johnnydee',
+      name: 'John Doe',
+      email: '[email protected]',
+      avatar: 'https://avatars2.githubusercontent.com/u/1234567?v=4',
+    });
+
+    await msw.authenticateAs(user);
+
+    msw.db.apiToken.create({
+      user,
+      endpointScopes: ['publish-new', 'publish-update', 'yank'],
+      crateScopes: ['serde', 'serde-*', 'serde_*'],
+    });
+
+    await page.goto('/settings/tokens');
+    await expect(page).toHaveURL('/settings/tokens');
+    await expect(page.locator('[data-test-api-token]')).toHaveCount(1);
+    await expect(page.locator('[data-test-endpoint-scopes]')).toHaveText(
+      'Scopes: publish-new, publish-update, and yank',
+    );
+    await expect(page.locator('[data-test-crate-scopes]')).toHaveText('Crates: serde, serde-*, and serde_*');
+  });
 });

tests/routes/settings/tokens/index-test.js

@@ -41,4 +41,20 @@ module('/settings/tokens', function (hooks) {
     assert.dom('[data-test-name]', tokens[1]).hasText('token-1');
     assert.dom('[data-test-token]', tokens[1]).doesNotExist();
   });
+
+  test('scope formatting', async function (assert) {
+    let { user } = prepare(this);
+
+    this.db.apiToken.create({
+      user,
+      endpointScopes: ['publish-new', 'publish-update', 'yank'],
+      crateScopes: ['serde', 'serde-*', 'serde_*'],
+    });
+
+    await visit('/settings/tokens');
+    assert.strictEqual(currentURL(), '/settings/tokens');
+    assert.dom('[data-test-api-token]').exists({ count: 1 });
+    assert.dom('[data-test-endpoint-scopes]').hasText('Scopes: publish-new, publish-update, and yank');
+    assert.dom('[data-test-crate-scopes]').hasText('Crates: serde, serde-*, and serde_*');
+  });
 });