fix edit interpretation

app/static/css/styles.css

@@ -1157,14 +1157,14 @@ input:checked + .toggle-bg {
   z-index: 100;
 }
 
-.z-\[150\] {
-  z-index: 150;
-}
-
 .z-\[55\] {
   z-index: 55;
 }
 
+.z-\[150\] {
+  z-index: 150;
+}
+
 .col-span-6 {
   grid-column: span 6 / span 6;
 }
@@ -1454,6 +1454,14 @@ input:checked + .toggle-bg {
   height: 100vh;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
+.h-\[calc\(100\%\)\] {
+  height: calc(100%);
+}
+
 .max-h-full {
   max-height: 100%;
 }
@@ -1716,10 +1724,6 @@ input:checked + .toggle-bg {
   justify-content: space-between;
 }
 
-.gap-1 {
-  gap: 0.25rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1728,6 +1732,10 @@ input:checked + .toggle-bg {
   gap: 1.5rem;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .-space-x-px > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
@@ -2038,11 +2046,6 @@ input:checked + .toggle-bg {
   background-color: rgb(200 30 30 / var(--tw-bg-opacity));
 }
 
-.bg-sky-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(125 211 252 / var(--tw-bg-opacity));
-}
-
 .bg-slate-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
@@ -2071,6 +2074,16 @@ input:checked + .toggle-bg {
   background-color: rgb(255 255 255 / 0.5);
 }
 
+.bg-sky-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(125 211 252 / var(--tw-bg-opacity));
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -2524,16 +2537,16 @@ input:checked + .toggle-bg {
   background-color: rgb(155 28 28 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-sky-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-white:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-sky-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gradient-to-bl:hover {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }

app/templates/book/edit_interpretation_modal.html

@@ -1,5 +1,5 @@
 <!-- prettier-ignore-->
-<div id="edit_interpretation_modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+<div id="edit_interpretation_modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full ">
   <div class="relative w-full max-w-2xl max-h-full">
     <!-- Modal content -->
     <form
@@ -8,10 +8,12 @@
       {% else %}
         action="{{ url_for('book.interpretation_edit', book_id=book.id, collection_id=collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
       {% endif %}
-      method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      method="post"
+      class="prevent-submit-on-enter relative bg-white rounded-lg shadow dark:bg-gray-700"
+    >
       {{ form_hidden_tag() }}
       <input type="hidden" name="interpretation_id" id="interpretation_id" value="{{interpretation.id}}" />
-      <input type="hidden" name="text" id="interpretation-text-input" value={{interpretation.text}} />
+      <input type="hidden" name="text" id="interpretation-text-input" value="{{interpretation.text}}" />
 
       <!-- Modal header -->
       <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
@@ -30,27 +32,29 @@
       <div class="p-6 pt-0 space-y-6">
         <div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
           <div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
-            <div id="interpretation-text" class="quill-editor dark:text-white h-80">
+            <div id="interpretation-text" class="quill-editor dark:text-white h-40">
               {{ interpretation.text|safe }}
             </div>
           </div>
         </div>
 
-        <label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-          Tags
-        </label>
-        <input type="text" name="tags" class="hidden create-interpretation-tags">
-        <input
-          type="text"
-          id="tags-input"
-          class="multiple-input mb-3 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="e.g. Law   (press 'Enter' or Comma to add tag. Click on tag to edit it)"
-          data-save-results-to="create-interpretation-tags"
-        >
-        <div class="multiple-input-items gap-1 flex flex-wrap">
-          {% for tag in interpretation.tags %}
-            <div class="cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2">{{tag.name}}</div>
-          {% endfor %}
+        <div>
+          <label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+            Tags
+          </label>
+          <input type="text" name="tags" class="hidden create-interpretation-tags">
+          <input
+            type="text"
+            id="tags-input"
+            class="multiple-input mb-3 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="e.g. Law   (press 'Enter' or Comma to add tag. Click on tag to edit it)"
+            data-save-results-to="create-interpretation-tags"
+          >
+          <div class="multiple-input-items gap-1 flex flex-wrap">
+            {% for tag in interpretation.tags %}
+              <div class="cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2">{{tag.name}}</div>
+            {% endfor %}
+          </div>
         </div>
       </div>
       <!-- Modal footer -->