Match the identity page's tab switcher to the calendar's bigger pill style

Moved into the filter strip, right-aligned like every other page's own
Calendar/List or Week/Month/Season toggle, and switched from the
bespoke .preview-tab/.preview-tab-active classes (now unused, removed)
to the same raw bg-steel pill markup event_list.html already uses.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9

assets/management.css

@@ -1811,28 +1811,6 @@
         background: var(--color-paper);
     }
 
-    /* A real (if minimal) tab control: click toggles which panel is shown --
-       club_settings.html's own inline script uses this for its top-level
-       Identity/Email/PDF tabs. The Identity tab's own phone/website mock has
-       no tab of its own; the two are simply shown together (the mobile app
-       isn't built yet, and D9's separate App/Website tabs would only ever
-       have shown the same two mocks anyway). */
-    .preview-tab {
-        padding: 0.3125rem 0.625rem;
-        font-family: var(--font-display);
-        font-size: 0.75rem;
-        font-weight: 700;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-        color: var(--color-muted);
-        cursor: pointer;
-    }
-
-    .preview-tab-active {
-        background: var(--color-ink);
-        color: #fff;
-    }
-
     .preview-crest {
         display: flex;
         width: 1.5rem;

management/templates/management/club_settings.html

@@ -32,13 +32,20 @@
     <button class="btn btn-primary gap-2" type="submit" form="club-settings-form" data-identity-only>{% lucide "save" size=16 %} {% trans "Save changes" %}</button>
 {% endblock actions %}
 
-{% block panel %}
+{% block filter_strip %}
-    <div class="mb-1 flex w-fit overflow-hidden rounded-md border border-line">
+    <div class="flex flex-wrap items-center gap-3 border-b border-line bg-white px-7 py-3">
-        <button type="button" class="preview-tab preview-tab-active" data-page-tab="identity">{% trans "Identity" %}</button>
+        <div class="flex-1"></div>
-        <button type="button" class="preview-tab" data-page-tab="email">{% trans "Email" %}</button>
-        <button type="button" class="preview-tab" data-page-tab="pdf">{% trans "PDF" %}</button>
-    </div>
 
+        {# Calendar/List segmented toggle -- event_list.html's own pattern (in turn member_list.html's Members/Guardians/Both). #}
+        <div class="flex items-center gap-1 rounded-full bg-steel p-1">
+            <button type="button" data-page-tab="identity" class="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase bg-white text-ink">{% lucide "building-2" size=13 %} {% trans "Identity" %}</button>
+            <button type="button" data-page-tab="email" class="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase text-on-dark hover:text-white">{% lucide "mail" size=13 %} {% trans "Email" %}</button>
+            <button type="button" data-page-tab="pdf" class="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase text-on-dark hover:text-white">{% lucide "file-text" size=13 %} {% trans "PDF" %}</button>
+        </div>
+    </div>
+{% endblock filter_strip %}
+
+{% block panel %}
     <div data-page-panel="identity">
         <div class="grid grid-cols-1 gap-5 xl:grid-cols-[1.2fr_1fr]">
             <form id="club-settings-form" method="post" enctype="multipart/form-data" class="flex flex-col gap-5">
@@ -295,7 +302,12 @@
             // hides on the other two rather than sitting there doing nothing.
             document.querySelectorAll("[data-page-tab]").forEach((tab) => {
                 tab.addEventListener("click", () => {
-                    document.querySelectorAll("[data-page-tab]").forEach((other) => other.classList.toggle("preview-tab-active", other === tab));
+                    document.querySelectorAll("[data-page-tab]").forEach((other) => {
+                        const active = other === tab;
+                        other.classList.toggle("bg-white", active);
+                        other.classList.toggle("text-ink", active);
+                        other.classList.toggle("text-on-dark", !active);
+                    });
                     document.querySelectorAll("[data-page-panel]").forEach((panel) => {
                         const active = panel.dataset.pagePanel === tab.dataset.pageTab;
                         panel.classList.toggle("hidden", !active);

management/tests.py

@@ -4729,7 +4729,7 @@ class ClubSettingsPreviewTests(ManagementTestBase):
     def test_the_page_tabs_and_colour_swatches_render(self):
         response = self.club_get("club_settings")
 
-        self.assertContains(response, "preview-tab-active")
+        self.assertContains(response, "rounded-full bg-steel p-1")
         self.assertContains(response, 'id="primary_color_swatch"')
         self.assertContains(response, 'id="secondary_color_swatch"')