[PR #5958] [MERGED] Adjust account panel borders and corners #55537

Closed
opened 2026-05-01 02:32:22 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/5958
Author: @MatissJanis
Created: 10/18/2025
Status: ✅ Merged
Merged: 10/19/2025
Merged by: @MatissJanis

Base: master ← Head: cursor/adjust-account-panel-borders-and-corners-6186


📝 Commits (8)

  • 5ffb4c5 Refactor AccountListItem to use border props and add isFirst/isLast
  • 113f52f Add release notes for PR #5958
  • 7b3247c Update VRT screenshots
  • e4c2ab5 Refactor Button component to accept custom styles and simplify AccountListItem rendering
  • c8d9a89 Refactor MobileForms component to streamline style handling
  • 7e75af8 Refactor Button and MobileForms components for improved style handling and organization
  • e9946cb Update VRT screenshots
  • 439070e Merge branch 'master' into cursor/adjust-account-panel-borders-and-corners-6186

📊 Changes

5 files changed (+27 additions, -3 deletions)

View changed files

📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx (+20 -3)
➕ upcoming-release-notes/5958.md (+7 -0)

📄 Description

Fixes mobile account list styling for grouped accounts.

Problem:
On mobile, adjacent account panels in the account list displayed a visual issue where:

  1. A 2px border appeared between them (due to each item having its own 1px border).
  2. Rounded corners on individual items created an undesirable visual effect where panels met.

Solution:

  • Removed individual borders and rounded corners from each AccountListItem.
  • Applied a single border and outer rounded corners to the AccountList container.
  • Added a 1px top border to each AccountListItem (except the first in a group) to create the desired 1px visual separation between items.

Result:
Account groups now appear as a single, cohesive panel with a clean 1px border between accounts and rounded corners applied only to the outer edges of the entire group.


Open in Cursor Open in Web


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/5958 **Author:** [@MatissJanis](https://github.com/MatissJanis) **Created:** 10/18/2025 **Status:** ✅ Merged **Merged:** 10/19/2025 **Merged by:** [@MatissJanis](https://github.com/MatissJanis) **Base:** `master` ← **Head:** `cursor/adjust-account-panel-borders-and-corners-6186` --- ### 📝 Commits (8) - [`5ffb4c5`](https://github.com/actualbudget/actual/commit/5ffb4c54f8e75fae99d42bb760faa4397f8a5553) Refactor AccountListItem to use border props and add isFirst/isLast - [`113f52f`](https://github.com/actualbudget/actual/commit/113f52fc928959235e3c02be1b49515c20f91451) Add release notes for PR #5958 - [`7b3247c`](https://github.com/actualbudget/actual/commit/7b3247ce5e815bd799397b8b259fa4e0cffb9ca8) Update VRT screenshots - [`e4c2ab5`](https://github.com/actualbudget/actual/commit/e4c2ab54c25156b246a83991a2d39358d8222508) Refactor Button component to accept custom styles and simplify AccountListItem rendering - [`c8d9a89`](https://github.com/actualbudget/actual/commit/c8d9a8913077a5a4ecf7c046163d733f2864add7) Refactor MobileForms component to streamline style handling - [`7e75af8`](https://github.com/actualbudget/actual/commit/7e75af8ec46cde8261f9f19febafc77d36a29e19) Refactor Button and MobileForms components for improved style handling and organization - [`e9946cb`](https://github.com/actualbudget/actual/commit/e9946cbd8d649738cf54e77ed40b61ee9c61ce4c) Update VRT screenshots - [`439070e`](https://github.com/actualbudget/actual/commit/439070e53c5d9a0697df09540e1b587382879186) Merge branch 'master' into cursor/adjust-account-panel-borders-and-corners-6186 ### 📊 Changes **5 files changed** (+27 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-the-accounts-page-and-asserts-on-balances-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx` (+20 -3) ➕ `upcoming-release-notes/5958.md` (+7 -0) </details> ### 📄 Description <!-- Thank you for submitting a pull request! Make sure to follow the instructions to write release notes for your PR — it should only take a minute or two: https://github.com/actualbudget/docs#writing-good-release-notes. Try running yarn generate:release:notes *before* pushing your PR for an interactive experience. --> Fixes mobile account list styling for grouped accounts. **Problem:** On mobile, adjacent account panels in the account list displayed a visual issue where: 1. A 2px border appeared between them (due to each item having its own 1px border). 2. Rounded corners on individual items created an undesirable visual effect where panels met. **Solution:** - Removed individual borders and rounded corners from each `AccountListItem`. - Applied a single border and outer rounded corners to the `AccountList` container. - Added a 1px top border to each `AccountListItem` (except the first in a group) to create the desired 1px visual separation between items. **Result:** Account groups now appear as a single, cohesive panel with a clean 1px border between accounts and rounded corners applied only to the outer edges of the entire group. --- <a href="https://cursor.com/background-agent?bcId=bc-49a9249e-83f2-4e3c-b44e-e78d81d99c94"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-cursor-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-cursor-light.svg"><img alt="Open in Cursor" src="https://cursor.com/open-in-cursor.svg"></picture></a>&nbsp;<a href="https://cursor.com/agents?id=bc-49a9249e-83f2-4e3c-b44e-e78d81d99c94"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-web-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-web-light.svg"><img alt="Open in Web" src="https://cursor.com/open-in-web.svg"></picture></a> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-05-01 02:32:22 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#55537