fix: Avoid overlay in provider section on mobile

[alessiocappa]

This PR addresses an overlay issue on mobile devices for connection rows in “Providers” settings.

Before	After

Summary by CodeRabbit

• Style
  • Improved the visual layout of provider connection displays through restructured arrangement and better spacing.
  • Enhanced the presentation of connection metadata, status indicators, and sync action controls for improved user experience.
  • Optimized how connection details are organized and displayed on the interface.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 54840fdf-02d1-4d96-868b-ab13d8079803

📥 Commits

Reviewing files that changed from the base of the PR and between d8a12ad and 5cb0730.

📒 Files selected for processing (1)

• app/views/settings/providers/_connection_row.html.erb

---

📝 Walkthrough

Walkthrough

The provider connection row template restructures its <summary> element with updated styling and reorganized flexbox layout. The sync_action rendering is now in a separate visibility container, while meta and status elements remain grouped. Summary classes are adjusted to add padding, sizing, and cursor styles while removing previous flex/container classes.

Changes

Provider Connection Row Summary Restructuring

Layer / File(s)	Summary
Summary element layout and visibility app/views/settings/providers/_connection_row.html.erb	The <summary> element's class list is updated to add padding, size, cursor, and marker-hiding styles. The internal flexbox layout is refactored to reorganize title/maturity and meta/status groupings. The sync_action is separated into its own group-open:hidden container for independent show/hide behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

mobile/PWA

Suggested reviewers

• jjmata

Poem

A layout dance, so neat and clean, 🎀
The summary bends—flex reigns supreme,
Sync actions hide when sections close,
While meta stands in ordered rows. 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing a mobile layout overlay issue in the provider connection row section by restructuring the flex layout.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jjmata]

The restructure looks correct. Moving sync_action into its own sibling div (at the same level as the inner content div, but outside it) prevents the action button from being squeezed between the title/badge row and the status pill on narrow screens.

One thing to verify: the sync_action div uses group-open:hidden to hide the action when the row is expanded, consistent with the original behavior. Make sure the sync button is still accessible in the expanded state via whatever mechanism handles it when the row is open (presumably the expanded body renders it again, or the button isn't needed when the row is open). If the sync action was only ever shown in the collapsed summary, this is fine.

---

Generated by Claude Code