fixed Selector z index in light theme

src/Components/Selector/Selector.less

@@ -47,6 +47,7 @@
 
 .dropdown {
     position: absolute;
+    z-index: 2;
     border: 1px solid #e4e4e4;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
     background-color: var(--search-selector);

src/Components/TagListItem/TagListItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState, FC } from "react";
+import React, { useState, FC, useEffect, useRef } from "react";
 import flatten from "lodash/flatten";
 import { Button } from "@skbkontur/react-ui/components/Button";
 import OkIcon from "@skbkontur/react-icons/Ok";
@@ -123,6 +123,10 @@ export const TagListItem: FC<ItemProps> = ({
     const [deleteTag] = useDeleteTagMutation();
     const { name, subscriptions, triggers } = tagStat;
 
+    const itemRef = useRef<HTMLDivElement | null>(null);
+
+    const isLastTag = tags[tags.length - 1] === name;
+
     const hasSubscriptions = subscriptions.length !== 0;
 
     const handleSubscriptionClick = (
@@ -155,8 +159,19 @@ export const TagListItem: FC<ItemProps> = ({
             ? SUBSCRIPTION_LIST_HEIGHT
             : getTotalItemSize(subscriptionContactsCount);
 
+    // if last tag in the list has subs, open the subs list and scroll to the center, cause on Mac OS there is now visual difference and scroll bar only shows up when explicitly move mouse on the list
+    useEffect(() => {
+        if (isActive && isLastTag && hasSubscriptions && itemRef.current) {
+            itemRef.current.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+            });
+        }
+    }, [isActive]);
+
     return (
         <div
+            ref={itemRef}
             style={style}
             className={cn("row", {
                 active: isActive && hasSubscriptions,

src/app.tsx

@@ -3,12 +3,12 @@ import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import checkMobile from "./helpers/check-mobile";
 import * as Sentry from "@sentry/react";
-import ErrorContainer from "./Containers/ErrorContainer";
 import { Providers } from "./Providers/Providers";
 import SentryInitializer from "./Components/SentryInitializer/SentryInitializer";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 import { updateServiceWorker } from "./store/Reducers/UIReducer.slice";
 import { store } from "./store/store";
+import { Toast } from "@skbkontur/react-ui/components/Toast";
 import Favicon from "./Components/Favicon/Favicon";
 
 import "./style.less";
@@ -23,17 +23,16 @@ const render = (Component: ComponentType) => {
     if (root !== null) {
         ReactDOM.render(
             <BrowserRouter>
-                <Sentry.ErrorBoundary
-                    fallback={({ error, componentStack }) => (
-                        <ErrorContainer title={error.toString()} message={componentStack} />
-                    )}
-                >
-                    <Providers>
+                <Providers>
+                    <Sentry.ErrorBoundary
+                        onError={(error) => Toast.push(error.toString())}
+                        fallback={() => <Component />}
+                    >
                         <SentryInitializer />
                         <Favicon />
                         <Component />
-                    </Providers>
-                </Sentry.ErrorBoundary>
+                    </Sentry.ErrorBoundary>
+                </Providers>
             </BrowserRouter>,
             root
         );