Show tab names on large enough screens. Inspired by tasio's #61.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&raSj7ozmSDNGmB6TtjDk7oOiTc33ZN+RrBMASJ2F4cA=.sha256"
+	"previous": "&cN1BLgsD5fU8QzkNbtKR/Ie1fO3miBq8FVSpgNqFbrc=.sha256"
 }

apps/ssb/tf-app.js

@@ -345,13 +345,14 @@ class TfElement extends LitElement {
 					([k, v]) => html`
 						<button
 							title=${v}
-							class="w3-bar-item w3-padding-large w3-hover-theme tab ${self.tab ==
+							class="w3-bar-item w3-padding w3-hover-theme tab ${self.tab ==
 							v
 								? 'w3-theme-l2'
 								: 'w3-theme-l1'}"
 							@click=${() => self.set_tab(v)}
 						>
 							${k}
+							<span class=${self.tab == v ? '' : 'w3-hide-small'}>${v.charAt(0).toUpperCase() + v.substring(1)}</span>
 						</button>
 					`
 				)}