Fixes click events on the incoming call bar

stylesheets/_modules.scss

@@ -3611,7 +3611,7 @@ button.module-image__border-overlay:focus {
     position: fixed;
     top: var(--titlebar-height);
     inset-inline-start: 0;
-    z-index: $z-index-on-top-of-everything;
+    z-index: $z-index-calling-container;
   }
 
   &__container {

stylesheets/_variables.scss

@@ -274,8 +274,9 @@ $z-index-window-controls: 10000;
 $z-index-story-meta: 3;
 $z-index-scroll-down-button: 10;
 $z-index-stories: 98;
-$z-index-calling: 100;
+$z-index-calling-container: 100;
-$z-index-modal-host: 101;
+$z-index-calling: 101;
-$z-index-above-popup: 101;
+$z-index-modal-host: 102;
-$z-index-calling-pip: 103;
+$z-index-above-popup: 103;
+$z-index-calling-pip: 104;
 $z-index-above-context-menu: 126;

stylesheets/components/IncomingCallBar.scss

@@ -3,15 +3,18 @@
 
 .IncomingCallBar {
   &__container {
+    -webkit-app-region: no-drag;
     animation: IncomingCallBar--animation 0.2s forwards ease-out;
     position: fixed;
     top: 22px;
+    user-select: none;
     width: 100%;
     z-index: $z-index-popup;
     padding-inline: 1rem;
   }
 
   &__bar {
+    -webkit-app-region: no-drag;
     align-items: center;
     background-color: $color-gray-75;
     border-radius: 8px;
@@ -21,6 +24,7 @@
     margin-block: 0;
     margin-inline: auto;
     max-width: 600px;
+    user-select: none;
     width: 100%;
   }
 
@@ -75,10 +79,16 @@
     display: flex;
     height: 40px;
     justify-content: center;
-    margin-inline: 12px;
     outline: none;
     width: 40px;
 
+    &__container {
+      border-radius: 40px;
+      height: 40px;
+      margin-inline: 12px;
+      width: 40px;
+    }
+
     &--accept-video-as-audio {
       background-color: $color-gray-45;
 

ts/components/IncomingCallBar.tsx

@@ -68,7 +68,11 @@ function CallButton({
   tooltipContent,
 }: CallButtonProps): JSX.Element {
   return (
-    <Tooltip content={tooltipContent} theme={Theme.Dark}>
+    <Tooltip
+      content={tooltipContent}
+      theme={Theme.Dark}
+      wrapperClassName="IncomingCallBar__button__container"
+    >
       <button
         aria-label={tooltipContent}
         className={`IncomingCallBar__button IncomingCallBar__button--${classSuffix}`}

ts/components/Tooltip.tsx

@@ -13,6 +13,7 @@ import { offsetDistanceModifier } from '../util/popperUtil';
 import { getInteractionMode } from '../services/InteractionMode';
 
 type EventWrapperPropsType = {
+  className?: string;
   children: React.ReactNode;
   onHoverChanged: (_: boolean) => void;
 };
@@ -24,7 +25,10 @@ type EventWrapperPropsType = {
 export const TooltipEventWrapper = React.forwardRef<
   HTMLSpanElement,
   EventWrapperPropsType
->(function TooltipEvent({ onHoverChanged, children }, ref): JSX.Element {
+>(function TooltipEvent(
+  { className, onHoverChanged, children },
+  ref
+): JSX.Element {
   const wrapperRef = React.useRef<HTMLSpanElement | null>(null);
 
   const on = React.useCallback(() => {
@@ -59,6 +63,7 @@ export const TooltipEventWrapper = React.forwardRef<
 
   return (
     <span
+      className={className}
       onFocus={onFocus}
       onBlur={off}
       ref={refMerger<HTMLSpanElement>(ref, wrapperRef)}
@@ -83,6 +88,7 @@ export type PropsType = {
   popperModifiers?: Array<StrictModifiers>;
   sticky?: boolean;
   theme?: Theme;
+  wrapperClassName?: string;
 };
 
 export function Tooltip({
@@ -93,6 +99,7 @@ export function Tooltip({
   sticky,
   theme,
   popperModifiers = [],
+  wrapperClassName,
 }: PropsType): JSX.Element {
   const [isHovering, setIsHovering] = React.useState(false);
 
@@ -106,7 +113,11 @@ export function Tooltip({
     <Manager>
       <Reference>
         {({ ref }) => (
-          <TooltipEventWrapper ref={ref} onHoverChanged={setIsHovering}>
+          <TooltipEventWrapper
+            className={wrapperClassName}
+            ref={ref}
+            onHoverChanged={setIsHovering}
+          >
             {children}
           </TooltipEventWrapper>
         )}