feat: Implement proportional symbol scaling for resizable output bar #2075

techwithmuzzu · 2025-12-04T15:43:25Z

Description

This PR implements a toggleable Expanded Output Bar feature. It allows users to scale up symbols and text in the output area for better visibility and accessibility. This is especially helpful for users with visual impairments or when building long, complex phrases.

Visual Demo

🎬 Click here to watch the Demo Video

Key Changes

Feature Logic & UI

Board.component.js: Implemented state logic to toggle the Board__output--expanded class.
Styling (Board.css):
- Implemented responsive vh units for font-size and width in the expanded state.
- Added smooth transitions to prevent layout snapping during resizing.
- Corrected internal flex structure of .Symbol to ensure images and labels remain vertically stacked and centered.
- Enabled white-space: normal in expanded mode to allow long labels to wrap correctly.

Settings & Persistence

Settings Integration: Added a new Switch in Settings > Display to enable/disable the expansion handle.
State Management: Updated App.reducer.js and ensured full state persistence via Redux-Persist.
Localization: Added necessary strings to Display.messages.js.

Unit Testing

App.reducer.test.js: Updated the initial state and synchronized mock data to maintain 100% test coverage and resolve CircleCI build failures.

Testing Performed

Verified that the expansion handle only appears when enabled in Settings.
Confirmed that the expanded state persists after a page reload.
Ran unit tests locally; all 7 reducer tests passed.
Verified layout stability and word-wrapping for long strings (e.g., "refrigerator").

CC: @martinbedouret @tomivm

tomivm · 2025-12-15T22:36:32Z

Hi!! its looks nice thanks for your contribution!
Please can you make the changes to pass the static code Analysis?
My only concern is that i am not sure if this feature should be activated in all the users.
Some users with less accuracy can have difficulties with this.
@martinbedouret do you think we should add a setting config for this?

techwithmuzzu · 2025-12-16T07:10:00Z

Hi @tomivm, thanks for the review!

I will fix the static code analysis (Codacy) errors and update the PR shortly.

Regarding the settings config: I see you asked @martinbedouret for his input. I will wait for the final decision from you both on whether that is needed before making changes to the logic.

techwithmuzzu · 2025-12-16T10:22:22Z

Hey @tomivm @martinbedouret ! 👋
Just a quick update: I’ve resolved all the static code analysis errors, so the Codacy check is passing now!
I have just re-arranged the code in Board.component.js because it was creating problem in linting.
Let me know if the code looks good to you now or if there is anything else you'd like me to adjust. I'm happy to help!

techwithmuzzu · 2025-12-18T07:44:17Z

@martinbedouret @tomivm — I’ve updated the PR description to include a demo video and the final technical details regarding Redux persistence and the fixed unit tests. Everything is now passing and ready for your final review!
🎬 Click here to watch the Demo Video

martinbedouret · 2025-12-18T15:14:10Z

Awesome work @techwithmuzzu

tomivm · 2025-12-18T21:17:10Z

src/components/Board/Board.css

-  min-height: 70px;
+  height: 155px;
+  max-height: 20%;
+  min-height: 90px;


Why you needed to modify the original output sizes and padding?

I modified these values to make sure the board layout stays consistent when the expansion is active. I'll clean up the code, remove the duplicate property, and try to keep the original padding values as much as possible.

tomivm · 2025-12-18T21:18:02Z

src/components/Board/Board.css

+
+.Board__output.Board__output--expanded {
+  height: 33vh;
+  max-height: 35vh;


Normally we don't trust in this units because dont work good in mobile browsers. Did you tested the implementation in a phone emulator or similar?
The ideal will be to use % instead of vh . If not i think vdh can work in mobiles browsers

That’s a very good point about the address bar issues on mobile. While testing in the emulator, I noticed that setting the height to 33vh (1/3 of the screen) actually makes the output bar feel too large on mobile devices. It leaves very little room for the input symbols, making them look disproportionately small.

I'll experiment with a smaller percentage (perhaps 20-25%) or a max-height constraint to ensure the output is readable without sacrificing the usability of the input board. I'll test these variations using dvh to see which provides the best balance on small screens.

tomivm · 2025-12-18T21:18:20Z

src/components/Board/Board.css

 }
+
+.Board__output.Board__output--expanded .SymbolOutput__value {
+  min-width: 20vh;


The ideal will be to use % instead of vh . If not i think vdh can work in mobiles browsers

Sure I will consider that I will try to implement it with % units if not dvh.

tomivm · 2025-12-18T21:20:04Z

src/components/Settings/Display/Display.messages.js

+  enableOutputExpansionDescription: {
+    id: 'display.enableOutputExpansionDescription',
+    defaultMessage:
+      'Show a toggle button to expand the output bar for better visibility.'


I think there is not a clear instruction to define new messages in the project sorry for that.
We need need to add this messages to src/translations/src/cboard.json file.

Thanks for letting me know! I wasn't aware of the central translation file. I’ll move the new message string to src/translations/src/cboard.json to keep it consistent with the project's structure.

tomivm · 2025-12-18T21:27:14Z

src/components/Board/Board.css

+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);


Is strict that you need to position this as absolute?.
Also maybe is simpler to have the output always big if user have the setting enabled. (Maybe this toogle is requiered in the issue i am not sure of this)

That is a great insight! I think I was so excited to add features for my first contribution that I didn't stop to think about it from a pure UX perspective. You're absolutely right—if the user has already enabled the feature in the settings, a second toggle on the board is redundant and adds unnecessary clutter.

I'll simplify the logic to make the output expanded by default when the setting is on. I'll also refactor the positioning using Flexbox to get rid of the absolute positioning as we discussed. Thanks for the guidance, I'm learning a lot through this review!

- Refactor output bar to use dvh units for better mobile stability. - Replace absolute positioning with Flexbox for image centering. - Add responsive media queries for mobile and tablet devices. - Increase expanded height to 25dvh (approx 1/4th screen). - Clean up redundant styles and comments. - Add unit tests for output expansion logic and update snapshots.

techwithmuzzu · 2025-12-23T16:11:26Z

Hi @tomivm @martinbedouret ,

Thanks again for the guidance! I have updated the PR to address all the review comments:

Mobile Responsiveness: I switched from vh to dvh (Dynamic Viewport Height) to prevent layout jumps on mobile browsers when the address bar toggles.
- Note on Height: I tested using 1/3rd of the screen, but it was too large and obscured the input symbols on smaller devices. I settled on 25dvh (approx 1/4th), which ensures the expanded output is cleanly visible while keeping the input grid fully accessible across all screen sizes.
Simplified UX: You were right about the redundancy—I removed the on-board toggle button. The expanded view is now controlled entirely by the "Expanded Output" switch in Settings, making the interface cleaner.
CSS Refactor: I removed the position: absolute styling and replaced it with Flexbox for cleaner, maintainable centering of the symbols.
Translations: I moved the new text strings into src/translations/src/cboard.json as requested.
Testing: I cleaned up the code and added Unit Tests to verify the expansion logic handles edge cases and settings correctly.

The build is green and ready for your review! 🚀

techwithmuzzu mentioned this pull request Dec 5, 2025

Add resizable Output bar window option for better user experience #2063

Open

tomivm requested a review from martinbedouret December 15, 2025 22:31

tomivm reviewed Dec 18, 2025

View reviewed changes

techwithmuzzu force-pushed the fix/resizable-output-scaling branch from 160583a to 3d88255 Compare December 23, 2025 16:07

Uh oh!

feat: Implement proportional symbol scaling for resizable output bar #2075

Are you sure you want to change the base?

feat: Implement proportional symbol scaling for resizable output bar #2075

Uh oh!

Conversation

techwithmuzzu commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Visual Demo

Key Changes

Feature Logic & UI

Settings & Persistence

Unit Testing

Testing Performed

Uh oh!

tomivm commented Dec 15, 2025

Uh oh!

techwithmuzzu commented Dec 16, 2025

Uh oh!

techwithmuzzu commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

techwithmuzzu commented Dec 18, 2025

Uh oh!

martinbedouret commented Dec 18, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

techwithmuzzu Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

techwithmuzzu commented Dec 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

techwithmuzzu commented Dec 4, 2025 •

edited

Loading

techwithmuzzu commented Dec 16, 2025 •

edited

Loading

techwithmuzzu Dec 19, 2025 •

edited

Loading