From ab03692a4c8ef7151c53a13f9512f75c711980e2 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 21 Oct 2023 21:31:46 +0000
Subject: [PATCH] Lay out the profile editing form better so it feels less
 janky.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4566 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-profile.js | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 618bab32..34cfe2eb 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
   "type": "tildefriends-app",
   "emoji": "🐌",
-  "previous": "&zyNDG83KbSp1GmOhuS5CtxRLT8Lt7N7Agk8gpLSZhco=.sha256"
+  "previous": "&HrGonbL2IZBtoP3zh1glMUO16+PZ4/t0KFTpkNMYoPI=.sha256"
 }
\ No newline at end of file
diff --git a/apps/ssb/tf-profile.js b/apps/ssb/tf-profile.js
index ea39fae9..5085686a 100644
--- a/apps/ssb/tf-profile.js
+++ b/apps/ssb/tf-profile.js
@@ -180,27 +180,27 @@ class TfProfileElement extends LitElement {
 				html`<input type="button" value="Block" @click=${this.block}></input>`;
 		}
 		let edit_profile = this.editing ? html`
-			<div style="flex: 1 0 50%">
+			<div style="flex: 1 0 50%; display: flex; flex-direction: column">
 				<div>
 					<label for="name">Name:</label>
 					<input type="text" id="name" value=${this.editing.name} @input=${event => this.editing = Object.assign({}, this.editing, {name: event.srcElement.value})}></input>
 				</div>
-				<div>
-					<div><label for="description">Description:</label></div>
-					<textarea id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
-				</div>
+				<div><label for="description">Description:</label></div>
+				<textarea style="flex: 1 0" 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 type="checkbox" id="public_web_hosting" value=${this.editing.public_web_hosting} @input=${event => this.editing = Object.assign({}, this.editing, {publicWebHosting: event.srcElement.checked})}></input>
 				</div>
-				<input type="button" value="Attach Image" @click=${this.attach_image}></input>
+				<div>
+					<input type="button" value="Attach Image" @click=${this.attach_image}></input>
+				</div>
 			</div>` : null;
 		let image = 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">
 			<tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
-			<div style="display: flex; flex-direction: row">
+			<div style="display: flex; flex-direction: row; gap: 1em">
 				${edit_profile}
 				<div style="flex: 1 0 50%">
 					<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>