using grid for layout

public/app.css

@@ -5,10 +5,6 @@ td,th {
 th {
 	background:lightgrey;
 }
-h2 {
-	display:inline;
-}
-
 tbody tr:nth-child(even) td{
 	background:#eeeeee;
 }

src/App.vue

@@ -7,9 +7,6 @@
 </script>
 
 <template>
-	<header>
-		<h1>Practice Tracker</h1>
-	</header>
 	<main>
 		<section>
 			<MinsLeftToPracticeToday/>
@@ -17,6 +14,8 @@
 		</section>
 		<section>
 			<Summary/>
+		</section>
+		<section>
 			<ShowCategory/>
 			<Songs/>
 		</section>
@@ -24,11 +23,12 @@
 </template>
 
 <style scoped>
-	section {
+main {
-		float:left;
+	display:grid;
-		width:25%;
+	grid-template-columns: repeat(3, minmax(10px, 1fr));
-	}
+	grid-template-rows: minmax(10px, 100vh);
-	section:nth-child(2) {
+}
-		width:75%;
+section {
-	}
+	overflow:scroll;
+}
 </style>

src/components/show_category.vue

@@ -23,8 +23,7 @@
 </script>
 
 <template>
-	<details>
+	<h2>Show Category</h2>
-		<summary><h2>Show Category</h2></summary>
 	<select @change="change">
 		<option v-for="category in categories" v-bind:value="category.id">
 			{{category.id}}.
@@ -59,7 +58,6 @@
 			</tr>
 		</tbody>
 	</table>
-	</details>
 </template>
 
 <style scoped>

src/components/songs.vue

@@ -16,8 +16,7 @@
 </script>
 
 <template>
-	<details>
+	<h2>Songs</h2>
-		<summary><h2>Songs</h2></summary>
 	<table>
 		<thead>
 			<tr>
@@ -34,7 +33,6 @@
 			</tr>
 		</tbody>
 	</table>
-	</details>
 </template>
 
 <style scoped>

src/components/summary.vue

@@ -23,8 +23,7 @@
 </script>
 
 <template>
-	<details>
+	<h2 @click="refresh">Summary</h2>
-		<summary><h2 @click="refresh">Summary</h2></summary>
 	<table>
 		<thead>
 			<tr>
@@ -45,7 +44,6 @@
 			</tr>
 		</tbody>
 	</table>
-	</details>
 </template>
 
 <style scoped>

src/components/timer.vue

@@ -92,8 +92,7 @@
 </script>
 
 <template>
-	<details :class="{running:running}">
+	<h2>Timer</h2>
-		<summary><h2>Timer</h2></summary>
 	<em>
 		{{formatTime(totalSeconds)}}
 	</em>
@@ -122,7 +121,6 @@
 
 		<input type="Submit"/>
 	</form>
-	</details>
 </template>
 
 <style scoped>