simplification: don't use table for layout

resources/css/style.css

@@ -175,25 +175,18 @@ div.account h3 {
 div.account table {
     table-layout: fixed;
     word-wrap: break-word;
-    margin-bottom: 0;
 }
 div.account table tbody {
     border:1px solid #f1893b;
 }
-div.account .comment {
-    /*display: flex;*/
-    margin: 0;
-    padding: 0;
-    height: 7em;
+div.account .description {
+    height: 4em;
     overflow-y: auto;
-    font-size: 0.875rem;
-    line-height: 1.3;
-    text-align: left;
 }
+/*
 div.account button {
-    margin-bottom: 0;
     padding: 0.5rem 1rem;
-}
+} */
 
 .scrollable {
     overflow-y: scroll;

templates/web/edugain/create_accounts.tt2.html

@@ -21,6 +21,9 @@
         [% PROCESS $template scope=account.scope() id=account.id() | trim %]
     <div class="account small-12 medium-6 large-4 columns">
         <h3>[% lh.maketext("Account profile: [_1]", account.profile()) %]</h3>
+
+        <div class="description">[% description.${lh.language_tag()} %].</div>
+
         <table>
             <tr>
                 <td><strong>[% lh.maketext("user name:") %]</strong></td>
@@ -30,13 +33,8 @@
                 <td><strong>[% lh.maketext("password:") %]</strong></td>
                 <td>[% account.password() %]</td>
             </tr>
-            <tr>
-                <td colspan="2">
-                    <strong>[% lh.maketext("comment:") %]</strong>
-                    <div class="comment">[% description.${lh.language_tag()} %]</div>
-                </td>
-            </tr>
         </table>
+
         <div class="text-center" >
             <button data-open="account_details_[% account.id() %]" id="show_account_details_[% account.id() %]">[% lh.maketext("show details") %]</button>
         </div>
@@ -46,6 +44,7 @@
             <span aria-hidden="true">&times;</span>
         </button>
         <h3>[% lh.maketext("User attributes list") %]</h3>
+
         <table>
     [% FOREACH pair IN attributes.pairs %]
             <tr>

templates/web/renater/create_accounts.tt2.html

@@ -23,6 +23,9 @@
         [% PROCESS $template scope=account.scope() id=account.id() | trim %]
     <div class="account small-12 medium-6 large-4 columns">
         <h3>[% lh.maketext("Account profile: [_1]", account.profile()) %]</h3>
+
+        <div class="description">[% description.${lh.language_tag()} %].</div>
+
         <table>
             <tr>
                 <td><strong>[% lh.maketext("user name:") %]</strong></td>
@@ -32,13 +35,8 @@
                 <td><strong>[% lh.maketext("password:") %]</strong></td>
                 <td>[% account.password() %]</td>
             </tr>
-            <tr>
-                <td colspan="2">
-                    <strong>[% lh.maketext("comment:") %]</strong>
-                    <div class="comment">[% description.${lh.language_tag()} %]</div>
-                </td>
-            </tr>
         </table>
+
         <div class="text-center">
             <button data-open="account_details_[% account.id() %]" id="show_account_details_[% account.id() %]">[% lh.maketext("show details") %]</button>
         </div>
@@ -48,6 +46,7 @@
             <span aria-hidden="true">&times;</span>
         </button>
         <h3>[% lh.maketext("User attributes list") %]</h3>
+
         <table>
     [% FOREACH pair IN attributes.pairs %]
             <tr>