From 28d08e013fc401c6a2ff43a21a150f6564ad9235 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 13 Apr 2024 19:29:31 -0400
Subject: [PATCH] Trying to make the ssb connections tab not overflow all the
 layouts.  Dunno.

---
 apps/ssb.json                  |  2 +-
 apps/ssb/tf-tab-connections.js | 44 +++++++++++++++++++---------------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 39573215..2a2cd7ca 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&hKBq89Q1oOiSK8ZtiA67MciAaMNCRK5CuYtOeoX94qU=.sha256"
+	"previous": "&kHFHpwFhnRVEbFQxuKlOUXPs/eJ2cOvWgS8poXm8WNM=.sha256"
 }
diff --git a/apps/ssb/tf-tab-connections.js b/apps/ssb/tf-tab-connections.js
index 45721c07..f55c7260 100644
--- a/apps/ssb/tf-tab-connections.js
+++ b/apps/ssb/tf-tab-connections.js
@@ -33,9 +33,9 @@ class TfTabConnectionsElement extends LitElement {
 
 	render_connection_summary(connection) {
 		if (connection.address && connection.port) {
-			return html`(<small>${connection.address}:${connection.port}</small>)`;
+			return html`<div><small>${connection.address}:${connection.port}</small></div>`;
 		} else if (connection.tunnel) {
-			return html`(room peer)`;
+			return html`<div>room peer</div>`;
 		} else {
 			return JSON.stringify(connection);
 		}
@@ -73,15 +73,17 @@ class TfTabConnectionsElement extends LitElement {
 
 	render_broadcast(connection) {
 		return html`
-			<li>
+			<li class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap">
 				<button
-					class="w3-button w3-theme-d1"
+					class="w3-bar-item w3-button w3-theme-d1"
 					@click=${() => tfrpc.rpc.connect(connection)}
 				>
 					Connect
 				</button>
-				<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
-				${this.render_connection_summary(connection)}
+				<div class="w3-bar-item">
+					<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
+					${this.render_connection_summary(connection)}
+				</div>
 			</li>
 		`;
 	}
@@ -115,7 +117,7 @@ class TfTabConnectionsElement extends LitElement {
 	render() {
 		let self = this;
 		return html`
-			<div class="w3-container">
+			<div class="w3-container" style="box-sizing: border-box">
 				<h2>New Connection</h2>
 				<textarea class="w3-input w3-theme-d1" id="code"></textarea>
 				<button
@@ -126,45 +128,49 @@ class TfTabConnectionsElement extends LitElement {
 					Connect
 				</button>
 				<h2>Broadcasts</h2>
-				<ul>
+				<ul class="w3-ul w3-border">
 					${this.broadcasts
 						.filter((x) => x.address)
 						.map((x) => self.render_broadcast(x))}
 				</ul>
 				<h2>Connections</h2>
-				<ul>
+				<ul class="w3-ul w3-border">
 					${this.connections
 						.filter((x) => x.tunnel === undefined)
-						.map((x) => html` <li>${this.render_connection(x)}</li> `)}
+						.map((x) => html` <li class="w3-bar">${this.render_connection(x)}</li> `)}
 				</ul>
-				<h2>Stored Connections (WIP)</h2>
-				<ul>
+				<h2>Stored Connections</h2>
+				<ul class="w3-ul w3-border">
 					${this.stored_connections.map(
 						(x) => html`
-							<li>
+							<li class="w3-bar">
 								<button
-									class="w3-button w3-theme-d1"
+									class="w3-bar-item w3-button w3-theme-d1"
 									@click=${() => self.forget_stored_connection(x)}
 								>
 									Forget
 								</button>
 								<button
-									class="w3-button w3-theme-d1"
+									class="w3-bar-item w3-button w3-theme-d1"
 									@click=${() => tfrpc.rpc.connect(x)}
 								>
 									Connect
 								</button>
-								${x.address}:${x.port}
-								<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
+								<div class="w3-bar-item">
+									<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
+									<div><small>${x.address}:${x.port}</small></div>
+								</div>
 							</li>
 						`
 					)}
 				</ul>
 				<h2>Local Accounts</h2>
-				<ul>
+				<ul class="w3-ul w3-border">
 					${this.identities.map(
 						(x) =>
-							html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`
+							html`<li class="w3-bar">
+								<tf-user id=${x} .users=${this.users}></tf-user>
+							</li>`
 					)}
 				</ul>
 			</div>