Enhanced UI on mobile #441

[soubhik-111]

Summary

Provide an overview of the change. List any dependencies that are required for this change. The Issues are already listed in #441 with proper screenshots and captions.

Fixes # (issue)

Fixed 4 issues All are as expected mention in #441

Type of change

Please select the relevant option.

• [ ] Bug fix
• [ ] New feature
• [X] Breaking change
• [ ] Documentation update
• [ ] Other (please describe)

Checklist

Please tick the relevant options.

• [X] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes.
• [X] All new and existing tests passed.

Screenshots

Provide screenshots to help explain your changes.

1. Make the two buttons vertically only for mobile.
2. Make the two buttons aligned horizontally for mobile without wrapping of text
3. UI of the card handled, the spaces equally on the sides of the button
4. Make all four buttons align properly

Additional context

Add any other context about the pull request here. Please review and give your feedback Close #441 GSSOC'23

[Neilblaze]

@soubhik-111 Why did you merge the changes into the main? It's recommended to keep it in a different branch (other than main). Nevertheless, I'm merging it for now, since I inspect no conflicts.