Make skill list flexible.

src/frontend/scripts/characters/edit.ts

@@ -87,7 +87,7 @@ import * as api from "../api";
             console.log("got a response back", resp);
         }
 
-        const inputs = document.querySelectorAll("#basicInfo input");
+        const inputs = document.querySelectorAll("#basics input");
 
         inputs.forEach(input => {
             console.log('got an input', input);

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

@@ -52,8 +52,6 @@
      }
 
      .attribute {
-         margin: 0;
-         padding: 0;
          display: flex;
      }
 
@@ -76,26 +74,25 @@
      }
 
      #skills {
-         padding: 4px;
+
-         border-collapse: collapse;
+     }
+
+     #skills .flex-container {
+         display: flex;
+         flex-flow: row wrap;
      }
 
      #skills .skills-section {
          border: 1px solid gray;
-         border-collapse: collapse;
+         margin-top: -1px;
-         display: table-cell;
+         margin-left: -1px;
      }
 
      .skill {
-         margin: 0;
-         padding: 0;
          display: flex;
      }
 
      .skill label {
-         display: inline-block;
-         float: left;
-         clear: left;
          width: 10em;
          text-align: right;
          vertical-align: text-bottom;
@@ -105,8 +102,6 @@
 
      .skill input {
          max-width: 4em;
-         display: inline-block;
-         float: left;
          padding: 8px;
          border: none;
          background-color: lightgray;
@@ -233,6 +228,8 @@
 
         <div id="skills">
             <h2>Skills</h2>
+
+            <div class="flex-container">
                 <div class="skills-section" id="mentalSkills">
                     {% for skill_name, skill in sheet.mentalSkills %}
                         {{ macros::skill(name=skill_name, value=skill.dots) }}
@@ -251,6 +248,7 @@
                     {% endfor %}
                 </div>
             </div>
+        </div>
 
         <div id="merits">
             <h2>Merits</h2>