From c469ef23e694e2295ef0476d722879e38a771682 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 5 Jan 2025 15:49:57 -0500
Subject: [PATCH] ssb: Make the profile layout a little friendlier.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-profile.js | 28 +++++++++++++---------------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index ff051ddc..749b5040 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&onr50/qdchNff8LbpgKSmYBhAXuiuCS5yUXE/8uSEaY=.sha256"
+	"previous": "&Fukja09hc/jieMnfbFnQft1drL5lIR/du8wUQTKDYXc=.sha256"
 }
diff --git a/apps/ssb/tf-profile.js b/apps/ssb/tf-profile.js
index 4f15e449..b0b806d6 100644
--- a/apps/ssb/tf-profile.js
+++ b/apps/ssb/tf-profile.js
@@ -217,20 +217,18 @@ class TfProfileElement extends LitElement {
 		let edit_profile = this.editing
 			? html`
 			<div style="flex: 1 0 50%; display: flex; flex-direction: column; gap: 8px">
-				<div class="w3-container">
-					<div>
-						<label for="name">Name:</label>
-						<input class="w3-input w3-theme-d1" type="text" id="name" value=${this.editing.name} @input=${(event) => (this.editing = Object.assign({}, this.editing, {name: event.srcElement.value}))}></input>
-					</div>
-					<div><label for="description">Description:</label></div>
-					<textarea class="w3-input w3-theme-d1" style="resize: vertical" rows="8" id="description" @input=${(event) => (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))}>${this.editing.description}</textarea>
-					<div>
-						<label for="public_web_hosting">Public Web Hosting:</label>
-						<input class="w3-check w3-theme-d1" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${(event) => (self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked}))}></input>
-					</div>
-					<div>
-						<button class="w3-button w3-theme-d1" @click=${this.attach_image}>Attach Image</button>
-					</div>
+				<div>
+					<label for="name">Name:</label>
+					<input class="w3-input w3-theme-d1" type="text" id="name" value=${this.editing.name} @input=${(event) => (this.editing = Object.assign({}, this.editing, {name: event.srcElement.value}))} placeholder="Choose a name"></input>
+				</div>
+				<div><label for="description">Description:</label></div>
+				<textarea class="w3-input w3-theme-d1" style="resize: vertical" rows="8" id="description" @input=${(event) => (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))} placeholder="Tell people a little bit about yourself here, if you like.">${this.editing.description}</textarea>
+				<div>
+					<label for="public_web_hosting">Public Web Hosting:</label>
+					<input class="w3-check w3-theme-d1" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${(event) => (self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked}))}></input>
+				</div>
+				<div>
+					<button class="w3-button w3-theme-d1" @click=${this.attach_image}>Attach Image</button>
 				</div>
 			</div>`
 			: null;
@@ -243,7 +241,7 @@ class TfProfileElement extends LitElement {
 				<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})</p>
 			</header>
 			<div class="w3-container">
-				<div style="display: flex; flex-direction: row">
+				<div class="w3-margin-bottom" style="display: flex; flex-direction: row">
 					<input type="text" class="w3-input w3-border w3-theme-d1" style="display: flex 1 1" readonly value=${this.id}></input>
 					<button class="w3-button w3-theme-d1 w3-ripple" style="flex: 0 0 auto" @click=${this.copy_id}>Copy</button>
 				</div>