[bugfix] fixes border around clans ui (#3873)

## Description:

fixes border around clans ui
<img width="67" height="705" alt="image"
src="https://github.com/user-attachments/assets/5ee35eb5-b406-4403-b9b4-324769faf061"
/>


also fixes weird padding:
<img width="134" height="244" alt="image"
src="https://github.com/user-attachments/assets/32a84074-afa6-4e9a-98f1-e45aabe4aa2a"
/>

what it should be:
<img width="140" height="206" alt="image"
src="https://github.com/user-attachments/assets/b72b480e-c972-4495-b9da-5c3b411bf590"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

src/client/ClanModal.ts

@@ -73,7 +73,7 @@ export class ClanModal extends BaseModal {
           onBack: () => this.close(),
           ariaLabel: translateText("common.back"),
         })
-      : null;
+      : this.renderSubViewHeader();
     return html`
       <o-modal
         id="clan-modal"
@@ -86,11 +86,72 @@ export class ClanModal extends BaseModal {
         .onTabChange=${(key: string) => this.handleTabChange(key as Tab)}
       >
         ${header ? html`<div slot="header">${header}</div>` : ""}
-        ${this.renderInner()}
+        <div class="p-4 lg:p-[1.4rem]">${this.renderInner()}</div>
       </o-modal>
     `;
   }
 
+  private tagPill(tag: string) {
+    return html`<span
+      class="text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full bg-white/10 text-white/50 border border-white/10"
+      >[${tag}]</span
+    >`;
+  }
+
+  private renderSubViewHeader() {
+    const clan = this.selectedClan;
+    const ariaLabel = translateText("common.back");
+    if (this.view === "my-requests") {
+      return modalHeader({
+        title: translateText("clan_modal.pending_applications"),
+        onBack: () => (this.view = "list"),
+        ariaLabel,
+      });
+    }
+    if (this.view === "manage") {
+      return modalHeader({
+        title: translateText("clan_modal.manage_clan"),
+        onBack: () => (this.view = "detail"),
+        ariaLabel,
+        rightContent: clan ? this.tagPill(clan.tag) : undefined,
+      });
+    }
+    if (this.view === "transfer") {
+      return modalHeader({
+        title: translateText("clan_modal.transfer_leadership"),
+        onBack: () => (this.view = "manage"),
+        ariaLabel,
+      });
+    }
+    if (this.view === "requests") {
+      return modalHeader({
+        title: translateText("clan_modal.join_requests"),
+        onBack: () => (this.view = "detail"),
+        ariaLabel,
+      });
+    }
+    if (this.view === "bans") {
+      return modalHeader({
+        title: translateText("clan_modal.banned_players"),
+        onBack: () => (this.view = "manage"),
+        ariaLabel,
+      });
+    }
+    // Default: detail
+    return modalHeader({
+      title: clan?.name ?? translateText("clan_modal.title"),
+      onBack: () => {
+        this.view = "list";
+        this.selectedClan = null;
+        this.selectedClanTag = "";
+        this.myRole = null;
+        this.detailCache = null;
+      },
+      ariaLabel,
+      rightContent: clan ? this.tagPill(clan.tag) : undefined,
+    });
+  }
+
   private handleTabChange(tab: Tab) {
     this.activeTab = tab;
     this.view = "list";
@@ -351,7 +412,7 @@ export class ClanModal extends BaseModal {
     }
 
     return html`
-      <div class="p-4 lg:p-6 space-y-3">
+      <div class="space-y-3">
         ${hasRequests ? this.renderPendingRequestsButton() : ""}
         ${this.myClans.map(
           (clan) => html`