some ui fixes

1 files changed, 9 insertions, 7 deletions

diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index 404e25619..5cdb47a0c 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -17,7 +17,7 @@
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
-import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
+import { doAutoFocus, RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 import { State } from "./index.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
@@ -57,7 +57,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
               <th scope="col" class="pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Date`}</th>
               <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Amount`}</th>
               <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Counterpart`}</th>
-              <th scope="col" class="pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Subject`}</th>
+              <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Subject`}</th>
             </tr>
           </thead>
           <tbody>
@@ -70,10 +70,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                 </tr>
                 {txs.map(item => {
                   const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss")
-                  const amount = <Fragment>
-                    { }
-                  </Fragment>
-                  return (<tr key={idx}>
+                  return (<tr key={idx} class="border-b border-gray-200 last:border-none">
                     <td class="relative py-2 pl-2 pr-2 text-sm ">
                       <div class="font-medium text-gray-900">{time}</div>
                       <dl class="font-normal sm:hidden">
@@ -91,6 +88,11 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                         <dd class="mt-1 truncate text-gray-500 sm:hidden">
                           {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart}
                         </dd>
+                        <dd class="mt-1 text-gray-500 sm:hidden" >
+                          <pre class="break-words w-56 whitespace-break-spaces p-2 rounded-md mx-auto my-2 bg-gray-100">
+                          {item.subject}
+                          </pre>
+                        </dd>
                       </dl>
                     </td>
                     <td data-negative={item.negative ? "true" : "false"}
@@ -101,7 +103,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                       )}
                     </td>
                     <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td>
-                    <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td>
+                    <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td>
                   </tr>)
                 })}
               </Fragment>