diff --git a/src/components/ActionButton.vue b/src/components/ActionButton.vue index b95201d..13f26aa 100644 --- a/src/components/ActionButton.vue +++ b/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; diff --git a/src/components/Combat.vue b/src/components/Combat.vue index e07c3aa..1b77d65 100644 --- a/src/components/Combat.vue +++ b/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%; }