Narrow the explore and combat views

src/components/ActionButton.vue

@@ -52,6 +52,7 @@ export default class ActionButton extends Vue {
 
 .action-button {
   width: 100%;
+  max-width: 300px;
   padding: 4pt;
   flex: 0 1;
   background: #333;

src/components/Combat.vue

@@ -280,14 +280,15 @@ export default class Combat extends Vue {
 }
 
 .combat-layout {
-  position: absolute;
+  position: relative;
   display: grid;
   grid-template-rows: fit-content(50%) 10% [main-row-start] 1fr 20% [main-row-end] ;
-  grid-template-columns: 20% [main-col-start] 1fr 1fr [main-col-end] 20%;
+  grid-template-columns: 1fr [main-col-start] fit-content(25%) fit-content(25%) [main-col-end] 1fr;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: hidden;
+  margin: auto;
 }
 
 .log {
@@ -297,6 +298,8 @@ export default class Combat extends Vue {
   font-size: 12pt;
   width: 100%;
   max-height: 100%;
+  width: 70vw;
+  max-width: 1000px;
   align-self: flex-start;
 }
 
@@ -356,6 +359,7 @@ export default class Combat extends Vue {
 
 .left-fader,
 .right-fader {
+  position: absolute;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(to bottom, #111, #00000000 10%, #00000000 90%, #111 100%);
@@ -371,6 +375,14 @@ export default class Combat extends Vue {
   grid-area: 2 / 4 / 4 / 5;
 }
 
+.left-actions > .vert-display {
+  align-items: flex-end;
+}
+
+.right-actions > .vert-display {
+  align-items: flex-start;
+}
+
 .left-actions,
 .right-actions {
   overflow-y: hidden;
@@ -385,6 +397,7 @@ export default class Combat extends Vue {
   padding: 8pt;
   text-align: center;
   font-size: 16px;
+  max-width: 1000px;
 }
 
 h3 {
@@ -405,6 +418,7 @@ a {
   display: flex;
   justify-content: center;
 }
+
 .vert-display {
   display: flex;
   flex-direction: column;
@@ -412,12 +426,15 @@ a {
   flex-wrap: nowrap;
   justify-content: start;
   height: 100%;
+  width: 100%;
   overflow-y: auto;
   padding: 64px 0 64px;
 }
 
 .action-label {
   font-size: 200%;
+  max-width: 300px;
+  width: 100%;
 }
 </style>