[BUG] Account Buttons Text Getting Squished

[Psypher1]

Please confirm the following

• I checked the current issues for duplicate problems

Describe the bug

Add Income and Add Expense buttons in the wallets don't render the text correctly. It's either cut out or makes the button look strange.

To Reproduce

1. Create an account
2. Add income/expense from that accound

Expected behavior

The buttons should look the same as the rest of the app

Screenshots

No response

Smartphone

Samsung Galaxy S10 Plus

Additional context

No response

[sebesti0n]

Hey @Psypher1 i want to work on this, Please assign me this.

[Psypher1]

Hey @Psypher1 i want to work on this, Please assign me this.

I don't think I have the permissions to assign people

[sebesti0n]

okay

[sebesti0n]

@ILIYANGERMANOV please assign me this

[ILIYANGERMANOV]

@sebesti0n say the "magic words" from CONTRIBUTING instructions in the repo, it's fully automated

[mokhtarmoustafa]

I'm on it

[ivywallet]

Thank you for your interest @mokhtarmoustafa! 🎉
Issue #2851 is assigned to you. You can work on it! ✅

If you don't want to work on it now, please unassign yourself so other contributors can take it.

Also, make sure to read our Contribution Guidelines.

[mokhtarmoustafa]

@Psypher1 what is the device that you used because everything is well from my side, look the attached image

[Psypher1]

@Psypher1 what is the device that you used because everything is well from my side, look the attached image

Samsung Galaxy S10 Plus

[Rick-AB]

@ILIYANGERMANOV as this issue is device dependent, one solution might be to have an autoscaling text composable that fits in its container with the set padding.

[ILIYANGERMANOV]

@ILIYANGERMANOV as this issue is device dependent, one solution might be to have an autoscaling text composable that fits in its container with the set padding.

We need to reduce paddings probably

[TanishMoral11]

I'm on it

[ivywallet]

⚠️ Hey @TanishMoral11, this issue is already taken by @mokhtarmoustafa.
Do not start working on it!
Please, pick another one.

Also, make sure to read our Contribution Guidelines.

[BruceSuperProgramer]

I'm on it

[ivywallet]

Thank you for your interest @BruceSuperProgramer! 🎉
Issue #2851 is assigned to you. You can work on it! ✅

If you don't want to work on it now, please un-assign yourself so other contributors can take it.

Also, make sure to read our Contribution Guidelines.

[BruceSuperProgramer]

I am able to reproduce this issue continue working on it tmr.

[BruceSuperProgramer]

The issue occurs when the user selects a larger font size in their device settings, causing text misalignment across multiple screens. It’s not limited to just one screen; several screens exhibit the same problem when the default font size is too large. Should I adjust the UI styling to accommodate larger fonts, or disable font scaling in the app to prevent it from being affected by the user’s default font size settings? @ILIYANGERMANOV

[ILIYANGERMANOV]

Hi, just fix the UI scaling on the screen where this bug is reported. The fix shouldn't break the UI for normal device with normal font

[BruceSuperProgramer]

Hi, just fix the UI scaling on the screen where this bug is reported. The fix shouldn't break the UI for normal device with normal font

The core issue isn’t the individual text or button, but rather how to handle fontSize consistently across the entire app when a user has large font settings enabled on their device.

This is not a matter of fixing specific areas one by one but requires a solution that addresses the entire app. For example, the text inside the 'Add Income' button is almost overflowing the button's space because the larger font setting causes the text to nearly break into two lines. Similarly, in the 'Add Expense' button, the text already wraps to two lines since it can’t fit on one. It’s not possible to maintain the current text size and ensure it stays on one line—it simply won’t fit."

I do not know how to fix it at moment could any one provide me some guidance or please unassign me from this task so others could pick up.

[ILIYANGERMANOV]

There aew couple of ways:

1. Make UIs scaleable and scrollable
2. Use provide LocalDensity.current with upper bounded font scale

The issue with this one is that it happens on normal font size setting on some devices. That annoys users

[sahishnu111]

“I am new to this, but I would like to contribute to resolving this issue. May I give it a try?”

[ILIYANGERMANOV]

https://github.com/Ivy-Apps/ivy-wallet/blob/main/CONTRIBUTING.md

[sahishnu111]

Thank you for your response. I have cloned the repository and attempted to replicate the issue as described. However, I am not encountering any issues on my Android emulator. Here are the details of my setup:

• Device Skin: SAMSUNG S10 (official website)
• API Level: 31
• Android Version: 12 (as Samsung stopped support for this device after this update)

Additionally, I used the Layout Inspector to investigate the issue further.
Could you assign this work for me, so I can look more into this issue.

[ILIYANGERMANOV]

@sahishnu111 increase font size from settings and pick a smaller emulator device

[sahishnu111]

Thank you for your feedback. Based on the information provided, I was able to recreate a similar issue within the app. However, the problem does not occur with the same button but in different areas. Specifically, it becomes difficult to click buttons, and the alignment changes unexpectedly.
After increasing the font size more than 50% to 60% this started to happen

[sahishnu111]

@ILIYANGERMANOV sir , can i work on this issue

[Mj-br]

Hi @sahishnu111 ! If you want to work on this just say the "magic words" from CONTRIBUTING instructions in the repo, it's fully automated!