CL-261: update popover styles and fix stories

[danielleflinn]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/CL-261

📔 Objective

Updated the UI styles of the popover to match the new design system styles:

• increasing the corner radius
• adding bitTypography for text styles.
• updating icon button size + alignment with title
• Fixing broken open to "top" stories; due to not enough top margin, so these are also fixed.
• Adding Long title story to show text wrapping / title alignment better

📸 Screenshots

See Chromatic

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[codecov]

Codecov Report

Attention: Patch coverage is 33.33333% with 2 lines in your changes missing coverage. Please review.

Project coverage is 35.83%. Comparing base (6f2a713) to head (59252b9).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
libs/components/src/popover/popover.stories.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #13547      +/-   ##
==========================================
- Coverage   35.83%   35.83%   -0.01%     
==========================================
  Files        3167     3167              
  Lines       93407    93410       +3     
  Branches    17001    17001              
==========================================
+ Hits        33471    33472       +1     
- Misses      57344    57346       +2     
  Partials     2592     2592              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Checkmarx One – Scan Summary & Details – b94676c2-2ca1-4e34-a2c2-3c6f48b6fa32

Great job, no security vulnerabilities found in this Pull Request

[vleague2]

For consistency, let's change this to

Suggested change

	import { TypographyDirective } from "../typography/typography.directive";
	import { TypographyModule } from "../typography";

and on line 13.

(check in the code editor before committing that change because I did it from memory lol)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud