Make attributes flexible.

src/frontend/templates/characters/edit_character.html.tera

@@ -7,7 +7,7 @@
          font-family: Liberation Sans, Arial;
      }
 
-     #basicsBox {
+     #basics .flex-container {
          display: flex;
          flex-flow: row wrap;
      }
@@ -40,15 +40,15 @@
          margin: 0;
      }
 
-     #attributes {
-         padding: 4px;
-         border-collapse: collapse;
+     #attributes .flex-container {
+         display: flex;
+         flex-flow: row wrap;
      }
 
      #attributes .attributes-section {
          border: 1px solid gray;
-         border-collapse: collapse;
-         display: table-cell;
+         margin-left: -1px;
+         margin-top: -1px;
      }
 
      .attribute {
@@ -58,10 +58,8 @@
      }
 
      .attribute label {
-         display: inline-block;
-         float: left;
-         clear: left;
          width: 10em;
+         display: inline;
          text-align: right;
          vertical-align: text-bottom;
          padding: 8px;
@@ -70,8 +68,7 @@
 
      .attribute input {
          max-width: 4em;
-         display: inline-block;
-         float: left;
+         display: inline;
          padding: 8px;
          border: none;
          background-color: lightgray;
@@ -175,7 +172,7 @@
 
     <h1>Core Sheet</h1>
     <div>
-        <div id="basicInfo">
+        <div id="basics">
             <h1>
                 <label for="characterName">Name</label>
                 <input type="text" id="characterName" name="characterName" value="{{name}}" />
@@ -184,7 +181,7 @@
             <h2>Basics</h2>
             <div>System: {{data_type}}</div>
 
-            <div id="basicsBox">
+            <div class="flex-container">
                 <div class="basics-row">
                     <div class="basics-entry">
                         <label for="gender">Gender:</label>
@@ -213,6 +210,7 @@
 
         <div id="attributes">
             <h2>Attributes</h2>
+            <div class="flex-container">
                 <div class="attributes-section" id="mentalAttributes">
                     {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
                     {{ macros::attribute(name="Wits", value=sheet.wits) }}
@@ -231,6 +229,7 @@
                     {{ macros::attribute(name="Composure", value=sheet.composure) }}
                 </div>
             </div>
+        </div>
 
         <div id="skills">
             <h2>Skills</h2>