feat: first batch of work

app/templates/monthly_overview/fragments/list.html

@@ -6,8 +6,8 @@
   {% for x in transactions_by_date %}
     <div id="{{ x.grouper|slugify }}" class="transactions-divider"
          _="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
-      <div class="tw:mt-3 tw:mb-1 tw:w-full tw:text-base tw:border-b tw:border-b-base-content/30 transactions-divider-title">
-        <a class="tw:no-underline tw:inline-block tw:w-full"
+      <div class="mt-3 mb-1 w-full text-base border-b border-b-base-content/30 transactions-divider-title">
+        <a class="no-underline inline-block w-full"
            role="button"
            data-bs-toggle="collapse"
            data-bs-target="#c-{{ x.grouper|slugify }}-collapse"
@@ -17,7 +17,7 @@
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse transactions-divider-collapse" id="c-{{ x.grouper|slugify }}-collapse"
+      <div class="collapse transactions-divider-collapse overflow-visible" id="c-{{ x.grouper|slugify }}-collapse"
            _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
               on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
               on htmx:afterSettle from #transactions or toggle
@@ -32,7 +32,7 @@
               on show
                 add .show to me
                 set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true">
-        <div class="tw:flex tw:flex-col">
+        <div class="flex flex-col">
         {% for transaction in x.list %}
           <c-transaction.item
             :transaction="transaction"></c-transaction.item>