Improve text field appearance

app/assets/stylesheets/characters.css

@@ -57,7 +57,7 @@
   justify-content: center;
 }
 
-.stat, .counter {
+.stat, .counter, .text-field {
   display: flex;
   flex-direction: column;
   border-radius: var(--border-radius);
@@ -70,12 +70,30 @@
     padding: .5em;
   }
   input, .stat-value {
+    font-size: 3em;
+    width: 2.5em;
+  }
+  input, .stat-value, .trix-content {
     padding: .5em;
     color: var(--text-color);
     background-color: var(--input-background);
     text-align: center;
-    font-size: 3em;
-    width: 2.5em;
     border: 1px solid var(--background-color);
+    height: 120px;
+  }
+  trix-toolbar {
+    display: none;
+  }
+  .trix-content {
+    min-width: 10em;
+    max-width: 20em;
+    overflow-y: scroll;
+    font-size: .8em;
+  }
+  input[type=submit] {
+    width: 100%;
+    font-size: .8em;
+    height: auto;
+    padding: auto;
   }
 }

app/views/text_fields/_text_field.html.erb

@@ -11,7 +11,7 @@
       <%= f.submit t(".save") %>
     <% end %>
   <% else %>
-    <p><%= text_field.content %></p>
+    <%= text_field.content %>
   <% end %>
 </div>
 

todo.md

@@ -1,9 +1,8 @@
-- set orders on sheets
+- improve edit button appearance
 - easily edit text fields without entering edit mode
 - add roll command to counters (e.g. luck)
 - test for rolls controller & system tests
 - Show individual dice on dice roll
-- customise trix bar
 - Sheets
   - Lists
   - Weapons/spells