refactor: switch how tabs work in an effort to make downstream stuff

easier

public/tabs/tabs.html

@@ -1,6 +1,6 @@
 <script>
 	APP.on( "view_changed", ({ view }) => {
-		const target_tab = document.querySelector(`.tab-switch[data-view="${view}"]`);
+		const target_tab = document.querySelector(`.tabswitch[data-view="${view}"]`);
 
 		if (target_tab) {
 			target_tab.click();
@@ -8,7 +8,7 @@
 	});
 
 	APP.on( 'load', () => {
-		const tab_switchers = document.querySelectorAll(".tab-switch");
+		const tab_switchers = document.querySelectorAll(".tabswitch");
 		for (const tab_switch of tab_switchers) {
 			tab_switch.addEventListener("input", (event) => {
 				const tab_selector = event.target;
@@ -22,98 +22,46 @@
 	});
 </script>
 <style>
-	.tabs-container {
-		position: relative;
-		height: 100%;
-	}
+:root {
+	--tab-label-height: 4em;
+}
 
-	.tabs {
-		position: relative;
-		height: 100%;
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: flex-start;
-		min-height: inherit;
-		background: inherit;
-	}
+.tabs {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+}
 
-	.tabs::before,
-	.tabs::after {
-		content: "";
-		display: table;
-	}
+.tabs .tabswitch {
+	position: absolute;
+	opacity: 0;
+}
 
-	.tabs::after {
-		clear: both;
-	}
+.tabs .tablabel {
+	cursor: pointer;
+	border: none;
+	text-align: center;
+	padding: 1em;
+	height: var(--tab-label-height);
+	line-height: 2em;
+}
 
-	.tab {
-		background: inherit;
-	}
+.tabs .tabswitch:checked + .tablabel {
+	border-bottom: 1px solid var(--accent);
+}
 
-	.tab-switch {
-		display: none;
-	}
+.tabs .panel {
+	display: none;
+	position: relative;
+	padding: 1em;
+	width: 100%;
+	height: calc( 100vh - var(--tab-label-height) );
+	order: 99;
+}
 
-	.tab-label {
-		position: relative;
-		width: 6rem;
-		height: 5rem;
-		cursor: pointer;
-		transition: all 0.25s;
-
-		display: flex;
-		align-items: center;
-		justify-content: end;
-		flex-direction: column;
-	}
-
-	.tab-label .label {
-		margin: 0.75rem 0;
-	}
-
-	.tab-content {
-		position: absolute;
-		z-index: 1;
-		top: 5rem;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		opacity: 0;
-		transition: all 0.35s;
-		border-top: 1px solid var(--border-subtle);
-		margin-top: 1px;
-		overflow-y: scroll;
-		visibility: hidden;
-		display: none;
-		background: inherit;
-	}
-
-	.tab-switch,
-	.tab-switch + .tab-label {
-		transition: none;
-	}
-
-	.tab-switch:checked + .tab-label {
-		margin-top: 1px;
-		border-bottom: 1px solid var(--accent);
-		z-index: 1;
-	}
-
-	.tab-switch:checked + label + .tab-content {
-		z-index: 2;
-		opacity: 1;
-		visibility: visible;
-		display: block;
-	}
-
-	@media screen and (max-width: 800px) {
-		.tab-label {
-			width: 4rem;
-		}
-	}
+.tabs .tabswitch:checked + .tablabel + .panel {
+	display: block;
+}
 </style>
 
 <div class="tabs">