fix(timelinedesigner): remove unnecessary scrollbars

Author: purfectliterature

client/app/bundles/course/reference-timelines/components/TimelinesOverview/TimelinesOverview.tsx

@@ -30,7 +30,7 @@ const TimelinesOverview = (props: TimelinesOverviewProps): JSX.Element => {
 
   return (
     <div className="relative py-4">
-      <aside className="flex items-start space-x-4 overflow-x-scroll pr-56">
+      <aside className="scrollbar-hidden flex items-start space-x-4 overflow-x-scroll pr-56">
         {timelines.map((timeline) => (
           <TimelinesOverviewItem
             key={timeline.id}

client/app/bundles/course/reference-timelines/views/DayView/DayView.tsx

@@ -77,7 +77,7 @@ const DayView = (): JSX.Element => {
           />
         </section>
 
-        <section className="pointer-events-auto flex overflow-scroll overscroll-contain border-0 border-t border-solid border-neutral-200 pb-28">
+        <section className="scrollbar-hidden pointer-events-auto flex h-full overflow-y-scroll overscroll-contain border-0 border-t border-solid border-neutral-200">
           <ItemsSidebar
             className="w-[32rem]"
             for={filteredItems}
@@ -89,7 +89,7 @@ const DayView = (): JSX.Element => {
 
           <aside
             ref={contentsRef}
-            className="scrollbar-hidden ml-[1px] h-fit w-full overflow-x-scroll"
+            className="ml-[1px] h-fit min-h-full w-full overflow-x-scroll pb-28"
             onScroll={(e): void => {
               if (e.currentTarget.scrollLeft)
                 calendarRef.current?.scrollTo(e.currentTarget.scrollLeft);

client/app/theme/index.css

@@ -20,12 +20,10 @@
   /* For Firefox 64+ and Firefox for Android 64+ */
   .scrollbar-hidden {
     scrollbar-width: none;
-    scrollbar-color: transparent;
   }
 
   /* For Blink- and WebKit-based browsers */
   .scrollbar-hidden::-webkit-scrollbar {
-    width: 0;
-    background: transparent;
+    display: none;
   }
 }