Header Fix: Create StandardHeaderDropdown Component for Standardized Dropdown Actions

[Piyush-Goenka]

Description:

Create a reusable StandardHeaderDropdown component that wraps the existing SortingButton to provide consistent dropdown button styling across all screen headers.

Context:

This is part of the header standardization effort (parent issue #7290). Currently, dropdown buttons have inconsistent styling, spacing, and behavior across different screens. The existing SortingButton component already handles dropdown functionality, but needs a standardized wrapper.

Requirements:

1. Create StandardHeaderDropdown component in src/components/StandardHeader/ directory
2. Wrap the existing SortingButton component (do not rewrite it)
3. Implement consistent styling:
   • Standardized hover effects
   • Consistent border and background colors
   • Uniform spacing and icon alignment
   • Proper focus states for accessibility
4. Use design tokens for theming support
5. Ensure dropdown menu positioning is consistent
6. Add TypeScript types and prop validation
7. Include Storybook stories
8. Write unit tests

Acceptance Criteria:

• Component successfully wraps SortingButton without breaking existing functionality
• Consistent hover, focus, and active states
• Dropdown menu appears in consistent position across all screens
• Responsive design works on mobile and desktop
• Accessible (keyboard navigation, ARIA attributes)
• TypeScript types are properly defined
• Unit tests achieve >80% coverage
• Storybook stories demonstrate various dropdown configurations

Dependencies: None (can be worked in parallel)

Related Issues: Parent issue #7290

---