Style the modal description

templates/components/modal.html

@@ -1,16 +1,11 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Modal(name, dismissable=False, description=None) -%}
+{% macro Modal(name, dismissable=False) -%}
   <div v-show="activeModal === '{{name}}'" v-cloak>
     <div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>
-              {% if description %}
-                <h1>{{ description.header }}</h1>
-                <div>{{ description.body }}</div>
-              {% endif %}
-
               {{ caller() }}
 
               {% if dismissable %}

templates/workspaces/members/edit.html

@@ -76,8 +76,16 @@
             <div class='project-list-item__environment__actions'>
               <span v-bind:class="label_class" v-html:on=displayName></span>
               <button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
-              {% call Modal(name=env.name + 'RolesModal', dismissable=False, description=env_role_modal_description) %}
+              {% call Modal(name=env.name + 'RolesModal', dismissable=False) %}
                   <div class='block-list'>
+                    <div class='block-list__header'>
+                      <div>
+                      {% if env_role_modal_description %}
+                        <h1>{{ env_role_modal_description.header }}</h1>
+                        <p>{{ env_role_modal_description.body }}</p>
+                      {% endif %}
+                      </div>
+                    </div>
                     <ul>
                       {% for choice in choices %}
                       <li class='block-list__item block-list__item--selectable'>