fix: keep glossary buttons out of heading names

components/settings/__tests__/settings-section.test.tsx

@@ -36,7 +36,8 @@ describe('SettingItem controls', () => {
         <p>rows</p>
       </SettingsSection>
     );
-    expect(screen.getByRole('heading', { name: /Delegates/ }).querySelector('[data-glossary-term="delegation"]')).not.toBeNull();
+    const heading = screen.getByRole('heading', { name: 'Delegates' });
+    expect(heading.parentElement?.querySelector('[data-glossary-term="delegation"]')).not.toBeNull();
   });
 
   it('lets an explicit ariaLabel win over the row label', () => {

components/settings/calendar-management-settings.tsx

@@ -864,11 +864,13 @@ export function CalendarManagementSettings() {
       {/* iCal Subscriptions */}
       {icalSubscriptions.length > 0 && (
         <div className="mt-6 space-y-2">
-          <h4 className="text-sm font-medium text-foreground flex items-center gap-2">
-            <Globe className="w-4 h-4 text-muted-foreground" />
-            {tSub('section_title')}
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium text-foreground flex items-center gap-2">
+              <Globe className="w-4 h-4 text-muted-foreground" />
+              {tSub('section_title')}
+            </h4>
             <TermInfo id="icalendar" />
-          </h4>
+          </div>
           {icalSubscriptions.map((sub) => {
             return (
               <div

components/settings/settings-section.tsx

@@ -200,11 +200,14 @@ export function SettingsSection({ title, description, children, advanced, id, te
   return (
     <div data-search-label={title} data-settings-section={id} className="space-y-4 scroll-mt-4">
       <div>
-        <h3 className="text-lg font-medium text-foreground flex items-center gap-2">
-          {title}
+        <div className="flex items-center gap-2">
+          <h3 className="text-lg font-medium text-foreground flex items-center gap-2">
+            {title}
+            {advanced && <AdvancedBadge />}
+          </h3>
+          {/* Beside the heading, so its name in the headings list stays the title. */}
           {term && <TermInfo id={term} />}
-          {advanced && <AdvancedBadge />}
-        </h3>
+        </div>
         {description && (
           <p className="text-sm text-muted-foreground mt-1">{description}</p>
         )}