Enhanced usability and readability on spells items (#71)

Author: GoOz

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.0] - 2025-08-05
+
+### Added
+- Spells & prayers section has now improved usability and readability
+
 ## [2.1.2] - 2025-08-05
 
 ### Fixed

src/_includes/sheet.html

@@ -1268,10 +1268,10 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
                 <abbr title="{{ 'spells.cn' | i18n }}">{{ 'spells.cnAbbr' | i18n }}</abbr>
               </span>
             </th>
-            <th scope="col">
+            <th scope="col" class="narrow">
               <span id="spells-range-label">{{ 'spells.range' | i18n }}</span>
             </th>
-            <th scope="col">
+            <th scope="col" class="narrow">
               <span id="spells-target-label">{{ 'spells.target' | i18n }}</span>
             </th>
             <th scope="col">
@@ -1304,8 +1304,9 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
               <td>
                 <input type="text" name="spells-duration-0" id="spells-duration-0" aria-labelledBy="spells-duration-label">
               </td>
-              <td>
-                <input type="text" name="spells-effects-0" id="spells-effects-0" aria-labelledBy="spells-effects-label">
+              <td class="text-align-start">
+                <div contenteditable role="textbox" aria-multiline="true" aria-labelledby="spells-effects-label"></div>
+                <input type="hidden" name="spells-effects-0" id="spells-effects-0">
               </td>
               <td class="actions">
                 <button class="remove" type="button">
@@ -1334,8 +1335,9 @@ <h1 class="sr-only">{{ 'h1' | i18n }}</h1>
             <td>
               <input type="text" name="spells-duration-" id="spells-duration-" aria-labelledBy="spells-duration-label">
             </td>
-            <td>
-              <input type="text" name="spells-effects-" id="spells-effects-" aria-labelledBy="spells-effects-label">
+            <td class="text-align-start">
+              <div contenteditable role="textbox" aria-multiline="true" aria-labelledby="spells-effects-label"></div>
+              <input type="hidden" name="spells-effects-" id="spells-effects-">
             </td>
             <td class="actions">
               <button class="remove" type="button">