fix:#37 updated margins and mobile layout

frontend/src/App.vue

@@ -110,7 +110,7 @@ if (!import.meta.env.SSR)
 
 <template>
   <MenuBar />
-  <RouterView v-slot="{ Component, route }">
+  <RouterView v-slot="{ Component, route }" class="mb-8">
     <transition name="scale" mode="out-in">
       <div :key="route.name ?? ''" class="origin-near-top">
         <component :is="Component" />

frontend/src/view/DynamicPage.vue

@@ -86,24 +86,9 @@ const hasContent = computed(() => {
       ]"
     >
       <slot name="content"></slot>
-    </div>
       <div
           v-if="button"
-      :class = "[
+          class="flex flex-wrap my-3 gap-2 align-items-center justify-content-end"
-        hideContent
-          ? ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden']
-          : [
-              'flex',
-              'flex-wrap',
-              'my-3',
-              'gap-2',
-              'w-full',
-              'lg:w-8',
-              'align-items-center',
-              'justify-content-end',
-            ]
-      ]"
-      class=""
       >
         <Button
             :disabled="button.disabled"
@@ -114,6 +99,7 @@ const hasContent = computed(() => {
         />
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>

frontend/src/view/create/AdditionalModules.vue

@@ -33,18 +33,18 @@ async function nextStep() {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center w-full mb-7">
+  <div class="flex flex-column align-items-center w-full mb-8">
-    <div class="flex align-items-center justify-content-center m-2">
+    <div class="flex align-items-center justify-content-center">
       <h3>
         {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
     <div
-      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+      class="flex align-items-center justify-content-end h-4rem mb-2 w-full lg:w-10"
     >
       <Button
         :disabled="store.isEmpty()"
-        class="col-12 md:col-4 mb-3 align-self-end"
+        class="col-12 md:col-4 align-self-end"
         icon="pi pi-arrow-right"
         :label="$t('additionalModules.nextStep')"
         @click="nextStep()"
@@ -52,7 +52,7 @@ async function nextStep() {
     </div>
     <AdditionalModuleTable />
     <div
-      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+      class="flex align-items-center justify-content-end mt-2 w-full lg:w-10"
     >
       <Button
         class="col-12 md:col-4 mb-3 align-self-end"