From af024a89cb2f142a54d3e4523187adf59c315330 Mon Sep 17 00:00:00 2001
From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Date: Tue, 26 May 2026 09:56:42 +0200
Subject: [PATCH] fix: Avoid overlay in provider section on mobile (#1990)

* fix: Avoid overlay in provider section on mobile

* feat: Reduce gap between divs

* fix: keep all the elements inside a dedicated container to avoid accessibility issues with the summary node
---
 .../providers/_connection_row.html.erb        | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/views/settings/providers/_connection_row.html.erb b/app/views/settings/providers/_connection_row.html.erb
index 21cf30ebd..1102538e5 100644
--- a/app/views/settings/providers/_connection_row.html.erb
+++ b/app/views/settings/providers/_connection_row.html.erb
@@ -17,18 +17,24 @@
 <%= tag.details open: open,
                 class: "group bg-container shadow-border-xs rounded-xl #{border_class}",
                 data: details_data do %>
-  <summary class="flex items-center gap-3 min-h-15 px-4 py-3.5 cursor-pointer rounded-xl list-none [&::-webkit-details-marker]:hidden">
-    <%= icon "chevron-right", size: "sm", class: "!w-3.5 !h-3.5 text-secondary group-open:rotate-90 transition-transform" %>
-    <div class="flex items-center gap-2 flex-wrap min-w-0 flex-1">
-      <h3 class="text-sm font-medium text-primary"><%= entry[:title] %></h3>
-      <%= render "settings/providers/maturity_badge", label: maturity_lbl %>
-    </div>
-    <div class="flex items-center gap-2 shrink-0 group-open:hidden">
-      <% if meta.present? %>
-        <span class="text-xs text-subdued"><%= meta %></span>
-      <% end %>
-      <%= status_pill %>
-      <%= sync_action if sync_action %>
+  <summary class="min-h-15 px-4 py-3.5 cursor-pointer rounded-xl list-none [&::-webkit-details-marker]:hidden">
+    <div class="flex items-center gap-3">
+      <%= icon "chevron-right", size: "sm", class: "!w-3.5 !h-3.5 text-secondary group-open:rotate-90 transition-transform" %>
+      <div class="flex items-center flex-wrap gap-2 min-w-0 flex-1">
+        <div class="flex items-center gap-2 shrink-0 flex-1">
+          <h3 class="text-sm font-medium text-primary"><%= entry[:title] %></h3>
+          <%= render "settings/providers/maturity_badge", label: maturity_lbl %>
+        </div>
+        <div class="flex items-center gap-2 shrink-0 group-open:hidden">
+          <% if meta.present? %>
+            <span class="text-xs text-subdued"><%= meta %></span>
+          <% end %>
+          <%= status_pill %>
+        </div>
+      </div>
+      <div class="group-open:hidden">
+        <%= sync_action if sync_action %>
+      </div>
     </div>
   </summary>
   <div class="space-y-4 mt-4 px-4 pb-4">