fix: transaction UI padding and mobile selection bar position (#847)

* style: adjust the bottom position of the transaction selection bar and remove unnecessary padding from transaction forms

* fix: prevent overlap with the navbar in PWA mode

* fix: prevent selection bar overlap with navbar in PWA mode

* Update _selection_bar.html.erb

Signed-off-by: Number Eight <55629655+CylonN8@users.noreply.github.com>

* Update _selection_bar.html.erb

Signed-off-by: Number Eight <55629655+CylonN8@users.noreply.github.com>

---------

Signed-off-by: Number Eight <55629655+CylonN8@users.noreply.github.com>

app/views/entries/_selection_bar.html.erb

@@ -1,4 +1,4 @@
-<div class="fixed bottom-30 md:bottom-6 z-10 flex items-center justify-between rounded-xl bg-surface-inset border-secondary shadow-border-xs px-4 text-sm text-primary md:w-[420px] w-[90%] py-1.5">
+<div class="fixed bottom-[calc(5rem_+_env(safe-area-inset-bottom))] md:bottom-6 z-50 flex items-center justify-between rounded-xl bg-surface-inset border-secondary shadow-border-xs px-4 text-sm text-primary md:w-[420px] w-[90%] py-1.5">
   <div class="flex items-center gap-2">
     <%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %>
 

app/views/transactions/_selection_bar.html.erb

@@ -1,4 +1,4 @@
-<div class="fixed bottom-30 md:bottom-6 z-10 flex items-center justify-between rounded-xl bg-surface-inset border-secondary shadow-border-xs px-4 text-sm text-primary md:w-[420px] w-[90%] py-1.5">
+<div class="fixed bottom-[calc(5rem_+_env(safe-area-inset-bottom))] md:bottom-6 z-50 flex items-center justify-between rounded-xl bg-surface-inset border-secondary shadow-border-xs px-4 text-sm text-primary md:w-[420px] w-[90%] py-1.5">
   <div class="flex items-center gap-2">
     <%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %>
 

app/views/transactions/bulk_updates/new.html.erb

@@ -5,9 +5,7 @@
     <%= styled_form_with url: transactions_bulk_update_path, scope: "bulk_update", class: "h-full flex flex-col justify-between gap-4", data: { turbo_frame: "_top" } do |form| %>
       <div class="space-y-4">
         <%= render DS::Disclosure.new(title: "Overview", open: true) do %>
-          <div class="pb-6 space-y-2">
+          <%= form.date_field :date, label: "Date", max: Date.current %>
-            <%= form.date_field :date, label: "Date", max: Date.current %>
-          </div>
         <% end %>
 
         <%= render DS::Disclosure.new(title: "Transactions", open: true) do %>

app/views/transactions/show.html.erb

@@ -48,7 +48,7 @@
     <%= render "entries/protection_indicator", entry: @entry, unlock_path: unlock_transaction_path(@entry.transaction) %>
 
     <% dialog.with_section(title: t(".overview"), open: true) do %>
-      <div class="pb-4">
+      <div>
         <%= styled_form_with model: @entry,
               url: transaction_path(@entry),
               class: "space-y-2",
@@ -95,49 +95,47 @@
     <% end %>
 
     <% dialog.with_section(title: t(".details")) do %>
-      <div class="pb-4">
+      <%= styled_form_with model: @entry,
-        <%= styled_form_with model: @entry,
+            url: transaction_path(@entry),
-              url: transaction_path(@entry),
+            class: "space-y-2",
-              class: "space-y-2",
+            data: { controller: "auto-submit-form" } do |f| %>
-              data: { controller: "auto-submit-form" } do |f| %>
+        <% unless @entry.transaction.transfer? %>
-          <% unless @entry.transaction.transfer? %>
+          <%= f.select :account,
-            <%= f.select :account,
+              options_for_select(
-                options_for_select(
+                Current.family.accounts.alphabetically.pluck(:name, :id),
-                  Current.family.accounts.alphabetically.pluck(:name, :id),
+                @entry.account_id
-                  @entry.account_id
+              ),
-                ),
+              { label: t(".account_label") },
-                { label: t(".account_label") },
+              { disabled: true } %>
-                { disabled: true } %>
 
-            <%= f.fields_for :entryable do |ef| %>
+          <%= f.fields_for :entryable do |ef| %>
 
-              <%= ef.collection_select :merchant_id,
+            <%= ef.collection_select :merchant_id,
-                    Current.family.available_merchants.alphabetically,
+                  Current.family.available_merchants.alphabetically,
-                    :id, :name,
+                  :id, :name,
-                    { include_blank: t(".none"),
+                  { include_blank: t(".none"),
-                      label: t(".merchant_label"),
+                    label: t(".merchant_label"),
-                      class: "text-subdued" },
+                    class: "text-subdued" },
-                    "data-auto-submit-form-target": "auto" %>
-
-              <%= ef.select :tag_ids,
-                    Current.family.tags.alphabetically.pluck(:name, :id),
-                    {
-                      include_blank: t(".none"),
-                      multiple: true,
-                      label:    t(".tags_label")
-                    },
-                    { "data-controller": "multi-select", "data-auto-submit-form-target": "auto" } %>
-            <% end %>
-          <% end %>
-
-          <%= f.text_area :notes,
-                  label: t(".note_label"),
-                  placeholder: t(".note_placeholder"),
-                  rows: 5,
                   "data-auto-submit-form-target": "auto" %>
 
+            <%= ef.select :tag_ids,
+                  Current.family.tags.alphabetically.pluck(:name, :id),
+                  {
+                    include_blank: t(".none"),
+                    multiple: true,
+                    label:    t(".tags_label")
+                  },
+                  { "data-controller": "multi-select", "data-auto-submit-form-target": "auto" } %>
+          <% end %>
         <% end %>
-      </div>
+
+        <%= f.text_area :notes,
+                label: t(".note_label"),
+                placeholder: t(".note_placeholder"),
+                rows: 5,
+                "data-auto-submit-form-target": "auto" %>
+
+      <% end %>
     <% end %>
 
     <% if (details = build_transaction_extra_details(@entry)) %>