Description

This is a part of Bug 49: Fix and improve functionality of the app on phones. This PR only focuses on the dashboard and the related project pages. The Navigation Bar (Timer, dropdown) is NOT in the scope of this PR. It is fixed in a different PR.
In this PR, I improve the responsiveness of the following pages (not include the Navbar):
http://localhost:3000/dashboard
https://dev.highestgood.com/timelog/{id}
(Click on the Timebar of an individual in the Leaderboard)
https://dev.highestgood.com/wbs/tasks/{id}
(Click on the Task name in Tasks and Timelogs table in the dashboard)
https://dev.highestgood.com/projects
https://dev.highestgood.com/project/wbs/{id}
(Go to Other Links > Projects and then click on a project WBS)
https://dev.highestgood.com/wbs/tasks/{id}
(Go to Other Links > Projects and then click on a project WBS then click on a task)

Related PRS (if any):

This frontend PR is related to the development backend PR.

Main changes explained:

Dashboard

• Removed placeholder text on focus for adding Tangible Time, Intangible Time, and Weekly Summary to prevent overlapping text, addressing the issue noted by Jae in the task description.
• Made the Task table scrollable to ensure all content is accessible on smaller screens.
• Adjusted the layout when viewing a single task to display all relevant information.
• Resolved an issue where the "Back to Top" button overlapped the edit button when clicking on a member's time bar.
• Increased the height of the rich text input area for better usability on mobile devices.

Project

• Fixed overlapping between the project name and the "Return to Project List" button.
• Corrected the project page header layout in mobile view to ensure the "Add Project" button is visible.
• Made the WBS Task table and Project table scrollable and ensured all information is visible on smaller screens.
• Updated the WBS header and WBS tasks header layout for proper display on iPad and mobile screens.
• Ensured the "Back to Top" button does not obstruct any elements in the Project or WBS tables.
• Increased the height of the rich text input area for improved mobile interaction.
• Removed extra space in the WBS table

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin/owner user
5. Right click on the page > inspect > Toggle device toolbar so you can interact with the page like in a mobile phone
6. Go to dashboard

• Verify that Tasks and Timelogs table is expanded to the full screen.
• Verify that Tasks and Timelogs table is scrollable and you can see all user tasks.
• Verify that Leaderboard is scrollable horizontally
• In Leaderboard, click on the timebar of an individual. Verify that Back to Top button doesn't cover the Edit button
• In Team Member Tasks table, click on a task of a member. Verify that you can scroll horizontally to see all information of the task
• Click on Add Intangible Time Entry. Verify that the placeholder disappears when you click on the Rich Text input field
• Add Tangible Time Entry and Weekly Summary. Verify that the placeholder disappears when you click on the Rich Text input field.
• Verify that it is easy to add and edit Tangible and Intangible time entry in mobile

7. Go to Projects page by clicking on Other Links > Projects

• Verify that Add New Project button shows in mobile
• Verify that Back to Top button doesn't cover any information when you scroll to the bottom of the page.
• Click on WBS button
  • Verify that you can see the project name
  • Verify that the table is expanded to the full width
• Click on a task
  • Verify that you can see all the information of the table by scrolling right/left
  • Verify that all the buttons are visible, no button is cut off
  • Click on Edit and verify that all button is properly shown
    Review in Dark mode and Light mode

Screenshots or videos of changes:

Note:

:)