diff --git a/assets/components/Online/ExerciseVerify.vue b/assets/components/Online/ExerciseVerify.vue
index d6374c8e..91971f8a 100644
--- a/assets/components/Online/ExerciseVerify.vue
+++ b/assets/components/Online/ExerciseVerify.vue
@@ -130,7 +130,7 @@ const verifySolution = () => {
 
 <template>
   <alert type="error" @close="showRateLimitError = false" :show="showRateLimitError" :timeout="4000" message="Too many requests. Please try again in a few minutes."></alert>
-  <div class="flex h-[48px] flex-1 md:flex-none items-center gap-y-2">
+  <div class="flex h-[48px] flex-1 items-center gap-y-2 md:flex-none">
     <button
       id="run"
       class="mr-2 mt-0 hidden h-[48px] w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:flex"
diff --git a/assets/components/Online/PageExerciseEditor.vue b/assets/components/Online/PageExerciseEditor.vue
index f1457424..3602c148 100644
--- a/assets/components/Online/PageExerciseEditor.vue
+++ b/assets/components/Online/PageExerciseEditor.vue
@@ -438,10 +438,10 @@ const deleteFileOrFolder = async (file) => {
           </TransitionRoot>
         </div>
         <!-- start footer -->
-        <div class="flex flex-wrap lg:flex-nowrap items-center justify-between gap-y-3 border-t border-solid border-gray-600 p-2 md:mb-0">
-          <editor-breadcrumbs :current-exercise="currentExercise" class="order-3 lg:order-1 mr-3"></editor-breadcrumbs>
+        <div class="flex flex-wrap items-center justify-between gap-y-3 border-t border-solid border-gray-600 p-2 md:mb-0 lg:flex-nowrap">
+          <editor-breadcrumbs :current-exercise="currentExercise" class="order-3 mr-3 lg:order-1"></editor-breadcrumbs>
           <progress-bar></progress-bar>
-          <div class="order-1 flex w-full items-start justify-end gap-x-2 lg:order-3 lg:w-auto md:gap-x-0">
+          <div class="order-1 flex w-full items-start justify-end gap-x-2 md:gap-x-0 lg:order-3 lg:w-auto">
             <button
               ref="openFileBrowserButton"
               class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:hidden lg:mb-0"
@@ -450,7 +450,7 @@ const deleteFileOrFolder = async (file) => {
               <FolderIcon v-cloak class="h-5 w-5 xl:ml-2" />
             </button>
             <button
-              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:w-auto xl:w-44 lg:mb-0"
+              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:mb-0 lg:w-auto xl:w-44"
               @click="openComposerModal = true"
             >
               <span class="hidden md:flex lg:hidden xl:flex">Composer deps</span>
diff --git a/assets/components/Online/ProgressBar.vue b/assets/components/Online/ProgressBar.vue
index f8d8320d..e3c165cd 100644
--- a/assets/components/Online/ProgressBar.vue
+++ b/assets/components/Online/ProgressBar.vue
@@ -7,21 +7,21 @@ import { useWorkshopStore } from "../../stores/workshops";
 const workshopStore = useWorkshopStore();
 
 const percentComplete = computed(() => {
-    let percent = (studentStore.totalCompleted() / workshopStore.totalExercises) * 100;
+  let percent = (studentStore.totalCompleted() / workshopStore.totalExercises) * 100;
 
-    //looks weird when the progressbar is smaller
-    if (percent < 7) {
-        percent = 7;
-    }
+  //looks weird when the progressbar is smaller
+  if (percent < 7) {
+    percent = 7;
+  }
 
-    return percent;
+  return percent;
 });
 </script>
 
 <template>
-  <div class="order-2 md:order-3 flex w-full md:flex-1 items-center lg:w-1/6 lg:flex-none">
-    <div class="relative mt-0 flex h-2 flex-1 items-center justify-center rounded-full bg-gray-200 bg-gray-700 md:h-5 z-10">
-      <div class="absolute left-0 h-2 rounded-full bg-pink-500 md:h-5 z-0" :style="{ width: percentComplete + '%' }"></div>
+  <div class="order-2 flex w-full items-center md:order-3 md:flex-1 lg:w-1/6 lg:flex-none">
+    <div class="relative z-10 mt-0 flex h-2 flex-1 items-center justify-center rounded-full bg-gray-200 bg-gray-700 md:h-5">
+      <div class="absolute left-0 z-0 h-2 rounded-full bg-pink-500 md:h-5" :style="{ width: percentComplete + '%' }"></div>
       <p class="absolute mx-auto ml-2 hidden items-center font-mono text-xs font-bold text-white md:inline-flex">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>
     </div>
     <p class="mx-auto ml-2 mr-2 items-center font-mono text-xs text-white md:hidden">{{ studentStore.totalCompleted() }}/{{ workshopStore.totalExercises }} Completed</p>