[PM-8602-8603] Sticky search & filters

[nick-livefront]

🎟️ Tracking

PM-8602 PM-8603

📔 Objective

• Add slot to the popup page to allow for content to be shown above the scrollable area
  • A "bottom border" is shown only on scroll
  • Adds an example in storybook
• Implement this for the Search & Filters in the browser extension refresh

📸 Screenshots

Storybook	Browser Extension

🦮 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[bot]]

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 31.60%. Comparing base (69a37a8) to head (b6ab573). Report is 1 commits behind head on main.

Files	Patch %	Lines
.../src/platform/popup/layout/popup-layout.stories.ts	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9846      +/-   ##
==========================================
- Coverage   31.60%   31.60%   -0.01%     
==========================================
  Files        2617     2617              
  Lines       78063    78064       +1     
  Branches    14642    14642              
==========================================
  Hits        24670    24670              
- Misses      51524    51525       +1     
  Partials     1869     1869              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

Checkmarx One – Scan Summary & Details – 04643ffa-a1de-4eb8-82fc-516d81aededc

No New Or Fixed Issues Found

[nick-livefront]

@willmartian @vleague2 When you have time, could you give this one a review?

[danielleflinn]

@willmartian

1. I wasn't seeing the double scrollbar in Chromatic until I turned on my Mac's "Always show scrollbar" setting.
2. Not intentional, the padding should be the same on the sticky search/filter area as the rest of the content.

[nick-livefront]

1. I am seeing a double scrollbar in Storybook:

I also was not seeing this because of my mac settings 😅 I had to move some styles and elements around but I got there 3f7973a

2. Is it intentional for the padding of the sticky area to be smaller than the rest of the main content? cc @bitwarden/dept-design

Fixed! 911fb3c

3. I wonder if it makes sense to add the slot to popup-header instead, since it is already sticky. What do you think? ("No" is an okay answer!)

I would lean towards no because they semantically are different and it would add extra logic to the header component that I feel is unrelated. I'm not super passionate on that stance though so I can go another route! I did have to sadly move the non scrollable content out of the main 3f7973a so scrolling would work how I wanted. So maybe that is more of an argument it should go in the header.

[nick-livefront]

Could you also update the popup layout mdx documentation for Storybook to document the new slot and its usage?

@vleague2 I added a small blurb here. Do you think a specific example should be added? I have only added an example to the existing stories.

[nick-livefront]

@shane-melton You're a code owner on the vault changes here, when you get a chance can you take a look?