[PR #5126] [MERGED] fix: missing table column on mobile devices #40202

Closed
opened 2026-04-23 13:05:41 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/5126
Author: @chaitanyya
Created: 6/8/2025
Status: Merged
Merged: 8/5/2025
Merged by: @matt-fidd

Base: masterHead: master


📝 Commits (6)

📊 Changes

98 files changed (+28 additions, -6 deletions)

View changed files

📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--14404-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--321fd-ed-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--4bb70-ed-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--589a6-the-page-header-shows-the-next-month-s-budget-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6ab37-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6dbdb-page-header-shows-the-previous-month-s-budget-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--7bd8f-the-page-header-shows-the-next-month-s-budget-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--884ac-the-page-header-shows-the-next-month-s-budget-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a79-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a85-ed-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--96ebb-page-header-shows-the-previous-month-s-budget-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--9e6aa-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bbde3-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bed18-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--ceb3a-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d270d-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d7184-page-header-shows-the-previous-month-s-budget-2-chromium-linux.png (+0 -0)

...and 78 more files

📄 Description

Enhances the mobile budget table's responsiveness by implementing AutoTextSize for better text scaling and adjusting the responsive breakpoint to provide a better user experience on smaller screens.

Changes Made

  1. Responsive Text Sizing: Replaced static Label components with AutoTextSize to automatically adjust font sizes based on available space
  2. Responsive Breakpoint: Reduced the 3-column layout threshold from 370px to 300px for better mobile experience

Visual Impact

Before After
Screenshot 2025-06-07 at 8 07 01 PM Screenshot 2025-06-07 at 8 06 32 PM

Test snapshots were updated to make sure they adapt to these visual changes.

done with workersio


🔄 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/5126 **Author:** [@chaitanyya](https://github.com/chaitanyya) **Created:** 6/8/2025 **Status:** ✅ Merged **Merged:** 8/5/2025 **Merged by:** [@matt-fidd](https://github.com/matt-fidd) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (6) - [`0a990a0`](https://github.com/actualbudget/actual/commit/0a990a0be9981b92e698779eb83ad92fb2014e64) fix: missing table column - [`31acaf9`](https://github.com/actualbudget/actual/commit/31acaf9d9862195d68581b53c88737140d9d6536) chore: better releasenote - [`68cdb96`](https://github.com/actualbudget/actual/commit/68cdb96f1b72eb174dd99ed0d168b6b4fa7452d9) chore: incorrect filename - [`2f38e66`](https://github.com/actualbudget/actual/commit/2f38e6625528d864c540316b413a532eea837ec0) Merge branch 'master' into master - [`848145c`](https://github.com/actualbudget/actual/commit/848145cb040a7575d2ab443eaa0517482ccf7073) Merge branch 'master' into master - [`3a0f591`](https://github.com/actualbudget/actual/commit/3a0f591f5200828a95257daa199e019e7c2d8877) Update VRT ### 📊 Changes **98 files changed** (+28 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-applies-budget-template-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--14404-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--321fd-ed-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--4bb70-ed-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--589a6-the-page-header-shows-the-next-month-s-budget-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6ab37-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--6dbdb-page-header-shows-the-previous-month-s-budget-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--7bd8f-the-page-header-shows-the-next-month-s-budget-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--884ac-the-page-header-shows-the-next-month-s-budget-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a79-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--94a85-ed-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--96ebb-page-header-shows-the-previous-month-s-budget-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--9e6aa-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bbde3-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--bed18-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--ceb3a-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d270d-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Envelope-checks-that-clicking--d7184-page-header-shows-the-previous-month-s-budget-2-chromium-linux.png` (+0 -0) _...and 78 more files_ </details> ### 📄 Description Enhances the mobile budget table's responsiveness by implementing `AutoTextSize` for better text scaling and adjusting the responsive breakpoint to provide a better user experience on smaller screens. ### Changes Made 1. **Responsive Text Sizing**: Replaced static `Label` components with `AutoTextSize` to automatically adjust font sizes based on available space 2. **Responsive Breakpoint**: Reduced the 3-column layout threshold from 370px to 300px for better mobile experience ### Visual Impact | Before | After | |--------|-------| | <img width="313" alt="Screenshot 2025-06-07 at 8 07 01 PM" src="https://github.com/user-attachments/assets/f32c3501-7a44-4d61-ba19-cfff19c72ba7" /> | <img width="312" alt="Screenshot 2025-06-07 at 8 06 32 PM" src="https://github.com/user-attachments/assets/ba46bdfd-41d5-4717-8b4f-9e69ee7047f6" /> | Test snapshots were updated to make sure they adapt to these visual changes. _done with workersio_ --- <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-04-23 13:05:41 -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#40202