From 602033ebe5317d310ffb9179146b8bf4952dba35 Mon Sep 17 00:00:00 2001
From: Joshua Bachmeier <joshua@bachmeier.cc>
Date: Sat, 30 Dec 2023 18:32:00 +0100
Subject: [PATCH] Improve line breaking in contra account selection

Adds custom rendering functions to allow word breaks at colons (subaccount
separators)

Fixes #40
---
 src/gnucash_web/templates/forms.j2 | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/gnucash_web/templates/forms.j2 b/src/gnucash_web/templates/forms.j2
index 03dda61..b20bec7 100644
--- a/src/gnucash_web/templates/forms.j2
+++ b/src/gnucash_web/templates/forms.j2
@@ -65,13 +65,20 @@
             Select an account to transfer money to / from
           </div>
           <script>
+            function renderAccountNameBreakable(divClass, text) {
+              return "<div class=\""+divClass+"\">"+text.replaceAll(":", ":<wbr>")+"</div>";
+            }
             document.addEventListener("DOMContentLoaded", function() {
               $("select#{{ id }}_transaction-contra_account_name").removeClass("form-select");
               $("select#{{ id }}_transaction-contra_account_name").selectize({
                 maxItems: 1,
                 items: ["{{ config.PRESELECTED_CONTRA_ACCOUNT }}"],
+                render: {
+                  item: function(contra_account, escape) { return renderAccountNameBreakable("item", contra_account.text) },
+                  option: function(contra_account, escape) { return renderAccountNameBreakable("option", contra_account.text) },
+                },
                 onType: function(text) {
-                  // Workaround for https://github.com/selectize/selectize.js/issues/113
+                  {# Workaround for https://github.com/selectize/selectize.js/issues/113 #}
                   if (text.length <= 1) {
                     this.clear();
                   }