fix: improve app-wide scroll behavior

packages/frontend/src/components/calendar/CalendarList.tsx

@@ -30,58 +30,58 @@ const CalendarList: FC<ICalendarBaseProps> = ({
     isLoadingEvents,
 }) => {
     const scrollRef = useRef<HTMLElement>();
-
-    const noEvents = events === undefined || events?.length === 0;
     const noEventsMsg = isLoadingEvents ? "" : calendarMessages.noEvents;
 
     return (
-        <span
+        <div
             className={`border-none block min-h-[50px] relative ${
                 showFullSize ? "calendar-list-full-size-wrap" : ""
             }`}
             style={
                 !showFullSize ? { height: widgetHeight ?? WIDGET_HEIGHT } : {}
             }
         >
+            {!showFullSize && (
+                <div
+                    className="flex absolute top-3 left-[10px] single-col:left-4 two-col:left-5"
+                    style={{
+                        zIndex: Z_INDEX_REGISTRY.CALENDAR_LIST_SWITCH,
+                    }}
+                >
+                    <Switch
+                        options={["Calendar", "List"]}
+                        onChange={switchCalendarType}
+                        checked={calendarType === ECalendarType.List}
+                    />
+                </div>
+            )}
             <ScrollBar
                 containerRef={(el) => {
                     scrollRef.current = el;
                 }}
-                className="relative"
+                style={
+                    !showFullSize
+                        ? { height: widgetHeight ?? WIDGET_HEIGHT }
+                        : {}
+                }
             >
-                <div className={noEvents ? "mb-0" : "mb-5"}>
-                    {!showFullSize && (
-                        <div
-                            className="flex absolute top-3 left-[10px] single-col:left-4 two-col:left-5"
-                            style={{
-                                zIndex: Z_INDEX_REGISTRY.CALENDAR_LIST_SWITCH,
-                            }}
-                        >
-                            <Switch
-                                options={["Calendar", "List"]}
-                                onChange={switchCalendarType}
-                                checked={calendarType === ECalendarType.List}
-                            />
-                        </div>
-                    )}
-                    <CalList
-                        eventClickHandler={(e: EventClickArg) =>
-                            eventClickHandler(e, events, onClickEvent)
-                        }
-                        handleHeaderTooltips={handleHeaderTooltips}
-                        noEventsMsg={noEventsMsg}
-                        getEventCategoryByColor={getEventCategoryByColor}
-                        events={events}
-                        onDatesSet={onDatesSet}
-                        selectedEventDetails={selectedEventDetails}
-                        catFilters={catFilters}
-                        showFullSize={showFullSize}
-                        selectedDate={selectedDate}
-                        widgetHash={widgetHash}
-                    />
-                </div>
+                <CalList
+                    eventClickHandler={(e: EventClickArg) =>
+                        eventClickHandler(e, events, onClickEvent)
+                    }
+                    handleHeaderTooltips={handleHeaderTooltips}
+                    noEventsMsg={noEventsMsg}
+                    getEventCategoryByColor={getEventCategoryByColor}
+                    events={events}
+                    onDatesSet={onDatesSet}
+                    selectedEventDetails={selectedEventDetails}
+                    catFilters={catFilters}
+                    showFullSize={showFullSize}
+                    selectedDate={selectedDate}
+                    widgetHash={widgetHash}
+                />
             </ScrollBar>
-        </span>
+        </div>
     );
 };
 

packages/frontend/src/components/calendar/CalendarModule.tsx

@@ -140,7 +140,7 @@ const CalendarModule: FC<ICalendarBaseProps> = ({
         );
     };
 
-    return <span id={`cal-${widgetHash}`}>{renderCalendar()}</span>;
+    return <div id={`cal-${widgetHash}`}>{renderCalendar()}</div>;
 };
 
 export default CalendarModule;

packages/frontend/src/components/widget-library/WidgetLibrary.tsx

@@ -20,7 +20,6 @@ import { ReactComponent as OtherSVG } from "src/assets/icons/other.svg";
 import { ReactComponent as UsersSVG } from "src/assets/icons/users.svg";
 import market from "src/assets/img/preview/marketModule2x.png";
 import CONFIG from "src/config/config";
-import "./WidgetLibrary.module.scss";
 
 const CAT_ICONS = {
     defi: <DefiSVG />,
@@ -137,7 +136,7 @@ const WidgetLibrary: FC<IWidgetLibProps> = ({
                     </div>
                 </div>
                 {categories.length > 0 ? (
-                    <div className="flex bg-backgroundVariant1500 h-[var(--wlib-modal-height)]">
+                    <div className="flex bg-backgroundVariant1500">
                         <ScrollBar className="min-w-[250px] bg-backgroundVariant800 fontGroup-highlight">
                             <div
                                 role="button"
@@ -181,7 +180,7 @@ const WidgetLibrary: FC<IWidgetLibProps> = ({
                             })}
                         </ScrollBar>
 
-                        <div className="w-full overflow-hidden pb-[110px]">
+                        <div className="w-full overflow-hidden">
                             <div className="flex justify-between items-center p-[17px_25px] border-b border-btnRingVariant500 text-primaryVariant100 font-normal">
                                 <div className="flex justify-around items-center [&>span]:mr-[7px]" />
                                 <div className="flex justify-around items-center [&>span]:mr-[7px] fontGroup-normal">
@@ -219,8 +218,8 @@ const WidgetLibrary: FC<IWidgetLibProps> = ({
                                         {widgets.length} Widgets
                                     </div>
                                     {widgets.length > 0 ? (
-                                        <ScrollBar>
-                                            <div className="flex box-border flex-row flex-wrap w-full pl-[15px]">
+                                        <ScrollBar className="pb-[10px]">
+                                            <div className="grid grid-cols-3 gap-2.5 pl-[15px] h-[60vh]">
                                                 {widgets.map((w) => {
                                                     const widgetCount =
                                                         cachedWidgets?.filter(
@@ -236,7 +235,7 @@ const WidgetLibrary: FC<IWidgetLibProps> = ({
                                                                 CONFIG.UI
                                                                     .NEW_WIDGET_IDENTIFIER
                                                             }`}
-                                                            className="w-min max-w-min m-[10px]"
+                                                            className="w-min max-w-min"
                                                         >
                                                             <ModulePreview
                                                                 previewImg={
@@ -284,12 +283,12 @@ const WidgetLibrary: FC<IWidgetLibProps> = ({
                                     )}
                                 </>
                             ) : (
-                                <ModuleLoader $height="100%" />
+                                <ModuleLoader $height="60vh" />
                             )}
                         </div>
                     </div>
                 ) : (
-                    <ModuleLoader $height="var(--wlib-modal-height)" />
+                    <ModuleLoader $height="calc(85vh - 100px)" />
                 )}
             </Modal>
         );

packages/ui-kit/index.ts

@@ -44,6 +44,7 @@ import {
     DropdownItem,
     DropdownMenu,
 } from "./src/components/dropdown/dropdown";
+import { FadeIn } from "./src/components/fade-in-out/FadeIn";
 import { Input } from "./src/components/input/Input";
 import Footer from "./src/components/layout/Footer";
 import {
@@ -65,7 +66,6 @@ import { Modal } from "./src/components/modal/Modal";
 import { ModulePreview } from "./src/components/module-preview/ModulePreview";
 import { ModuleLoader } from "./src/components/moduleLoader/ModuleLoader";
 import { Overlay } from "./src/components/overlay/Overlay";
-import { FadeIn } from "./src/components/fade-in-out/FadeIn";
 import { ScrollBar } from "./src/components/scrollbar/ScrollBar";
 import { SearchBar } from "./src/components/search/Searchbar";
 import { ChannelSkeleton } from "./src/components/skeletons/ChannelSkeleton";

packages/ui-kit/package.json

@@ -26,7 +26,6 @@
     "react-laag": "2.0.5",
     "react-loading-skeleton": "3.3.1",
     "react-markdown": "8.0.7",
-    "react-perfect-scrollbar": "1.5.8",
     "react-quick-pinch-zoom": "4.9.0",
     "react-router-dom": "5.3.4",
     "react-select": "5.7.0",
@@ -40,9 +39,10 @@
     "postcss": "8.4.25",
     "prettier-plugin-tailwindcss": "0.4.1",
     "sass": "1.63.6",
+    "tailwind-scrollbar": "3.0.5",
     "tailwindcss": "3.3.2",
     "tailwindcss-theme-swapper": "0.7.3",
     "tw-colors": "1.2.6",
     "vite-plugin-svgr": "3.2.0"
   }
-}
+}

packages/ui-kit/src/components/moduleLoader/ModuleLoader.tsx

@@ -14,7 +14,7 @@ export const ModuleLoader: FC<IModuleLoaderProps> = ({
 }) => (
     <div
         className={twMerge(
-            "`flex h-full w-full items-center justify-center",
+            "flex h-full w-full items-center justify-center",
             collapse ? "hidden" : "flex"
         )}
         style={{

packages/ui-kit/src/components/scrollbar/ScrollBar.tsx

@@ -1,8 +1,18 @@
-import { FC } from "react";
-import PerfectScrollbar, { ScrollBarProps } from "react-perfect-scrollbar";
-import "react-perfect-scrollbar/dist/css/styles.css";
+import { FC, HTMLProps } from "react";
 import { twMerge } from "tailwind-merge";
 
+export interface ScrollBarProps extends HTMLProps<HTMLDivElement> {
+    /**
+     * get the container ref
+     */
+    containerRef?: (container: HTMLElement) => void;
+
+    /**
+     * fires when the y-axis reaches the end of the scroll container.
+     */
+    onYReachEnd?: (container: HTMLElement) => void;
+}
+
 export const ScrollBar: FC<ScrollBarProps> = ({
     children,
     onScroll,
@@ -12,14 +22,24 @@ export const ScrollBar: FC<ScrollBarProps> = ({
     ...rest
 }) => {
     return (
-        <PerfectScrollbar
-            className={twMerge(`unique-widget-scrollbar`, className)}
-            containerRef={containerRef}
-            onYReachEnd={onYReachEnd}
-            onScroll={onScroll}
+        <div
+            ref={(ref) => ref && containerRef?.(ref)}
+            className={twMerge(
+                "overflow-hidden hover:overflow-y-auto scrollbar-track-backgroundVariant1800 scrollbar-thumb-primaryVariant800 scrollbar scrollbar-w-[5px] overscroll-contain",
+                className
+            )}
+            onScroll={(e) => {
+                if (
+                    e.currentTarget.scrollTop + e.currentTarget.clientHeight ===
+                    e.currentTarget.scrollHeight
+                ) {
+                    onYReachEnd?.(e.currentTarget);
+                }
+                onScroll?.(e);
+            }}
             {...rest}
         >
             {children}
-        </PerfectScrollbar>
+        </div>
     );
 };

packages/ui-kit/src/components/tooltip/CalendarTooltip.tsx

@@ -1,8 +1,8 @@
 import { FC, RefObject } from "react";
 import moment from "moment";
 import { createPortal } from "react-dom";
-import ScrollBar from "react-perfect-scrollbar";
 import { TDatePos, TEvent, TEventCategory } from "../calendar/event";
+import { ScrollBar } from "../scrollbar/ScrollBar";
 
 export interface ITooltipProps {
     disabled?: boolean;

packages/ui-kit/src/globalStyles/custom.scss

@@ -1,8 +1,5 @@
 // file for all css styles not found in tailwind's library
 
-/* custom css for scrollbars */
-@import "./scrollbar.scss";
-
 /* custom css for charts */
 @import "./charts.scss";
 

packages/ui-kit/tailwind.config.js

@@ -4,6 +4,7 @@ import { tailwindBreakpoints } from "./src/globalStyles/breakpoints";
 import typography from "@tailwindcss/typography";
 import plugin from "tailwindcss/plugin";
 import themeSwapper from "tailwindcss-theme-swapper";
+import tailwindScrollbar from "tailwind-scrollbar";
 import { fontUtilities } from "./src/globalStyles/fontGroups";
 
 export default {
@@ -31,5 +32,6 @@ export default {
                 ...fontUtilities,
             });
         }),
+        tailwindScrollbar({ nocompatible: true }),
     ],
 };