feat(pagination&&grid): update design and logic for pagination and layout for grid [WPB-3307]

[dariaoldenburg]

WPB-3307 Make the calling UI react to narrow screen sizes

Description

This PR will change a few functionalities and styles, so I recommend reviewing it commit by commit. Of course, feel free to review it however you prefer :)

What I did in this PR:

• Updated the design and logic for pagination.
  On mobile resolutions, pagination is aligned to the bottom.
• Made the layout responsive for the video top bar, ensuring spacings match the Figma design.
• Made the video grid responsive, with multiple breakpoints (both horizontally and vertically).
• Made the video controls responsive:
  Added a "More" menu button (I used ContextMenu for that, as per the designer’s decision). I also updated the styles for ContextMenu to match the Figma design. There’s still some work to be done here, but I created a separate task for it.
• Some minor refactoring, splitting into smaller components, and standardizing the styling approach.

What I didn’t do in this PR:

• The See participants button on mobile should open the same way as video settings, audio settings, and view mode (it currently looks like a select dropdown, but we can’t use the Select component since it isn’t a true Select). —> TODO task

New tasks I created after working on this PR:

• Update the Chevron icon inside react-ui-kit and bump the package version in wire-webapp. Also, update ChevronIcon and ChevronRight inside wire-webapp (check where they're used). The jump-to-bottom button should have the same Chevron icon (confirmed with Olga). --> https://wearezeta.atlassian.net/browse/WPB-15482
• [Design] Update the IconButton component’s focus and active state styles. --> https://wearezeta.atlassian.net/browse/WPB-15483
• [Design] After clicking the "More" menu button, the menu should open in the same place, not where the button was clicked. (This is how ContextMenu works; the question is whether we should apply this behavior universally or have different solutions in some cases). --> https://wearezeta.atlassian.net/browse/WPB-15484
• [Design] Should we use different breakpoints for video controls than the ones we currently have in Figma? --> https://wearezeta.atlassian.net/browse/WPB-15485

Checklist

• mentions the JIRA issue in the PR name (Ex. WPB-3307)
• PR has been self reviewed by the author;
• Hard-to-understand areas of the code have been commented;
• If it is a core feature, unit tests have been added;

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 40.00000% with 24 lines in your changes missing coverage. Please review.

Project coverage is 46.56%. Comparing base (3963a76) to head (69f6b96).
Report is 75 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #18389      +/-   ##
==========================================
- Coverage   46.56%   46.56%   -0.01%     
==========================================
  Files         828      835       +7     
  Lines       26030    26057      +27     
  Branches     5899     5915      +16     
==========================================
+ Hits        12122    12134      +12     
- Misses      12393    12405      +12     
- Partials     1515     1518       +3     

[sonarqubecloud]

Quality Gate passed

Issues
25 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