Boost: Adjust styles to properly center the thumb in Firefox (#5695)

src/components/main/premium/GiveawayModal.module.scss

@@ -9,6 +9,7 @@
 
 .root :global(.modal-content) {
   padding: 0;
+  overflow: hidden;
 }
 
 .root :global(.modal-dialog) {

src/components/main/premium/GiveawayModal.tsx

@@ -20,6 +20,7 @@ import {
   GIVEAWAY_MAX_ADDITIONAL_CHANNELS,
   GIVEAWAY_MAX_ADDITIONAL_COUNTRIES,
   GIVEAWAY_MAX_ADDITIONAL_USERS,
+  STARS_CURRENCY_CODE,
 } from '../../../config';
 import { getUserFullName, isChatChannel } from '../../../global/helpers';
 import {
@@ -217,7 +218,7 @@ const GiveawayModal: FC<OwnProps & StateProps> = ({
   }, [dataStarsPrepaidGiveaway, starsGiftOptions, isStarsPrepaidGiveaway]);
 
   const filteredGifts = useMemo(() => {
-    return gifts?.filter((gift) => gift.users === selectedUserCount);
+    return gifts?.filter((gift) => gift.users === selectedUserCount && gift.currency !== STARS_CURRENCY_CODE);
   }, [gifts, selectedUserCount]);
 
   const fullMonthlyAmount = useMemo(() => {
@@ -229,7 +230,8 @@ const GiveawayModal: FC<OwnProps & StateProps> = ({
   }, [filteredGifts]);
 
   const userCountOptions = useMemo(() => {
-    return unique((gifts?.map((winner) => winner.users) || [])).sort((a, b) => a - b);
+    return unique((gifts?.filter((gift) => gift.currency !== STARS_CURRENCY_CODE)
+      ?.map((winner) => winner.users) || [])).sort((a, b) => a - b);
   }, [gifts]);
 
   const winnerCountOptions = useMemo(() => {
@@ -691,7 +693,7 @@ const GiveawayModal: FC<OwnProps & StateProps> = ({
       dialogRef={dialogRef}
       onEnter={(dataPrepaidGiveaway || dataStarsPrepaidGiveaway) ? openConfirmModal : handleClick}
     >
-      <div className={styles.main} onScroll={handleScroll}>
+      <div className={buildClassName(styles.main, 'custom-scroll')} onScroll={handleScroll}>
         <Button
           round
           size="smaller"

src/components/ui/RangeSliderWithMarks.module.scss

@@ -15,6 +15,13 @@
   -webkit-appearance: none;
   appearance: none;
 
+  @supports (-moz-appearance: none) {
+    transform: scale(1) translate(calc(-10% + var(--thumb-offset)), 0);
+    &:hover {
+      transform: scale(1.5) translate(calc(-10% + var(--thumb-offset)), 0) !important;
+    }
+  }
+
   &:hover {
     transform: scale(1.5) translate(-30%, -30%);
   }
@@ -27,6 +34,7 @@
 }
 
 .sliderContainer {
+  --thumb-offset: 0%;
   --fill-percentage: 0%;
   position: relative;
   width: 100%;
@@ -86,10 +94,9 @@
 
 .tickMarks {
   position: absolute;
-  top: 2rem;
+  bottom: 0.25rem;
   left: 0;
   right: 0;
-  height: 100%;
   display: flex;
   justify-content: space-between;
   pointer-events: none;

src/components/ui/RangeSliderWithMarks.tsx

@@ -18,10 +18,6 @@ const RangeSliderWithMarks: FC<OwnProps> = ({ marks, onChange, rangeCount }) =>
   // eslint-disable-next-line no-null/no-null
   const sliderRef = useRef<HTMLInputElement | null>(null);
 
-  const fillPercentage = useMemo(() => {
-    return ((marks.indexOf(rangeCount) / (marks.length - 1)) * 100).toFixed(2);
-  }, [marks, rangeCount]);
-
   const rangeCountIndex = useMemo(() => marks.indexOf(rangeCount), [marks, rangeCount]);
 
   const rangeValue = useMemo(() => {
@@ -29,8 +25,13 @@ const RangeSliderWithMarks: FC<OwnProps> = ({ marks, onChange, rangeCount }) =>
   }, [marks, rangeCount]);
 
   useLayoutEffect(() => {
-    sliderRef.current!.style.setProperty('--fill-percentage', `${fillPercentage}%`);
-  }, [fillPercentage]);
+    if (sliderRef.current) {
+      const fillPercentage = (rangeCountIndex / (marks.length - 1)) * 100;
+      const thumbOffset = fillPercentage / 2;
+      sliderRef.current.style.setProperty('--fill-percentage', `${fillPercentage}%`);
+      sliderRef.current.style.setProperty('--thumb-offset', `${thumbOffset}%`);
+    }
+  }, [rangeCountIndex, marks]);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const index = parseInt(event.target.value, 10);