better space manageemnt

src/modules/record/components/RecordControls.vue

@@ -109,7 +109,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="record-controls buttons has-addons">
+  <div class="columns record-controls">
+    <div class="column buttons has-addons">
       <template v-if="record && record.currentStepId">
         <button
           class="button is-primary is-light"
@@ -152,9 +153,10 @@ onUnmounted(() => {
         <img src="/icons/recycle.svg" alt="reset" />
       </button>
     </div>
-  <div class="message">
+    <div class="column message">
       <p><kbd>s</kbd>: start record</p>
       <p><kbd>n</kbd>: next step</p>
       <p><kbd>p</kbd>: pause</p>
     </div>
+  </div>
 </template>