ui: Click off the identity menu to close it.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&IH3DadMNF785idnMI/LuCpIJQxzvpg1PDp8BI7m1Nx0=.sha256"
+	"previous": "&jEWLK3TSDaS67X4zN//XhAjtODbVyWwqu+rxiNuzJRM=.sha256"
 }

apps/ssb/tf-profile.js

@@ -289,16 +289,10 @@ class TfProfileElement extends LitElement {
 			typeof profile.image == 'string' ? profile.image : profile.image?.link;
 		image = this.editing?.image ?? image;
 		let description = this.editing?.description ?? profile.description;
-		return html`<div style="border: 2px solid black; background-color: rgba(255, 255, 255, 0.2); padding: 16px">
+		return html`<div class="w3-container" style="box-sizing: border-box; border: 2px solid black; background-color: rgba(255, 255, 255, 0.2)">
-			<tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
+			<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
-			<div class="w3-row">
+			<input type="text" class="w3-input w3-border w3-theme-d1" readonly value=${this.id}></input>
-				<div class="w3-col s1 w3-container w3-right">
+			<button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button>
-					<button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button>
-				</div>
-				<div class="w3-rest w3-container">
-					<input type="text" class="w3-theme-d1" style="width: 100%; vertical-align: middle" readonly value=${this.id}></input>
-				</div>
-			</div>
 			<div style="display: flex; flex-direction: row; gap: 1em">
 				${edit_profile}
 				<div style="flex: 1 0 50%">
@@ -312,11 +306,11 @@ class TfProfileElement extends LitElement {
 				Blocking ${profile.blocking} identities.
 				Blocked by ${profile.blocked} identities.
 			</div>
-			<div>
+			<p>
 				${edit}
 				${follow}
 				${block}
-			</div>
+			</p>
 		</div>`;
 	}
 }

core/client.js

@@ -162,6 +162,7 @@ class TfNavigationElement extends LitElement {
 							class="w3-dropdown-content w3-bar-block w3-card-4"
 							style="max-width: 100%; right: 0"
 						>
+							<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.25); z-index: -100" @click=${self.toggle_id_dropdown}></div>
 							<button
 								class="w3-bar-item w3-button w3-border"
 								@click=${() => (window.location.href = '/~core/identity')}