Improve the layout a bit (especially on mobile)

src/App.vue

@@ -48,5 +48,7 @@ body, html {
   max-width: 1000pt;
   margin: auto;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 </style>

src/components/ActionButton.vue

@@ -32,8 +32,8 @@ export default class ActionButton extends Vue {
 <style scoped>
 
 .action-button {
-  width: 100px;
-  height: 100px;
+  width: 48pt;
+  height: 48pt;
 }
 
 </style>

src/components/Combat.vue

@@ -83,10 +83,11 @@ export default class Combat extends Vue {
 <style scoped>
 .combat-layout {
   display: grid;
-  grid-template-rows: 20% [main-row-start] 30% 30% [main-row-end] 20%;
-  grid-template-columns: 20% [main-col-start] 60% [main-col-end] 20%;
+  grid-template-rows: 20% [main-row-start] 1fr 1fr [main-row-end] 20%;
+  grid-template-columns: minmax(80pt, 20%) [main-col-start] 1fr [main-col-end] minmax(80pt, 20%);
   width: 100%;
   height: 100%;
+  flex: 10;
 }
 
 .player-stats {
@@ -136,6 +137,7 @@ a {
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex-wrap: wrap;
 }
 </style>
 

src/components/Header.vue

@@ -20,6 +20,8 @@ export default class Header extends Vue {
 
 <style scoped>
 #header {
+  flex: 1 1;
+  max-height: 60pt;
   width: 100%;
   background: #222;
   top: 0%;

src/components/Statblock.vue

@@ -58,7 +58,7 @@ a {
   margin: 16px;
 }
 .stat-line {
-  font-size: 24pt;
+  font-size: 2vh;
   padding-top: 4pt;
   padding-bottom: 4pt;
 }