From 773396ac85ba3b47fbce7ede7c1bef57fd790ed8 Mon Sep 17 00:00:00 2001
From: Tasia Iso <tasiaiso@proton.me>
Date: Sun, 12 May 2024 08:59:27 +0200
Subject: [PATCH] feat(ssb): show the name of the tab if the screen is large
 enough

---
 apps/ssb/tf-app.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js
index 6a121f45..b7ce9916 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -340,6 +340,13 @@ class TfElement extends LitElement {
 		};
 
 		let tabs = html`
+			<style>
+				@media only screen and (max-width: 650px) {
+					.hide-on-small-screens {
+						display: none;
+					}
+				}
+			</style>
 			<div class="w3-bar w3-theme-l1">
 				${Object.entries(k_tabs).map(
 					([k, v]) => html`
@@ -352,6 +359,7 @@ class TfElement extends LitElement {
 							@click=${() => self.set_tab(v)}
 						>
 							${k}
+							<span class="hide-on-small-screens">${v}</span>
 						</button>
 					`
 				)}