Settings page UI improvements (#495)

* fix: UI fixes for "Settings" page on mobile

* Critical to the Rabbit!

---------

Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>

app/views/recurring_transactions/index.html.erb

@@ -1,8 +1,17 @@
-<div class="space-y-4 pb-20 flex flex-col">
+<div class="space-y-4 flex flex-col">
   <header class="flex justify-between items-center text-primary font-medium">
     <h1 class="text-xl"><%= t("recurring_transactions.title") %></h1>
     <div class="flex items-center gap-2">
-      <% unless @family.recurring_transactions_disabled? %>
+      <% unless @family.recurring_transactions_disabled? %>        
+        <%= render DS::Menu.new do |menu| %>
+          <% menu.with_item(
+              variant: "button",
+              text: t("recurring_transactions.cleanup_stale"),
+              href: cleanup_recurring_transactions_path,
+              method: :post,
+              icon: "trash-2") %>
+        <% end %>
+
         <%= render DS::Link.new(
           text: t("recurring_transactions.identify_patterns"),
           icon: "search",
@@ -10,13 +19,6 @@
           href: identify_recurring_transactions_path,
           method: :post
         ) %>
-        <%= render DS::Link.new(
-          text: t("recurring_transactions.cleanup_stale"),
-          icon: "trash-2",
-          variant: "outline",
-          href: cleanup_recurring_transactions_path,
-          method: :post
-        ) %>
       <% end %>
     </div>
   </header>

app/views/settings/_settings_nav.html.erb

@@ -81,7 +81,7 @@ nav_sections = [
       <% end %>
     </section>
   </nav>
-  <nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav" data-controller="preserve-scroll scroll-on-connect">
+  <nav class="space-y-4 overflow-y-auto md:hidden no-scrollbar" id="mobile-settings-nav" data-controller="preserve-scroll scroll-on-connect">
     <ul class="flex space-y-1">
       <li>
         <%= render DS::Link.new(

app/views/settings/hostings/_openai_settings.html.erb

@@ -11,6 +11,7 @@
   <%= styled_form_with model: Setting.new,
                        url: settings_hosting_path,
                        method: :patch,
+                       class: "space-y-4",
                        data: {
                          controller: "auto-submit-form",
                          "auto-submit-form-trigger-event-value": "blur"

app/views/settings/llm_usages/show.html.erb

@@ -6,16 +6,16 @@
 
   <!-- Date Range Filter -->
   <div class="mb-6">
-    <%= form_with url: settings_llm_usage_path, method: :get, class: "flex gap-4 items-end" do |f| %>
-      <div>
+    <%= form_with url: settings_llm_usage_path, method: :get, class: "flex gap-4 items-end flex-wrap" do |f| %>
+      <div class="w-full md:w-auto">
         <%= f.label :start_date, "Start Date", class: "block text-sm font-medium text-primary mb-1" %>
-        <%= f.date_field :start_date, value: @start_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
+        <%= f.date_field :start_date, value: @start_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary w-full" %>
       </div>
-      <div>
+      <div class="w-full md:w-auto">
         <%= f.label :end_date, "End Date", class: "block text-sm font-medium text-primary mb-1" %>
-        <%= f.date_field :end_date, value: @end_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
+        <%= f.date_field :end_date, value: @end_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary w-full" %>
       </div>
-      <%= render DS::Button.new(variant: :secondary, size: :md, type: "submit", text: "Filter") %>
+      <%= render DS::Button.new(variant: :primary, size: :md, type: "submit", text: "Filter", class: "md:w-auto w-full justify-center") %>
     <% end %>
   </div>