github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-09 03:32:54 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

[PR #3445] [CLOSED] [WIP] Make the width of categories column in the budget view customizable #4856

New Issue
Closed
opened 2026-02-28 21:02:19 -06:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-02-28 21:02:19 -06:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/3445
Author: @EvidentlyCube
Created: 9/15/2024
Status: ❌ Closed

Base: master ← Head: configurable-categories-width

📝 Commits (6)

  • 25d5fe0 Make the width of categories column in the budget view customizable
  • 98dc88b Fix category width selection not properly resetting value when value can be correctly casted to an integer via parseInt() but it still contains erroneous letters.
  • 14fc8d7 Remove unused import
  • 2947f2d Add upcoming release note
  • a7c6483 Fix double subtraction of categories width in getNumPossibleMonths (the received width already had the categories width subtracted)
  • 7a5e6f6 Update screenshots

📊 Changes

21 files changed (+131 additions, -51 deletions)

View changed files

📝 packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-5-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-6-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/src/components/budget/BudgetPageHeader.tsx (+4 -1)
📝 packages/desktop-client/src/components/budget/BudgetTable.jsx (+2 -1)
📝 packages/desktop-client/src/components/budget/BudgetTotals.tsx (+4 -2)
📝 packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx (+5 -4)
📝 packages/desktop-client/src/components/budget/SidebarCategory.tsx (+4 -3)
📝 packages/desktop-client/src/components/budget/SidebarGroup.tsx (+4 -3)
📝 packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx (+4 -2)
📝 packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudget.tsx (+3 -1)
➕ packages/desktop-client/src/components/settings/Display.tsx (+68 -0)
📝 packages/desktop-client/src/components/settings/Format.tsx (+1 -17)
📝 packages/desktop-client/src/components/settings/Themes.tsx (+1 -17)
📝 packages/desktop-client/src/components/settings/UI.tsx (+22 -0)
📝 packages/desktop-client/src/components/settings/index.tsx (+2 -0)
📝 packages/loot-core/src/types/prefs.d.ts (+1 -0)

...and 1 more files

📄 Description

Background

It's the smallest deal breaker I ever had but after imported my nYNAB budgets I have a lot of categories which names don't fit in the available space on the budget view and in a lot of cases I can't shorten them and keep them meaningful enough for my needs:

image

What I've done

A new "Display" section in configuration - it supports values from 100 to 1024 (arbitrarily selected), gracefully handles incorrect input (resets to original value).
image

It should properly handle most UI elements (I've tried to find all the places that hardcoded the old width of 200 px):
image

Notes:

  • This is my first PR and I haven't even properly started using the application yet so there might be things I've missed
  • I wasn't exactly sure how to best handle not updating the pref with text values so used a temp variable and only actually update the setting on blur
  • I wasn't sure if local pref is the best place for this
  • I personally find this level of customization to lay somewhere between "basic" and "advanced" but I opted for the default settings because it seemed to fit neatly with theme and formatting

Finally, this does go a bit against the design strategy:

The goal of the UI is to be minimalistic [...] We are against adding a button/user setting for every little piece of UI (sizes, paddings, margins, etc.)

But at the same time the default 200 is awfully small, especially with upcoming i18n as many languages are much wider than English.

🔄 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/3445 **Author:** [@EvidentlyCube](https://github.com/EvidentlyCube) **Created:** 9/15/2024 **Status:** ❌ Closed **Base:** `master` ← **Head:** `configurable-categories-width` --- ### 📝 Commits (6) - [`25d5fe0`](https://github.com/actualbudget/actual/commit/25d5fe0046e62cf5235f429a5ebd7a9917396012) Make the width of categories column in the budget view customizable - [`98dc88b`](https://github.com/actualbudget/actual/commit/98dc88bf6a5b8afb8c3185ae9e7f9592e8acdd73) Fix category width selection not properly resetting value when value can be correctly casted to an integer via `parseInt()` but it still contains erroneous letters. - [`14fc8d7`](https://github.com/actualbudget/actual/commit/14fc8d727b23f90348f2f99164085765c0c0d930) Remove unused import - [`2947f2d`](https://github.com/actualbudget/actual/commit/2947f2d4999bf4a880e7998626508c966697aa43) Add upcoming release note - [`a7c6483`](https://github.com/actualbudget/actual/commit/a7c648363274d84a74c9e7674cf8779a063c22fa) Fix double subtraction of categories width in getNumPossibleMonths (the received `width` already had the categories width subtracted) - [`7a5e6f6`](https://github.com/actualbudget/actual/commit/7a5e6f62f6836eaf3e6ef23645c60fb3721e8c8c) Update screenshots ### 📊 Changes **21 files changed** (+131 additions, -51 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-5-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-6-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/src/components/budget/BudgetPageHeader.tsx` (+4 -1) 📝 `packages/desktop-client/src/components/budget/BudgetTable.jsx` (+2 -1) 📝 `packages/desktop-client/src/components/budget/BudgetTotals.tsx` (+4 -2) 📝 `packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx` (+5 -4) 📝 `packages/desktop-client/src/components/budget/SidebarCategory.tsx` (+4 -3) 📝 `packages/desktop-client/src/components/budget/SidebarGroup.tsx` (+4 -3) 📝 `packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx` (+4 -2) 📝 `packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudget.tsx` (+3 -1) ➕ `packages/desktop-client/src/components/settings/Display.tsx` (+68 -0) 📝 `packages/desktop-client/src/components/settings/Format.tsx` (+1 -17) 📝 `packages/desktop-client/src/components/settings/Themes.tsx` (+1 -17) 📝 `packages/desktop-client/src/components/settings/UI.tsx` (+22 -0) 📝 `packages/desktop-client/src/components/settings/index.tsx` (+2 -0) 📝 `packages/loot-core/src/types/prefs.d.ts` (+1 -0) _...and 1 more files_ </details> ### 📄 Description ## Background It's the smallest deal breaker I ever had but after imported my nYNAB budgets I have a lot of categories which names don't fit in the available space on the budget view and in a lot of cases I can't shorten them and keep them meaningful enough for my needs: ![image](https://github.com/user-attachments/assets/76083e00-5152-47f6-9b75-ff1dabaf31f7) ## What I've done **A new "Display" section in configuration** - it supports values from 100 to 1024 (arbitrarily selected), gracefully handles incorrect input (resets to original value). ![image](https://github.com/user-attachments/assets/cde57c59-08a1-46b9-97fd-5b27180b8238) It should properly handle most UI elements (I've tried to find all the places that hardcoded the old width of 200 px): ![image](https://github.com/user-attachments/assets/c90da096-fd30-47fd-8eee-a811513a65e3) ## Notes: * This is my first PR and I haven't even properly started using the application yet so there might be things I've missed * I wasn't exactly sure how to best handle not updating the pref with text values so used a temp variable and only actually update the setting on blur * I wasn't sure if local pref is the best place for this * I personally find this level of customization to lay somewhere between "basic" and "advanced" but I opted for the default settings because it seemed to fit neatly with theme and formatting Finally, this does go a bit against the design strategy: > The goal of the UI is to be minimalistic [...] We are against adding a button/user setting for every little piece of UI (sizes, paddings, margins, etc.) But at the same time the default 200 is awfully small, especially with upcoming i18n as many languages are much **wider** than English. --- <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-02-28 21:02:19 -06:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#4856
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?