From 0b4ac2b3551734392e62942850ea38891f6c35ff Mon Sep 17 00:00:00 2001
From: Tasia Iso <tasiaiso@proton.me>
Date: Sun, 12 May 2024 08:56:14 +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 7c10b8d8..52c23119 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -339,6 +339,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`
@@ -351,6 +358,7 @@ class TfElement extends LitElement {
 							@click=${() => self.set_tab(v)}
 						>
 							${k}
+							<span class="hide-on-small-screens">${v}</span>
 						</button>
 					`
 				)}