Enable viewing elided transaction descriptions

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;

hledger-web/templates/journal.hamlet

@@ -11,6 +11,8 @@ $if elem AddPermission perms
       <li .transaction ##{transactionFrag torig}>
         <div .title title="#{showTransaction torig}">
           $with (payee, note) <- payeeAndNoteFromDescription' $ tdescription torig
+            <details .elided-text .transaction-metarow>
+              <summary>
                 <time .date datetime="#{show (tdate torig)}" nowrap>
                   #{show (tdate torig)}
                 <div .status>
@@ -25,11 +27,12 @@ $if elem AddPermission perms
                   <div .transaction-code>
                     (#{tcode torig})
                 $if not $ T.null $ T.strip payee
-              <div .transaction-payee>
-                #{textElideRight 60 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