ssb: Tweaking profile card CSS.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&zUbiDsKYgSEnn5g5oDSQ1M5YwGqwHL+3cMO6a6zdCD8=.sha256"
+	"previous": "&vLj0HMWc/ArlfAO112c0+JfXdszqkZxFIazUO6BaQEQ=.sha256"
 }

apps/ssb/tf-profile.js

@@ -297,8 +297,11 @@ 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 class="w3-container" style="box-sizing: border-box; border: 2px solid black; background-color: rgba(255, 255, 255, 0.2)">
-			<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
+		return html`<div class="w3-card-4 w3-container w3-theme-d3" style="box-sizing: border-box">
+			<header class="w3-container">
+				<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})</p>
+			</header>
+			<div class="w3-container">
 				<input type="text" class="w3-input w3-border w3-theme-d1" readonly value=${this.id}></input>
 				<button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button>
 				<div style="display: flex; flex-direction: row; gap: 1em">
@@ -314,11 +317,14 @@ class TfProfileElement extends LitElement {
 					Blocking ${profile.blocking} identities.
 					Blocked by ${profile.blocked} identities.
 				</div>
+			</div>
+			<footer class="w3-container">
 				<p>
 					${edit}
 					${follow}
 					${block}
 				</p>
+			</footer>
 		</div>`;
 	}
 }