FF.com: Expanding Nav dropdown, text is getting overlapped

[RishhiB]

Description

To reproduce this bug, decrease your resolution such that when you click on a drop down link the sub links overlap but not too low that the navbar moves to the top
Adding padding to the links seem to solve this issue

Any relevant logs or outputs

Other information or known dependencies

AB#1444

[github-actions]

🔗 Found some broken links! 💔

Run a link check locally to find them. See
https://github.com/microsoft/FluidFramework/wiki/Checking-for-broken-links-in-the-documentation for more information.

linkcheck output

> fluidframework-docs@0.25.0 linkcheck /home/runner/work/FluidFramework/FluidFramework/docs
> npm run linkcheck:fast -- --external


> fluidframework-docs@0.25.0 linkcheck:fast /home/runner/work/FluidFramework/FluidFramework/docs
> linkcheck http://localhost:1313 --skip-file skipped-urls.txt "--external"

Crawling...

http://localhost:1313/css/style.min.f22f6c22fcc37a0d857a17c9c1202a67c28deef90cc26a52b7539b903f623331.css
- (1:1031) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.svg (HTTP 503)
- (1:1272) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.eot? (HTTP 503)
- (1:1740) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.svg (HTTP 503)
- (1:3130) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.svg (HTTP 503)
- (1:3811) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.svg (HTTP 503)

http://localhost:1313/docs/apis/core-interfaces/ifluidcodedetailscomparer-interface
- (885:360) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (896:168) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)
- (904:25) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (950:25) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)

http://localhost:1313/docs/apis/core-interfaces/ifluidcodedetailscomparer-interface/
- (885:360) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (896:168) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)
- (904:25) 'Array.sort' => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description (HTTP 200 but missing anchor)
- (950:25) 'https://..' => https://github.com/npm/node-semver#usage (HTTP 200 but missing anchor)


Summary of most serious issues:

http://localhost:1313/css/style.min.f22f6c22fcc37a0d857a17c9c1202a67c28deef90cc26a52b7539b903f623331.css
- (1:1031) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.svg (HTTP 503)
- (1:1272) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.eot? (HTTP 503)
- (1:1740) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.svg (HTTP 503)
- (1:3130) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.svg (HTTP 503)
- (1:3811) url(...) => https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.svg (HTTP 503)


Stats:
  123613 links
    1307 destination URLs
       1 URLs ignored
       8 warnings
       5 errors

[alpaix]

lgtm

[github-actions]

This commit is queued for merging with the next branch! Please ignore this PR for now. Contact @microsoft/fluid-cr-infra for help.