Move the AutoHideScrollbar to shared components (#33777)

* First version of shared component

* Refactor as a functional component

* Add unit tests and more documentation

* Fix problem where wrappedRef was used by parent before assignment was performed.

* Use the shared component in app/web

* Clean up unused styling

* Added scrollbar-gutters as default styling in shared component

* Make sure the legacy mx_AutoHideScrollbar is set in app/web

* Updated snapshots

* Removing default style, scrollbar-gutter: stable;

* Updated snapshots

* useRef on wrapperRef to avoid loop in rendering

* scrollbar-width does not propagate

* Add AutoHideScrollbar to RoomListView

* Fix Prettier issue

* Updated snapshots

* Updated snapshot after merge

* Fix Sonar issue

apps/web/res/css/views/emojipicker/_EmojiPicker.pcss

@@ -20,8 +20,6 @@ Please see LICENSE files in the repository root for full details.
 .mx_EmojiPicker_body {
     flex: 1;
     overflow-y: scroll;
-    scrollbar-width: thin;
-    scrollbar-color: rgb(0, 0, 0, 0.2) transparent;
 }
 
 .mx_EmojiPicker_header {
@@ -173,6 +171,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_EmojiPicker_footer {
     border-top: 1px solid $message-action-bar-border-color;
     min-height: 72px;
+    max-height: 72px;
 
     display: flex;
     align-items: center;