Change the Breadcrumb names into one line on mobile view

[Sanjana0823]

Purpose

The purpose of this PR is to fix #177

Goals

• The breadcrumb should display all names on a single line

Approach

• Change text-sm to text-xs sm:text-sm md:text-base that the text size will be xs (extra small) on mobile screens, change to sm (small) on small screens (640px and above), and increase to base (normal size) on medium screens (768px and above).

Screenshots

Checklist

• This PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.
• I have read and understood the development best practices guidelines ( http://bit.ly/sef-best-practices )
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

Related PRs

Test environment

Learning

[anjula-sack]

Suggested change

	<div className="flex items-center">
	<button className="transform rotate-180 md:hidden">
	<Link
	to={`/mentors/${mentee?.mentor.uuid ?? ''}`}
	className="block transition hover:text-gray-700 md:hidden ml-2"
	>
	<ChevronRightIcon />
	</Link>
	</button>
	<Link
	to={`/mentors/${mentee?.mentor.uuid ?? ''}`}
	className="block transition hover:text-gray-700 md:hidden ml-2"
	>
	Back
	</Link>
	</div>
	<div className="flex items-center">
	<Link
	to={`/mentors/${mentee?.mentor.uuid ?? ''}`}
	className="flex items-center transition hover:text-gray-700 md:hidden"
	>
	<span className="transform rotate-180"><ChevronRightIcon /></span>
	<span className="ml-2">Back</span>
	</Link>
	</div>

[anjula-sack]

Good job! @Sanjana0823

[Sanjana0823]

Good job! @Sanjana0823

Thank you @anjula-sack