Enhance UI of Shifting Board

[Arzzam]

Proposed Changes

• Fixes Design Enhancement Scope in Shifting Board  #6636
• Fix the height of the container and fix the position of the headers in the shifting board
• Add Buttons and update the left and right scroll using that icon clicks

Shifting.Board.enhance.mov

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 22, 2024 4:05pm

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	9ace4d4
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/65ae920982085f00083b73e3
😎 Deploy Preview	https://deploy-preview-6956--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Pranshu1902]

@Arzzam there is still a scroll bar on the right side of the page (shown in blue in the image below)

And could you add a transparent circular effect on hover around the arrow? Kind of like the export button on the same page

Reference:

cc @rithviknishad

[Arzzam]

Yeah sure, I will add some circular effect for the buttons.
How can I fix the scroll bar. Can I proceed with a App router change?

Is these buttons are ok in hover state?

[Pranshu1902]

@rithviknishad could you confirm the method to remove the extra scroll bar on the extreme right of the page

[nihal467]

@Arzzam

• Keep the left and right arrow outside the board, where I marked the red circle
• If we are in the leftmost and there is no more left to go with the arrow, keep the left arrow hidden similarly to the rightmost as well

[Arzzam]

@nihal467
#6636 (comment)

As I discussed with @Pranshu1902 in issue, It was the one he came up with
so I done just like he said

[nihal467]

@Arzzam The current UI is overlapping with the shifting board data, and it doesn't look good. Please modify it based on the comment i made above

[Arzzam]

Updated as requested @Pranshu1902 @nihal467 @rithviknishad

[nihal467]

LGTM

[github-actions]

@Arzzam We truly appreciate your efforts. Thank you for taking the time to contribute; this is a very valuable contribution to us 🥇. We always welcome your contribution 🙂, so feel free to contribute to anything anytime, and never lose that spirit of innovation 🙌.