fix(website): horizontal scroll for mobile

HasithDeAlwis commented 1 month ago

Summary by Sourcery

Bug Fixes:

Fix horizontal scrolling issue on mobile devices by adjusting the width of project cards and shadow effects.

sourcery-ai[bot] commented 1 month ago

Reviewer's Guide by Sourcery

This PR fixes horizontal scrolling issues on mobile devices by adjusting the width and layout of project cards. The changes involve modifying container widths and shadow effects, with shadows now only appearing on medium-sized screens and above.

User journey diagram for mobile horizontal scroll fix

journey
  title User journey for viewing project cards on mobile
  section Before Fix
    User: Clicks on project card
    User: Experiences horizontal scroll issue
  section After Fix
    User: Clicks on project card
    User: Views project card without horizontal scroll issue

File-Level Changes

Change	Details	Files
Adjusted project card container width and layout for better mobile display	Added w-11/12 width for mobile and w-full for large screens Added flex justify-center to center project cards Removed default shadow effects from project card containers	`apps/website/src/components/projects/project-card.svelte` `apps/website/src/components/projects/projects.svelte`
Modified shadow effects to be responsive	Removed shadow effects from image container completely Added md: prefix to shadows making them only appear on medium screens and above	`apps/website/src/components/projects/project-card.svelte`

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

netlify[bot] commented 1 month ago

Deploy Preview for hasith ready!

Name	Link
Latest commit	3356df7911babad1ee0aaa42e771008ce27a3ec6
Latest deploy log	https://app.netlify.com/sites/hasith/deploys/671992cfbf28290008de0dd7
Deploy Preview	https://deploy-preview-45--hasith.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.

HasithDeAlwis / Hasith-Portfolio-v2