fix truncate and align text in buttons

app/templates/base.html

@@ -15,8 +15,7 @@
     <link
       rel="icon"
       type="image/x-icon"
-      href="{{ url_for('static', filename='img/logo.ico') }}"
+      href="{{ url_for('static', filename='img/logo.ico') }}" />
-    />
 
     <!-- styles -->
     <!-- prettier-ignore -->
@@ -105,7 +104,8 @@
     <!-- DO NOT REMOVE THIS! -->
     <!-- Adding tailwind classes that are not in html, but will be added by jinja -->
     <span class="hidden">
-      <span class="border-sky-300 bg-sky-100 !dark:text-black hidden text-orange-500 !no-underline !dark:bg-blue-600 !dark:hover:bg-blue-700 !dark:text-white"></span>
+      <span
+        class="border-sky-300 bg-sky-100 !dark:text-black hidden text-orange-500 !no-underline !dark:bg-blue-600 !dark:hover:bg-blue-700 !dark:text-white"></span>
     </span>
   </body>
 </html>

app/templates/book/collection_view.html

@@ -48,22 +48,22 @@
       data-entity-type="collection"
       data-entity-id="{{collection.id}}" class="filter {% if not has_permission(collection, Access.U) %}denied{% endif %}">
       <div  data-entity-type="collection"
-      data-entity-id="{{collection.id}}"  class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
+      data-entity-id="{{collection.id}}"  class="flex items-center justify-start font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
         <button class="bg-inherit" type="button" data-accordion-target="#accordion-collapse-body-{{collection.id}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{collection.id}}">
         <!-- prettier-ignore -->
         <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
         </button>
-        <button href="#collection-{{collection.label}}" id="accordion-collapse-heading-{{collection.id}}" class="text-black dark:text-white ">
+        <button href="#collection-{{collection.label}}" id="accordion-collapse-heading-{{collection.id}}" class="w-full text-black dark:text-white ">
           <form id="rename-collection-label-form-{{collection.id}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" method="post" class="mb-0">
             {{ form_hidden_tag() }}
-            <input class=" bg-inherit border-none " value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{collection.id}}" placeholder="Collection label" required readonly/>
+            <input class="w-full truncate bg-inherit border-none" value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{collection.id}}" placeholder="Collection label" required readonly/>
             <button name="submit" type="submit"></button>
           </form>
         </button>
       </div>
       <svg id="dropdownCollectionContextButton{{collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
     </div>
-    <div data="collection-context-menu-{{collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+    <div data="collection-context-menu-{{collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow dark:bg-gray-700">
       {% include 'book/components/collection_context_menu.html' %}
     </div>
     <!-- prettier-ignore -->

app/templates/book/components/section_tab_content.html

@@ -4,18 +4,18 @@
   data-entity-type="section"
   data-book-id="{{book.id}}">
   <!-- prettier-ignore -->
-  <button type="button" href="#section-{{section.label}}" id="section-heading-{{section.id}}" class="text-gray-500 dark:text-gray-400 w-max">
+  <button type="button" href="#section-{{section.label}}" id="section-heading-{{section.id}}" class="w-full text-gray-500 dark:text-gray-400">
     <!-- prettier-ignore -->
-    <form id="rename-section-label-form-{{section.id}}" data-book-id="{{book.id}}" data-collection-id="{{collection.id}}" {% if sub_collection %} data-sub-collection-id="{{sub_collection.id}}" {% endif %} data-section-id="{{section.id}}" method="post" class="inline-block w-auto">
+    <form id="rename-section-label-form-{{section.id}}" data-book-id="{{book.id}}" data-collection-id="{{collection.id}}" {% if sub_collection %} data-sub-collection-id="{{sub_collection.id}}" {% endif %} data-section-id="{{section.id}}" method="post" class="w-full inline-block">
       {{ form_hidden_tag() }}
-      <input class="bg-inherit border-none underline" value="{{section.label}}" type="text" name="label" id="edit-section-label-{{section.id}}" placeholder="Section label" required readonly />
+      <input class="w-full truncate bg-inherit border-none underline" value="{{section.label}}" type="text" name="label" id="edit-section-label-{{section.id}}" placeholder="Section label" required readonly />
       <button name="submit" type="submit"></button>
     </form>
   </button>
   <!-- prettier-ignore -->
   <svg id="dropdownSectionContextButton{{section.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
   <!-- prettier-ignore -->
-  <div data="section-context-menu-{{section.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+  <div data="section-context-menu-{{section.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow dark:bg-gray-700">
     {% include 'book/components/section_context_menu.html' %}
   </div>
 </div>

app/templates/book/components/sub_collection_preview_content.html

@@ -20,7 +20,7 @@
     <div class="flex w-full mb-1 dark:text-gray-100 flex-col">
       <!-- prettier-ignore -->
       <a  href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.id)}}">
-                <p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}</p></a>
+                <p id="section-{{section.label}}" class="my-3">{{ section.label }}</p></a>
       {% if not section.active_interpretations %}
       <p class="ml-3 my-3 italic text-sm">This section is empty</p>
       {% else %}
@@ -171,7 +171,7 @@
 <!-- prettier-ignore -->
 <a href="{{url_for('book.interpretation_view', book_id=book.id, section_id=section.id)}}">
     <!-- prettier-ignore -->
-    <p id="section-{{section.label}}" class="truncate my-3"> {{ section.label }} </p></a >
+    <p id="section-{{section.label}}" class="my-3"> {{ section.label }} </p></a >
 {% if not section.active_interpretations %}
 <p class="ml-3 my-3 italic text-sm">This section is empty</p>
 {% else %}

app/templates/book/components/sub_collection_tab_content.html

@@ -35,11 +35,11 @@
         <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
       </button>
       <!-- prettier-ignore -->
-      <button href="#collection-{{sub_collection.label}}" id="accordion-nested-collapse-heading-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="text-black dark:text-white">
+      <button href="#collection-{{sub_collection.label}}" id="accordion-nested-collapse-heading-{{sub_collection.parent.id}}-{{sub_collection.id}}" class="w-full text-black dark:text-white">
         <form id="rename-sub-collection-label-form-{{sub_collection.id}}" data-book-id="{{book.id}}" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
           {{ form_hidden_tag() }}
           <!-- prettier-ignore -->
-          <input class="bg-inherit border-none" value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{sub_collection.id}}" placeholder="Sub collection label" required readonly />
+          <input class="w-full truncate bg-inherit border-none" value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{sub_collection.id}}" placeholder="Sub collection label" required readonly />
           <button name="submit" type="submit"></button>
         </form>
       </button>
@@ -47,7 +47,7 @@
     <!-- prettier-ignore -->
     <svg id="dropdownSubCollectionContextButton{{sub_collection.id}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
     <!-- prettier-ignore -->
-    <div data="sub-collection-context-menu-{{sub_collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+    <div data="sub-collection-context-menu-{{sub_collection.id}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow dark:bg-gray-700">
      {% include 'book/components/sub_collection_context_menu.html' %}
     </div>
     <!-- prettier-ignore -->

app/templates/book/interpretation_view.html

@@ -217,7 +217,7 @@
       <!-- prettier-ignore -->
       <svg aria-hidden="true" class="w-5 h-5 mr-2 -ml-1 rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
       <div class="truncate flex flex-col ml-3 w-full">
-        <p class="p-3 truncate">{{ book.label }}</p>
+        <p class="p-3 text-right truncate">{{ book.label }}</p>
         <p class="p-3 text-right truncate">{{ previous_section.label }}</p>
       </div>
     </a>
@@ -233,7 +233,7 @@
       type="button"
       class="w-1/5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
       <div class="truncate flex flex-col w-full">
-        <p class="p-3 truncate">{{ book.label }}</p>
+        <p class="p-3 text-left truncate">{{ book.label }}</p>
         <p class="p-3 text-left truncate">{{ next_section.label }}</p>
       </div>
       <svg

src/styles.css

@@ -7,6 +7,7 @@
 
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
+  height: 5px;
   width: 5px;
 }