💄 Better UI for measurements

Author: Poeschl

frontend/src/components/MapEditorMeasureBox.vue

@@ -1,9 +1,9 @@
 <template>
   <InfoBoxTemplate title="Measure">
-    <div class="columns is-align-items-center">
+    <div class="columns">
       <div class="column">
         <button
-          class="button"
+          class="button is-fullwidth"
           :class="{ 'is-primary': pathDrawEnabled }"
           @click="$emit('update:pathDrawEnabled', !pathDrawEnabled)"
           title="If active click on the map to draw a path from clicked tile to clicked tile."
@@ -15,8 +15,10 @@
           Draw Move Path
         </button>
       </div>
+    </div>
+    <div class="columns">
       <div class="column">
-        <div class="field has-addons">
+        <div class="field has-addons is-justify-content-center">
           <div class="control">
             <button
               class="button"

frontend/src/views/MapEditorView.vue

@@ -137,6 +137,6 @@ const resetMapMeasureDrawing = () => {
 
 <style scoped lang="scss">
 .editor-root {
-  margin: 0 4rem 1rem;
+  margin: 0 10rem 1rem;
 }
 </style>