From baf125c45011d0eba9b26ee76bc7bc2b3eb2e261 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 29 Dec 2024 12:44:42 -0500
Subject: [PATCH] ssb: Trying to get the sidebar to behave better.  Fighting
 CSS.

---
 apps/ssb.json           |   2 +-
 apps/ssb/tf-app.js      |   7 +--
 apps/ssb/tf-tab-news.js | 100 ++++++++++++++++++++--------------------
 3 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 49c32824..d5540853 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&BxKPtOan2rRMbmW8x32Dw7XZCbUloe7Nl5m/FJNqjUE=.sha256"
+	"previous": "&b7bvRAB4MWWsJvmyi3G+TG/eseQGUBsO4BZ1qiu8nQc=.sha256"
 }
diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js
index 619890e2..21087573 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -526,7 +526,7 @@ class TfElement extends LitElement {
 		let tabs = html`
 			<div
 				class="w3-bar w3-theme-l1"
-				style="position: sticky; top: 0; z-index: 10"
+				style="position: static; top: 0; z-index: 10"
 			>
 				<button
 					class="w3-bar-item w3-button w3-circle w3-ripple"
@@ -563,10 +563,11 @@ class TfElement extends LitElement {
 				: this.render_tab();
 		return html`
 			<div
-				style="width: 100vw; min-height: 100vh; height: 100%"
+				style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column"
 				class="w3-theme-dark"
 			>
-				${tabs} ${contents}
+				<div style="flex: 0 0">${tabs}</div>
+				<div style="flex: 1 1; overflow: scroll; contain: layout">${contents}</div>
 			</div>
 		`;
 	}
diff --git a/apps/ssb/tf-tab-news.js b/apps/ssb/tf-tab-news.js
index 39d12f44..99cb0e3d 100644
--- a/apps/ssb/tf-tab-news.js
+++ b/apps/ssb/tf-tab-news.js
@@ -177,7 +177,7 @@ class TfTabNewsElement extends LitElement {
 		return html`
 			<div
 				class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left"
-				style="width: 2in; left: 0; z-index: 5; box-sizing: border-box"
+				style="width: 2in; left: 0; z-index: 5; box-sizing: border-box; top: 0"
 				id="sidebar"
 			>
 				<div
@@ -245,59 +245,61 @@ class TfTabNewsElement extends LitElement {
 				id="sidebar_overlay"
 				@click=${this.hide_sidebar}
 			></div>
-			<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
-				<div
-					id="show_sidebar"
-					class="w3-left w3-button w3-hide-large"
-					@click=${this.show_sidebar}
-				>
-					&#9776;
-				</div>
-				<p>
-					<button class="w3-button w3-theme-d1" @click=${this.show_more}>
-						${this.new_messages_text()}
-					</button>
-					${this.hash.startsWith('##')
-						? html`
-								<button
-									class="w3-button w3-theme-d1"
-									@click=${this.channel_toggle_subscribed}
-								>
-									${this.channels.indexOf(this.hash.substring(2)) != -1
-										? 'Unsubscribe from #'
-										: 'Subscribe to #'}${this.hash.substring(2)}
-								</button>
-							`
-						: undefined}
-				</p>
-				<div class="w3-bar">
-					Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
-					${edit_profile}
-				</div>
-				<div>
-					<tf-compose
-						id="tf-compose"
+			<div style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: scroll" id="main" class="w3-main">
+				<div style="padding: 8px">
+					<div
+						id="show_sidebar"
+						class="w3-left w3-button w3-hide-large"
+						@click=${this.show_sidebar}
+					>
+						&#9776;
+					</div>
+					<p>
+						<button class="w3-button w3-theme-d1" @click=${this.show_more}>
+							${this.new_messages_text()}
+						</button>
+						${this.hash.startsWith('##')
+							? html`
+									<button
+										class="w3-button w3-theme-d1"
+										@click=${this.channel_toggle_subscribed}
+									>
+										${this.channels.indexOf(this.hash.substring(2)) != -1
+											? 'Unsubscribe from #'
+											: 'Subscribe to #'}${this.hash.substring(2)}
+									</button>
+								`
+							: undefined}
+					</p>
+					<div class="w3-bar">
+						Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
+						${edit_profile}
+					</div>
+					<div>
+						<tf-compose
+							id="tf-compose"
+							whoami=${this.whoami}
+							.users=${this.users}
+							.drafts=${this.drafts}
+							@tf-draft=${this.draft}
+							.channel=${this.channel()}
+						></tf-compose>
+					</div>
+					${profile}
+					<tf-tab-news-feed
+						id="news"
 						whoami=${this.whoami}
 						.users=${this.users}
+						.following=${this.following}
+						hash=${this.hash}
 						.drafts=${this.drafts}
+						.expanded=${this.expanded}
 						@tf-draft=${this.draft}
-						.channel=${this.channel()}
-					></tf-compose>
+						@tf-expand=${this.on_expand}
+						.channels_unread=${this.channels_unread}
+						.channels_latest=${this.channels_latest}
+					></tf-tab-news-feed>
 				</div>
-				${profile}
-				<tf-tab-news-feed
-					id="news"
-					whoami=${this.whoami}
-					.users=${this.users}
-					.following=${this.following}
-					hash=${this.hash}
-					.drafts=${this.drafts}
-					.expanded=${this.expanded}
-					@tf-draft=${this.draft}
-					@tf-expand=${this.on_expand}
-					.channels_unread=${this.channels_unread}
-					.channels_latest=${this.channels_latest}
-				></tf-tab-news-feed>
 			</div>
 		`;
 	}