Skip to content

Conversation

@noeliaSD
Copy link
Contributor

@noeliaSD noeliaSD commented Nov 7, 2025

Closes #19219

Exploration Summary

This task was focused on exploring how different combinations of padding, font size, and screen scale affect the overall look and feel of the mobile app.
By exposing these three parameters through sliders, we were able to quickly test various density and text sizes in real time.

Key Findings

  • Certain combinations of smaller padding and font size noticeably improve readability and perceived balance in compact layouts.
  • Adjusting the QT_SCALE_FACTOR can further enhance visual proportions, especially on high-density displays — although it requires restarting the app.
  • This approach provides a fast and visual way to fine-tune the mobile experience before defining a new default visual baseline.

My current preferred setup:

Font size: S - M
Padding: XS
Scale: 90%–100%

This combination seems to provide the best balance between readability, spatial density, and overall visual comfort on mobile.

Next Steps

  • The current code is experimental and should not be merged into master.
  • Team members are encouraged to test and experiment with the three sliders to evaluate different scale setups:
    • Padding and Font size update live.
    • Screen scale requires restarting the app; after restart, the app must be launched manually.
  • Once consensus is reached on a visually optimal combination, we can define new default values in the theme and remove the experimental controls.

Notes

This exploration serves as a quick prototyping tool to better understand scaling dynamics on mobile and to identify improvements in perceived density, readability, and overall visual balance.

@noeliaSD noeliaSD self-assigned this Nov 7, 2025
@noeliaSD noeliaSD added do not merge spike Task to gather information and investigate labels Nov 7, 2025
@status-im-auto
Copy link
Member

status-im-auto commented Nov 7, 2025

Jenkins Builds

Click to see older builds (52)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 30dc49c #1 2025-11-07 12:44:05 ~8 min tests/nim 📄log
30dc49c #1 2025-11-07 12:45:11 ~9 min macos/aarch64-nwaku 📄log
✔️ 30dc49c #1 2025-11-07 12:49:04 ~13 min macos/aarch64 🍎dmg
✔️ 30dc49c #1 2025-11-07 12:52:52 ~17 min tests/ui 📄log
✖️ 30dc49c #1 2025-11-07 12:53:08 ~17 min linux/x86_64 📦tgz
✔️ 30dc49c #1 2025-11-07 12:53:12 ~18 min ios/aarch64 📱ipa
✖️ 30dc49c #1 2025-11-07 12:55:53 ~20 min windows/x86_64 💿exe
✔️ 30dc49c #1 2025-11-07 12:58:34 ~23 min linux/x86_64-nwaku 📦tgz
30dc49c #2 2025-11-07 13:23:02 ~5 min macos/aarch64-nwaku 📄log
✖️ 30dc49c #2 2025-11-07 13:34:28 ~16 min linux/x86_64 📦tgz
✖️ 30dc49c #2 2025-11-07 13:36:06 ~18 min windows/x86_64 💿exe
✖️ 30dc49c #3 2025-11-07 14:29:27 ~15 min linux/x86_64 📦tgz
✖️ 30dc49c #3 2025-11-07 14:34:36 ~20 min windows/x86_64 💿exe
✔️ 34c7c4c #2 2025-11-10 12:07:34 ~7 min tests/nim 📄log
✔️ 34c7c4c #2 2025-11-10 12:14:57 ~14 min ios/aarch64 📱ipa
✔️ 34c7c4c #2 2025-11-10 12:16:35 ~16 min tests/ui 📄log
✔️ 34c7c4c #4 2025-11-10 12:16:41 ~16 min linux/x86_64 📦tgz
✔️ 34c7c4c #2 2025-11-10 12:16:47 ~16 min macos/aarch64 🍎dmg
✔️ 34c7c4c #3 2025-11-10 12:19:22 ~19 min macos/aarch64-nwaku 🍎dmg
✔️ 34c7c4c #4 2025-11-10 12:21:00 ~20 min windows/x86_64 💿exe
✔️ 34c7c4c #2 2025-11-10 12:23:34 ~23 min linux/x86_64-nwaku 📦tgz
✔️ 34c7c4c pr19233 2025-11-10 12:33:27 ~16 min tests/e2e 📊rpt
✔️ 34c7c4c PR19233 2025-11-10 12:34:07 ~13 min tests/e2e-windows 📊rpt
✔️ d15b33c9 #1 2025-11-10 12:10:00 ~9 min android/arm64 🤖apk 📲
✔️ d7aeb8eb #2 2025-11-10 17:25:28 ~10 min android/arm64 🤖apk 📲
✔️ 43a3c755 #3 2025-11-11 17:27:14 ~11 min android/arm64 🤖apk 📲
✔️ d83970a3 #4 2025-11-12 17:37:56 ~21 min android/arm64 🤖apk 📲
✔️ 9d0c8af #3 2025-11-14 19:11:29 ~6 min tests/nim 📄log
✔️ 9d0c8af #3 2025-11-14 19:18:59 ~14 min ios/aarch64 📱ipa
✔️ 9d0c8af #3 2025-11-14 19:19:08 ~14 min tests/ui 📄log
✔️ 9d0c8af #3 2025-11-14 19:19:31 ~14 min macos/aarch64 🍎dmg
✔️ 9d0c8af #4 2025-11-14 19:20:01 ~14 min macos/aarch64-nwaku 🍎dmg
✔️ 3a24748a #6 2025-11-14 19:15:32 ~10 min android/arm64 🤖apk 📲
✔️ 54114c5 #4 2025-11-14 19:29:04 ~8 min tests/nim 📄log
✔️ 54114c5 #7 2025-11-14 19:31:00 ~10 min android/arm64 🤖apk 📲
54114c5 #5 2025-11-14 19:35:26 ~14 min macos/aarch64-nwaku 📄log
✔️ 54114c5 #4 2025-11-14 19:35:27 ~14 min ios/aarch64 📱ipa
✔️ 54114c5 #4 2025-11-14 19:36:21 ~15 min tests/ui 📄log
✔️ 54114c5 #4 2025-11-14 19:36:27 ~15 min macos/aarch64 🍎dmg
✔️ 54114c5 #4 2025-11-14 19:37:58 ~17 min linux/x86_64-nwaku 📦tgz
✔️ 54114c5 #6 2025-11-14 19:38:26 ~17 min linux/x86_64 📦tgz
✔️ 54114c5 #6 2025-11-14 19:45:00 ~23 min windows/x86_64 💿exe
✔️ 54114c5 pr19233 2025-11-14 19:55:23 ~16 min tests/e2e 📊rpt
✖️ 54114c5 PR19233 2025-11-14 19:56:59 ~11 min tests/e2e-windows 📊rpt
54114c5 #6 2025-11-17 09:45:11 ~6 min macos/aarch64-nwaku 📄log
✔️ 5f3eaa61 #8 2025-11-15 17:27:22 ~11 min android/arm64 🤖apk 📲
✔️ 4dda617 #5 2025-11-17 13:37:20 ~7 min tests/nim 📄log
4dda617 #7 2025-11-17 13:43:23 ~13 min macos/aarch64-nwaku 📄log
✔️ 4dda617 #5 2025-11-17 13:44:21 ~14 min ios/aarch64 📱ipa
✔️ 4dda617 #5 2025-11-17 13:44:25 ~14 min macos/aarch64 🍎dmg
✔️ 4dda617 #5 2025-11-17 13:45:47 ~16 min tests/ui 📄log
✔️ 4dda617 #7 2025-11-17 13:45:57 ~16 min linux/x86_64 📦tgz
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 7db5904f #9 2025-11-17 13:39:37 ~10 min android/arm64 🤖apk 📲
✔️ 5105cfc #10 2025-11-17 13:56:47 ~10 min android/arm64 🤖apk 📲
✔️ 5105cfc #6 2025-11-17 13:57:38 ~11 min tests/nim 📄log
✔️ 5105cfc #6 2025-11-17 14:00:15 ~13 min ios/aarch64 📱ipa
✔️ 5105cfc #6 2025-11-17 14:01:34 ~15 min macos/aarch64 🍎dmg
✔️ 5105cfc #8 2025-11-17 14:01:50 ~15 min macos/aarch64-nwaku 🍎dmg
✔️ 5105cfc #6 2025-11-17 14:04:01 ~17 min linux/x86_64-nwaku 📦tgz
✔️ 5105cfc #6 2025-11-17 14:06:08 ~19 min tests/ui 📄log
✖️ 5105cfc pr19233 2025-11-17 14:06:51 ~20 min tests/e2e 📊rpt
✔️ 5105cfc #8 2025-11-17 14:07:10 ~20 min linux/x86_64 📦tgz
✔️ 5105cfc #8 2025-11-17 14:16:03 ~29 min windows/x86_64 💿exe
✔️ 5105cfc pr19233 2025-11-17 14:25:30 ~18 min tests/e2e 📊rpt
✖️ 5105cfc PR19233 2025-11-17 14:29:48 ~13 min tests/e2e-windows 📊rpt

@sunleos
Copy link
Collaborator

sunleos commented Nov 10, 2025

Great job, @noeliaSD! looking forward to trying it out my Android device.

@noeliaSD noeliaSD force-pushed the feat/issue-scalingTest branch 2 times, most recently from 34c7c4c to 9d0c8af Compare November 14, 2025 19:04
@noeliaSD noeliaSD changed the title Exploration — UI Scaling (Padding / Font Size / Screen Scale) feat - UI Scaling (Padding / Font Size / Screen Scale) Nov 14, 2025
@noeliaSD
Copy link
Contributor Author

I modified the default values for small screen sizes as discussed:

  • Font size : S
  • Padding factor: XXS
  • Scaling: always to 100%

Padding sliders is kept on the Appearance View so that the user can decide
Scaling slider removed

Now the PR is ready to be merged!

@noeliaSD noeliaSD marked this pull request as ready for review November 14, 2025 19:08
@noeliaSD noeliaSD requested review from a team and caybro as code owners November 14, 2025 19:08
@noeliaSD noeliaSD removed do not merge spike Task to gather information and investigate labels Nov 14, 2025
@noeliaSD noeliaSD force-pushed the feat/issue-scalingTest branch from 9d0c8af to 54114c5 Compare November 14, 2025 19:20
Copy link
Member

@micieslak micieslak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean and working nice! Thx!

Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! Minor things below

@noeliaSD noeliaSD force-pushed the feat/issue-scalingTest branch from 54114c5 to 4dda617 Compare November 17, 2025 13:29
@noeliaSD
Copy link
Contributor Author

@alexjba, updated according to your suggestions!

…t scaling factors for short screens

- Adds a new padding factor slider to the `AppearanceView` to experiment with UI scaling behavior. This allows adjusting paddings dynamically for testing different density levels and layout responsiveness.

- Adds a new 100% screen scaling factor for mobile to provide a more natural and consistent visual baseline across devices.
Also updates the default UI configuration:

- Font size: set to S
- Padding: set to XXS

These defaults help achieve a cleaner, more compact layout while improving readability and overall UI density on mobile.
@noeliaSD noeliaSD force-pushed the feat/issue-scalingTest branch from 4dda617 to 5105cfc Compare November 17, 2025 13:46
Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

@noeliaSD noeliaSD merged commit c34ad26 into master Nov 17, 2025
12 of 13 checks passed
@noeliaSD noeliaSD deleted the feat/issue-scalingTest branch November 17, 2025 15:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI Scaling Exploration

5 participants