Skip to content

VSN-2003 : Representant card responsivity issue resolved & Dynamising drawer width based on forms display to offer additional space to data inputs.

yassine.elazami a demandé de fusionner VSN-2003 vers develop

VSN-2003: Representant Card Responsivity Issue Resolved & Dynamic Drawer Width Adjustment to Enhance Form Usability

Introduction

This merge request delivers a comprehensive update to the drawer layout system and the representant form responsivity.
The goal is to provide a more adaptive and user-friendly interface by dynamically adjusting the drawer width based on the active form, ensuring sufficient space for data input while maintaining a coherent layout across views.
In parallel, it resolves the long-standing responsivity issues observed in the representant card when switching between different preparation modes.

The implementation touches the drawer container, form components, list views, tabs hook, and representant UI logic to build a consistent and extensible layout management mechanism.

Detailed Breakdown of Changes

1. Drawer Width State Management

feat(drawer): Drawer width state

  • Replaced the previously fixed drawer width constant with a dedicated state variable.
  • This enables updating the width dynamically from any child component or hook.

refactor(drawer): Metrics propagation

  • Propagated the drawer width state to all components requiring layout recalculation.
  • Ensures that the width changes remain synchronized across the entire UI tree.

2. Enhancements to Form Components

feat(form): Defining width setter

  • Introduced a new form property dedicated to receiving the drawer width setter.
  • Allows the passenger form to request additional space (or reduce it) depending on contextual needs.

feat(width): Drawer width change

  • Adjusted the base drawer width to a smaller value to align with updated UI structure.
  • Offers an improved balance between the form area and surrounding context.

3. Representant Form & Card Responsiveness

feat(representant): Preparation flag integration

  • Extended the representant form to accept a preparation flag, enabling state-dependent adjustments.

refactor(representant form): Responsive card display

  • Updated the representant card to dynamically switch between:
    • Full-width display (when preparation mode requires broader input fields)
    • Half-width display (when space can be conserved)
  • This resolves a long-standing UI inconsistency when displaying representant data for prepared passengers.

4. Propagation of New Layout Controls

feat(invocation): Passing props

  • Propagated setDrawerWidth from the list view to the forms.
  • Forwarded the preparation flag from the usager form to all dependent components.

feat(view): Drawer width reinitialization

  • Ensured that drawer width is restored to default when navigating back to the usager list view.
  • Eliminates side effects from previous form interactions.

5. Tabs Hook & Dynamic Behavior

feat(tabs hook): Adding props type

  • Introduced a typed props interface for the tabs hook to securely transmit drawer width controls.
  • Provides better structural clarity and reduces error risk when interacting with the drawer container.

feat(tabs): Closure & width changing

  • Linked tab closure events with width adjustment requests.
  • Ensures that drawer width is reset or resized appropriately when switching tabs or closing them.

Functional Impact

  • The drawer system is now fully dynamic, allowing any component or view to adjust layout constraints seamlessly.
  • The representant card no longer suffers from width inconsistencies and adapts correctly to preparation states.
  • Width adjustment logic is centralized, consistent, and easily extendable for future UI needs.
  • The changes significantly improve user experience by providing more readable forms and eliminating cramped UI scenarios.

Architectural Improvements

  • Introduced better separation of concerns through:
    • Dedicated props types
    • Centralized state management
    • Cleaner propagation patterns
  • Prepared the layout system for future enhancements such as:
    • Multi-form adaptive layouts
    • Context-aware drawer behavior
    • More flexible UI scaling logic

Testing & Validation

  • Verified width changes when transitioning between:
    • Passenger form
    • Representant form
    • Tabs switching
    • Returning to list view
  • Validated correct responsivity of representant card in both preparation and non-preparation contexts.
  • Checked interaction of all updated props and verified no regressions in existing form layouts.
  • Confirmed that drawer width resets correctly and without flickering.

Conclusion

This MR solidifies the UI responsiveness and layout flexibility of the application.
It introduces a dependable, scalable mechanism for dynamic drawer width management and resolves existing responsivity issues in the representant form, ultimately providing a more comfortable and efficient user experience.

Closes VSN-2003

Rapports de requête de fusion