Position pop-up messages more cleanly

app/views/application/_flash.html.slim

@@ -1,5 +1,6 @@
-#flash.fixed_error_messages data-message-failure=t('shared.message_failure')
-  - %w[alert danger info notice success warning].each do |severity|
-    div.alert.flash class="alert-#{{'alert' => 'warning', 'notice' => 'success'}.fetch(severity, severity)}"
-      p id="flash-#{severity}" = flash[severity]
-      span.fa.fa-times
+#flash-container
+  #flash.container.fixed_error_messages data-message-failure=t('shared.message_failure')
+    - %w[alert danger info notice success warning].each do |severity|
+      div.alert.flash class="alert-#{{'alert' => 'warning', 'notice' => 'success'}.fetch(severity, severity)}"
+        p id="flash-#{severity}" = flash[severity]
+        span.fa.fa-times

app/views/layouts/application.html.slim

@@ -32,8 +32,8 @@ html lang='en'
             li = link_to(t('shared.help.link'), '#modal-help', data: {toggle: 'modal'})
             = render('session')
     .container data-controller=controller_name
-      = render('breadcrumbs')
       = render('flash')
+      = render('breadcrumbs')
     - if (controller_name == "exercises" && action_name == "implement")
       .container-fluid
         = yield

lib/assets/stylesheets/flash.css.scss

@@ -1,3 +1,8 @@
+#flash-container {
+  position: relative;
+  top: -21px;
+}
+
 .flash {
   display: none;
 
@@ -10,14 +15,10 @@
 }
 
 .fixed_error_messages {
-  position: fixed;
+  position: absolute;
   z-index: 1000;
-  top: 20px;
-  left: 0;
+  padding: inherit;
   width: 100%;
-  padding-left: 10%;
-  padding-right: 10%;
-  padding-top: 0;
 }