UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation

[shauryag2002]

Description:

This update resolves three UI/UX issues:

• Scroll Behavior on Data Fetch:

  • Current Behavior: When scrolling up, the loading skeleton appears, and the component automatically scrolls back to the bottom.
  • Fixed Behavior: The Loading... appears without forcing the component to scroll to the bottom.
    

• Resizable Input Text Area Overflow:

  • Current Behavior: The input text area can be expanded infinitely, causing layout overflow.
  • 
  • Fixed Behavior: The text area now has a height limit, preventing overflow.
  • 

• Unresponsive User Avatar and Username:

  • Current Behavior: Clicking the user avatar or username does nothing.
  • Fixed Behavior: Clicking the user avatar or username now correctly navigates to the user's profile.
    

To Reproduce:

• Go to Encounters tab.
• Go to any one of users by clicking View Details.
• Then, Go to notes tab

1. Scroll Behavior:

   • Go to the data fetch component.
   • Scroll up and observe the loading skeleton.
   • Before: Scroll resets to the bottom.
   • After Fix: Scroll remains in position.

2. Text Area Overflow:

   • Navigate to the notes input section.
   • Expand the input text area.
   • Before: The area expands infinitely.
   • After Fix: The area has a height limit.

3. User Profile Navigation:

   • Click on the user avatar or username.
   • Before: No action occurs.
   • After Fix: Redirects to the user profile.

Expected Behavior:

• The component does not auto-scroll on data fetch.
• The text area has a maximum height limit.
• Clicking the avatar or username redirects to the user profile.

Environment:

• OS: Windows 11
• Browser: Microsoft Edge
• Version: 131.0.2903.146

[shauryag2002]

I am working on this issue.

[rajku-dev]

Partial Duplicate of #9842