[styling] Fix tooltips and some alignments

Author: g3force

src/components/control/ControlFlowBar.vue

@@ -1,16 +1,16 @@
 <template>
     <div class="control-flaw-bar">
-        <span v-b-tooltip.hover
-              :title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
+        <div v-b-tooltip.hover
+             :title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
             <b-button v-hotkey="keymapHalt"
                       ref="btnHalt"
                       v-on:click="send('halt')"
                       v-bind:disabled="halted">
                 Halt
             </b-button>
-        </span>
+        </div>
 
-        <span v-b-tooltip.hover
+        <div v-b-tooltip.hover
               :title="'Continue based on last game event (' + Object.keys(keymapContinue)[0] + ')'">
             <b-button v-hotkey="keymapContinue"
                       ref="btnContinue"
@@ -22,7 +22,7 @@
                     {{state.nextCommand}}
                 </span>
             </b-button>
-        </span>
+        </div>
     </div>
 </template>
 
@@ -82,5 +82,7 @@
         position: fixed;
         bottom: 0;
         text-align: center;
+        display: flex;
+        justify-content: center;
     }
 </style>

src/components/game-events/CurrentEvents.vue

@@ -77,9 +77,7 @@
 
 <style scoped>
     .content {
-        text-align: left;
-        overflow-y: auto;
-        /*max-height: 15em;*/
+        text-align: center;
     }
 
     .game-event-item {
@@ -90,20 +88,13 @@
         border-radius: 5px;
         padding: 0.2em;
         margin: 0.2em;
+        text-align: left;
     }
 
     .details-row {
         margin-bottom: 0;
     }
 
-    .buttons {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        margin: 0.0em;
-        display: flex;
-    }
-
     .btn-accept {
         margin: 0.1em;
     }

src/components/game-events/EventProposals.vue

@@ -79,6 +79,10 @@
 
 <style scoped>
 
+    .content {
+        text-align: center;
+    }
+
     .proposal-item {
         position: relative;
         min-height: 2em;
@@ -87,6 +91,7 @@
         border-radius: 5px;
         padding: 0.2em;
         margin: 0.2em;
+        text-align: left;
     }
 
     .btn-accept {

src/components/game-events/GameEventsView.vue

@@ -29,6 +29,7 @@
         text-align: left;
         overflow-y: auto;
         max-height: 85vh;
+        min-width: 20em;
     }
 
 </style>