diff --git a/swh/web/assets/src/bundles/vault/vault-create-tasks.js b/swh/web/assets/src/bundles/vault/vault-create-tasks.js
index fd534ea9d..924b590a6 100644
--- a/swh/web/assets/src/bundles/vault/vault-create-tasks.js
+++ b/swh/web/assets/src/bundles/vault/vault-create-tasks.js
@@ -1,90 +1,78 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 import {handleFetchError, csrfPost} from 'utils/functions';
 
 function addVaultCookingTask(cookingTask) {
   let vaultCookingTasks = JSON.parse(localStorage.getItem('swh-vault-cooking-tasks'));
   if (!vaultCookingTasks) {
     vaultCookingTasks = [];
   }
   if (vaultCookingTasks.find(val => {
     return val.object_type === cookingTask.object_type &&
             val.object_id === cookingTask.object_id;
   }) === undefined) {
     let cookingUrl;
     if (cookingTask.object_type === 'directory') {
       cookingUrl = Urls.api_vault_cook_directory(cookingTask.object_id);
     } else {
       cookingUrl = Urls.api_vault_cook_revision_gitfast(cookingTask.object_id);
     }
     if (cookingTask.email) {
       cookingUrl += '?email=' + cookingTask.email;
     }
     csrfPost(cookingUrl)
       .then(handleFetchError)
       .then(() => {
         vaultCookingTasks.push(cookingTask);
         localStorage.setItem('swh-vault-cooking-tasks', JSON.stringify(vaultCookingTasks));
         $('#vault-cook-directory-modal').modal('hide');
         $('#vault-cook-revision-modal').modal('hide');
         window.location = Urls.browse_vault();
       })
       .catch(() => {
         $('#vault-cook-directory-modal').modal('hide');
         $('#vault-cook-revision-modal').modal('hide');
       });
   } else {
     window.location = Urls.browse_vault();
   }
 }
 
 function validateEmail(email) {
   let re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return re.test(String(email).toLowerCase());
 }
 
 export function cookDirectoryArchive(directoryId) {
   let email = $('#swh-vault-directory-email').val().trim();
   if (!email || validateEmail(email)) {
     let cookingTask = {'object_type': 'directory',
       'object_id': directoryId,
       'email': email,
       'status': 'new'};
     addVaultCookingTask(cookingTask);
 
   } else {
     $('#invalid-email-modal').modal('show');
   }
 }
 
 export function cookRevisionArchive(revisionId) {
   let email = $('#swh-vault-revision-email').val().trim();
   if (!email || validateEmail(email)) {
     let cookingTask = {
       'object_type': 'revision',
       'object_id': revisionId,
       'email': email,
       'status': 'new'
     };
     addVaultCookingTask(cookingTask);
   } else {
     $('#invalid-email-modal').modal('show');
   }
 }
-
-export function initTaskCreationUi() {
-
-  // reparent the modals to the top navigation div in order to be able
-  // to display them
-  $(document).ready(function() {
-    $('.swh-browse-top-navigation').append($('#vault-cook-directory-modal'));
-    $('.swh-browse-top-navigation').append($('#vault-cook-revision-modal'));
-    $('.swh-browse-top-navigation').append($('#invalid-email-modal'));
-  });
-
-}
diff --git a/swh/web/assets/src/bundles/webapp/webapp-utils.js b/swh/web/assets/src/bundles/webapp/webapp-utils.js
index b653fba1a..8705d35f9 100644
--- a/swh/web/assets/src/bundles/webapp/webapp-utils.js
+++ b/swh/web/assets/src/bundles/webapp/webapp-utils.js
@@ -1,135 +1,139 @@
 import objectFitImages from 'object-fit-images';
 import {Layout} from 'admin-lte';
 
 let collapseSidebar = false;
 let previousSidebarState = localStorage.getItem('swh-sidebar-collapsed');
 if (previousSidebarState !== undefined) {
   collapseSidebar = JSON.parse(previousSidebarState);
 }
 
 // adapt implementation of fixLayoutHeight from admin-lte
 Layout.prototype.fixLayoutHeight = () => {
   let heights = {
     window: $(window).height(),
     header: $('.main-header').outerHeight(),
     footer: $('.footer').outerHeight(),
     sidebar: $('.main-sidebar').height(),
     topbar: $('.swh-top-bar').height()
   };
   let offset = 10;
   $('.content-wrapper').css('min-height', heights.window - heights.topbar - heights.header - heights.footer - offset);
   $('.main-sidebar').css('min-height', heights.window - heights.topbar - heights.header - heights.footer - offset);
 };
 
 $(document).on('DOMContentLoaded', () => {
   // restore previous sidebar state (collapsed/expanded)
   if (collapseSidebar) {
     // hack to avoid animated transition for collapsing sidebar
     // when loading a page
     let sidebarTransition = $('.main-sidebar, .main-sidebar:before').css('transition');
     let sidebarEltsTransition = $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition');
     $('.main-sidebar, .main-sidebar:before').css('transition', 'none');
     $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', 'none');
     $('body').addClass('sidebar-collapse');
     $('.swh-words-logo-swh').css('visibility', 'visible');
     // restore transitions for user navigation
     setTimeout(() => {
       $('.main-sidebar, .main-sidebar:before').css('transition', sidebarTransition);
       $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', sidebarEltsTransition);
     });
   }
 });
 
 $(document).on('collapsed.lte.pushmenu', event => {
   if ($('body').width() > 980) {
     $('.swh-words-logo-swh').css('visibility', 'visible');
   }
 });
 
 $(document).on('shown.lte.pushmenu', event => {
   $('.swh-words-logo-swh').css('visibility', 'hidden');
 });
 
 function ensureNoFooterOverflow() {
   $('body').css('padding-bottom', $('footer').outerHeight() + 'px');
 }
 
 $(document).ready(() => {
   // redirect to last browse page if any when clicking on the 'Browse' entry
   // in the sidebar
   $(`.swh-browse-link`).click(event => {
     let lastBrowsePage = sessionStorage.getItem('last-browse-page');
     if (lastBrowsePage) {
       event.preventDefault();
       window.location = lastBrowsePage;
     }
   });
 
   // ensure footer do not overflow main content for mobile devices
   // or after resizing the browser window
   ensureNoFooterOverflow();
   $(window).resize(function() {
     ensureNoFooterOverflow();
     if ($('body').hasClass('sidebar-collapse') && $('body').width() > 980) {
       $('.swh-words-logo-swh').css('visibility', 'visible');
     }
   });
   // activate css polyfill 'object-fit: contain' in old browsers
   objectFitImages();
+
+  // reparent the modals to the top navigation div in order to be able
+  // to display them
+  $('.swh-browse-top-navigation').append($('.modal'));
 });
 
 export function initPage(page) {
 
   $(document).ready(() => {
     // set relevant sidebar link to page active
     $(`.swh-${page}-item`).addClass('active');
     $(`.swh-${page}-link`).addClass('active');
 
     // triggered when unloading the current page
     $(window).on('unload', () => {
       // backup sidebar state (collapsed/expanded)
       let sidebarCollapsed = $('body').hasClass('sidebar-collapse');
       localStorage.setItem('swh-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
       // backup current browse page
       if (page === 'browse') {
         sessionStorage.setItem('last-browse-page', window.location);
       }
     });
 
   });
 }
 
 export function showModalMessage(title, message) {
   $('#swh-web-modal-message .modal-title').text(title);
   $('#swh-web-modal-message .modal-content p').text(message);
   $('#swh-web-modal-message').modal('show');
 }
 
 export function showModalConfirm(title, message, callback) {
   $('#swh-web-modal-confirm .modal-title').text(title);
   $('#swh-web-modal-confirm .modal-content p').text(message);
   $('#swh-web-modal-confirm #swh-web-modal-confirm-ok-btn').bind('click', () => {
     callback();
     $('#swh-web-modal-confirm').modal('hide');
     $('#swh-web-modal-confirm #swh-web-modal-confirm-ok-btn').unbind('click');
   });
   $('#swh-web-modal-confirm').modal('show');
 }
 
 let swhObjectIcons;
 
 export function setSwhObjectIcons(icons) {
   swhObjectIcons = icons;
 }
 
 export function getSwhObjectIcon(swhObjectType) {
   return swhObjectIcons[swhObjectType];
 }
 
 export function initTableRowLinks(trSelector) {
   $(trSelector).on('click', function() {
     window.location = $(this).data('href');
     return false;
   });
   $('td > a').on('click', function(e) { e.stopPropagation(); });
 }
diff --git a/swh/web/templates/includes/vault-create-tasks.html b/swh/web/templates/includes/vault-create-tasks.html
index 81f0de4c9..ba38f71c0 100644
--- a/swh/web/templates/includes/vault-create-tasks.html
+++ b/swh/web/templates/includes/vault-create-tasks.html
@@ -1,118 +1,114 @@
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 
 {% if vault_cooking %}
 
   <!-- entry in the Actions menu -->
   <div class="dropdown-submenu swh-vault-menu">
     <a class="dropdown-item dropdown-left" tabindex="-1" href="#">
       <i class="fa fa-download fa-fw" aria-hidden="true"></i>Download
     </a>
     <div class="dropdown-menu">
       {% if vault_cooking.directory_context %}
         <button class="dropdown-item" type="button" tabindex="-1" data-toggle="modal" data-target="#vault-cook-directory-modal">
           <i class="{{ swh_object_icons.directory }} fa-fw" aria-hidden="true"></i>Directory
         </button>
       {% endif %}
       {% if vault_cooking.revision_context %}
         <button class="dropdown-item" type="button" tabindex="-1" data-toggle="modal" data-target="#vault-cook-revision-modal">
           <i class="{{ swh_object_icons.revision }} fa-fw"></i>Revision
         </button>
       {% endif %}
     </div>
   </div>
 
   <!-- modals related to the creation of vault cooking tasks -->
   <!-- they will be reparented in the script below in order to be able to display them -->
   <div class="modal fade" id="vault-cook-directory-modal" tabindex="-1" role="dialog" aria-labelledby="vault-cook-directory-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h6 class="modal-title" id="vault-cook-directory-modal-label">Cook and download a directory from the Software Heritage Vault</h6>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <p>
             You have requested the cooking of the directory with identifier <strong>{{ vault_cooking.directory_id }}</strong>
             into a standard tar.gz archive.
           </p>
           <p>
             Are you sure you want to continue ?
           </p>
           <form>
             <div class="form-group">
               <label for="email">(Optional) Send download link once it is available to that email address:</label>
               <input type="email" class="form-control" id="swh-vault-directory-email">
             </div>
           </form>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
           <button type="button" class="btn btn-default btn-sm" onclick="swh.vault.cookDirectoryArchive('{{ vault_cooking.directory_id }}')">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
   <div class="modal fade" id="vault-cook-revision-modal" tabindex="-1" role="dialog" aria-labelledby="vault-cook-revision-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h6 class="modal-title" id="vault-cook-revision-modal-label">Cook and download a revision from the Software Heritage Vault</h6>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <p>
             You have requested the cooking of the revision with identifier <strong>{{ vault_cooking.revision_id }}</strong>
             into a git fast-import archive.
           </p>
           <p>
             Are you sure you want to continue ?
           </p>
           <form>
             <div class="form-group">
               <label for="email">(Optional) Send download link once it is available to that email address:</label>
               <input type="email" class="form-control" id="swh-vault-revision-email">
             </div>
           </form>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
           <button type="button" class="btn btn-default btn-sm" onclick="swh.vault.cookRevisionArchive('{{ vault_cooking.revision_id }}')">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
   <div class="modal fade" id="invalid-email-modal" tabindex="-1" role="dialog" aria-labelledby="invalid-email-modal-label" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="invalid-email-modal-label">Invalid Email !</h4>
         </div>
         <div class="modal-body">
           <p>The provided email is not well-formed.</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Ok</button>
         </div>
       </div>
     </div>
   </div>
 
-  <script>
-    swh.vault.initTaskCreationUi();
-  </script>
-
 {% endif %}
\ No newline at end of file