Fixed event form

src/AppComponent.vue

@@ -94,6 +94,7 @@ body {
   flex: 1;
   background-color: #d9e2f3;
   overflow-y: auto;
+  margin: 0 7px 7px 0;
 }
 
 .right-column h2 {

src/common/components/HeaderComponent.vue

@@ -42,7 +42,7 @@ header {
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: #e0bfff;
+  background-color: #ffffff;
 }
 
 .header-title {
@@ -50,11 +50,14 @@ header {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.3em 0.5em;
+  padding: .3em .5em;
 }
 
 header h1 {
   margin: 0;
+  flex: 1;
+  text-align: center;
+  text-shadow: 2px 2px 1px #e0bfff;
 }
 
 .reload-icon {

src/common/components/NavbarComponent.vue

@@ -12,7 +12,8 @@
           {{ item.name }}
         </span>
         <transition name="fade">
-          <div v-if="item.submenu && item.submenu.length && (isSubmenuOpen[item.name] || windowWidth > 768)" class="dropdown-content">
+          <div v-if="item.submenu && item.submenu.length && (isSubmenuOpen[item.name] || windowWidth > 768)"
+            class="dropdown-content">
             <router-link v-for="subitem in item.submenu" :key="subitem.name" :to="subitem.link" @click="closeMenu">
               {{ subitem.name }}
             </router-link>
@@ -61,10 +62,10 @@ export default {
     };
 
     const closeMenu = () => {
-        isMenuOpen.value = false;
+      isMenuOpen.value = false;
-        Object.keys(isSubmenuOpen).forEach(key => {
+      Object.keys(isSubmenuOpen).forEach(key => {
-          isSubmenuOpen[key] = false;
+        isSubmenuOpen[key] = false;
-        });
+      });
     }
 
     const handleResize = () => {
@@ -103,9 +104,11 @@ export default {
   background-color: #9400ff;
   overflow: visible;
   min-height: 47px;
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
-  width: 100%;
+  width: auto;
+  margin: 0.1em 0.75em 9px 0.75em;
+  box-shadow: 0 0 2px 5px #9400ff;
 }
 
 .menu-toggle {
@@ -131,7 +134,7 @@ export default {
 }
 
 .navbar a,
-.navbar li > span {
+.navbar li>span {
   display: block;
   color: white;
   text-align: center;
@@ -180,11 +183,16 @@ export default {
   visibility: visible;
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
 }
 
-.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+.fade-enter,
+.fade-leave-to
+
+/* .fade-leave-active in <2.1.8 */
+  {
   opacity: 0;
   visibility: hidden;
 }
@@ -203,7 +211,7 @@ export default {
   }
 
   .navbar a,
-  .navbar li > span {
+  .navbar li>span {
     text-align: left;
     padding: 14px 20px;
   }
@@ -225,6 +233,7 @@ export default {
     display: block;
   }
 }
+
 .pointer {
   cursor: pointer;
 }

src/content/ImageContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="right-column">
+  <div>
     <img :src="currentImage" alt="Cross" />
   </div>
 </template>
@@ -56,10 +56,6 @@ export default {
 </script>
 
 <style scoped>
-.right-column {
-  background-color: #d9e2f3;
-}
-
 .right-column h2 {
   text-align: center;
   color: #000;