From 3d32a45ffe8ab8306e61bd5fb654ff7d6a248588 Mon Sep 17 00:00:00 2001
From: Saku Laesvuori <saku@laesvuori.fi>
Date: Sat, 17 Jan 2026 19:46:17 +0200
Subject: [PATCH] Enable viewing elided transaction descriptions

---
 hledger-web/static/hledger.css       | 16 +++++++++++-
 hledger-web/templates/journal.hamlet | 39 +++++++++++++++-------------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/hledger-web/static/hledger.css b/hledger-web/static/hledger.css
index 72eee7fe0..58697cfff 100644
--- a/hledger-web/static/hledger.css
+++ b/hledger-web/static/hledger.css
@@ -206,7 +206,7 @@ ul {
     padding: 5px;
 }
 
-.transaction .title > * {
+.transaction-metarow summary > * {
     display: inline-block;
 }
 
@@ -271,11 +271,25 @@ ul {
     color: #888;
 }
 
+.title .transaction-payee {
+    display: inline;
+}
+
 .transaction .title .transaction-note {
     font-size: 1.3em;
     display: block;
 }
 
+details.elided-text summary {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+details[open].elided-text summary {
+    white-space: wrap;
+}
+
 .col-any-0 {
     width:0 !important;
     height:0 !important;
diff --git a/hledger-web/templates/journal.hamlet b/hledger-web/templates/journal.hamlet
index cf5114b1b..e65d4a22d 100644
--- a/hledger-web/templates/journal.hamlet
+++ b/hledger-web/templates/journal.hamlet
@@ -11,25 +11,28 @@ $if elem AddPermission perms
       <li .transaction ##{transactionFrag torig}>
         <div .title title="#{showTransaction torig}">
           $with (payee, note) <- payeeAndNoteFromDescription' $ tdescription torig
-            <time .date datetime="#{show (tdate torig)}" nowrap>
-              #{show (tdate torig)}
-            <div .status>
-              $case tstatus torig
-                $of Unmarked
-                  <div .status-unmarked title="Tarkistamaton" aria-label="Tarkistamaton">
-                $of Pending
-                  <div .status-pending title="Kesken" aria-label="Kesken">
-                $of Cleared
-                  <div .status-cleared title="Tarkistettu" aria-label="Tarkistettu">
-            $if not $ T.null $ tcode torig
-              <div .transaction-code>
-                (#{tcode torig})
-            $if not $ T.null $ T.strip payee
-              <div .transaction-payee>
-                #{textElideRight 60 payee}
+            <details .elided-text .transaction-metarow>
+              <summary>
+                <time .date datetime="#{show (tdate torig)}" nowrap>
+                  #{show (tdate torig)}
+                <div .status>
+                  $case tstatus torig
+                    $of Unmarked
+                      <div .status-unmarked title="Tarkistamaton" aria-label="Tarkistamaton">
+                    $of Pending
+                      <div .status-pending title="Kesken" aria-label="Kesken">
+                    $of Cleared
+                      <div .status-cleared title="Tarkistettu" aria-label="Tarkistettu">
+                $if not $ T.null $ tcode torig
+                  <div .transaction-code>
+                    (#{tcode torig})
+                $if not $ T.null $ T.strip payee
+                  <span .transaction-payee>
+                    #{payee}
             $if not $ T.null $ T.strip note
-              <div .transaction-note>
-                #{textElideRight 60 note}
+              <details .transaction-note .elided-text>
+                <summary>
+                  #{note}
 
           $if null $ filter isVisibleTag $ ttags torig
           $else