fix: toast bug and image distortion on settings page

[LazyCoder4542]

you can check this one that was used for the previous cohort

Fixes Issue/Linear Ticket

This could be an existing issue or a linear ticket

• Github Issue Example: My PR Closes #{ISSUE}
• Linear Ticket Example: Fixes ID-#{ISSUE}

Changes proposed

Talk about the things you did eg. files changes, dependencies installed e.t.c

Check List (Check all the applicable boxes)

🚨Please review the [style guide for contributing](add link here) and [guidelines for contributing](add link here) to this repository.

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.
• I am making a pull request against the main branch (left side).
• My commit messages styles matches our requested structure.
• My code additions will fail neither code linting checks nor unit test.
• I am only making changes to files I was requested to.

Screenshots/ Videos

Screencast from 10-22-2023 08:12:04 PM.webm
After fix:
Screencast from 10-22-2023 10:07:21 PM.webm

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
zuriportfolio-frontend	🛑 Canceled (Inspect)			Oct 22, 2023 8:59pm
zuriportfolio-frontend-pw1h	🛑 Canceled (Inspect)			Oct 22, 2023 8:59pm
zuriportfolio-frontend1	🛑 Canceled (Inspect)			Oct 22, 2023 8:59pm

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 38 seconds (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 25 seconds (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 55 seconds (more than 100, code: "api-deployments-free-per-day").