fix: update ScrollArea component and layout styles

- Set default value of disableAnimation to true in ScrollArea component. - Adjusted ScrollArea usage in Layout and Settings pages to improve scrolling behavior. - Cleaned up unused styles and commented-out code in ScrollArea component for better readability. - Modified class names in Layout and Settings to enhance layout consistency. These changes improve the usability and maintainability of the ScrollArea component across the application.
blinko-space · Jan 9, 2025 · 21642f8 · 21642f8
1 parent 9f242fe
commit 21642f8
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/src/components/Common/ScrollArea/index.tsx b/src/components/Common/ScrollArea/index.tsx
@@ -16,7 +16,7 @@ export type ScrollAreaHandles = {
   scrollToBottom: () => void;
 }
 
-export const ScrollArea = observer(forwardRef<ScrollAreaHandles, IProps>(({ style, className, children, onBottom, disableAnimation = false }, ref) => {
+export const ScrollArea = observer(forwardRef<ScrollAreaHandles, IProps>(({ style, className, children, onBottom, disableAnimation = true }, ref) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isAtTop, setIsAtTop] = useState(false);
   const [isAtBottom, setIsAtBottom] = useState(false);
@@ -78,19 +78,19 @@ export const ScrollArea = observer(forwardRef<ScrollAreaHandles, IProps>(({ styl
   );
 }))
 
-const styles = `
-  .scrollbar-hide {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;     /* Firefox */
-  }
+// const styles = `
+//   .scrollbar-hide {
+//     -ms-overflow-style: none;  /* IE and Edge */
+//     scrollbar-width: none;     /* Firefox */
+//   }
 
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;  /* Chrome, Safari and Opera */
-  }
-`;
+//   .scrollbar-hide::-webkit-scrollbar {
+//     display: none;  /* Chrome, Safari and Opera */
+//   }
+// `;
 
-if (typeof document !== 'undefined') {
-  const styleSheet = document.createElement('style');
-  styleSheet.textContent = styles;
-  document.head.appendChild(styleSheet);
-}
+// if (typeof document !== 'undefined') {
+//   const styleSheet = document.createElement('style');
+//   styleSheet.textContent = styles;
+//   document.head.appendChild(styleSheet);
+// }
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -196,7 +196,7 @@ export const CommonLayout = observer(({
         </header>
         {/* backdrop  pt-6 -mt-6 to fix the editor tooltip position */}
 
-        <ScrollArea onBottom={() => { }} className="md:contents h-[calc(100%_-_70px)] overflow-y-scroll overflow-x-hidden">
+        <ScrollArea onBottom={() => { }} className="h-[calc(100%_-_70px)] overflow-y-auto overflow-x-hidden">
           <div className="relative flex h-full w-full flex-col rounded-medium layout-container" >
             {children}
           </div>

diff --git a/src/pages/analytics.tsx b/src/pages/analytics.tsx
@@ -10,6 +10,7 @@ import { TagDistributionChart } from "@/components/BlinkoAnalytics/TagDistributi
 import dayjs from "dayjs"
 import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from "@nextui-org/react"
 import { Icon } from "@iconify/react"
+import { ScrollArea } from '@/components/Common/ScrollArea'
 
 const Analytics = observer(() => {
   const analyticsStore = RootStore.Get(AnalyticsStore)
@@ -38,8 +39,8 @@ const Analytics = observer(() => {
       <div className="w-72">
         <Dropdown>
           <DropdownTrigger>
-            <Button 
-              variant="flat" 
+            <Button
+              variant="flat"
               className="w-[160px] justify-between bg-default-100 hover:bg-default-200"
               size="md"
               endContent={<Icon icon="mdi:chevron-down" className="h-4 w-4" />}
@@ -48,9 +49,9 @@ const Analytics = observer(() => {
               {selectedMonth}
             </Button>
           </DropdownTrigger>
-          <DropdownMenu 
+          <DropdownMenu
             aria-label="Select month"
-            selectionMode="single" 
+            selectionMode="single"
             selectedKeys={[selectedMonth]}
             className="max-h-[400px]"
             onSelectionChange={(key) => {
@@ -59,7 +60,7 @@ const Analytics = observer(() => {
             }}
           >
             {last12Months.map((month) => (
-              <DropdownItem 
+              <DropdownItem
                 key={month}
                 className="data-[selected=true]:bg-primary-500/20"
               >
@@ -81,7 +82,6 @@ const Analytics = observer(() => {
       {stats?.tagStats && stats.tagStats.length > 0 && (
         <TagDistributionChart tagStats={stats.tagStats} />
       )}
-
     </div>
   )
 })

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -185,7 +185,7 @@ const Page = observer(() => {
     });
   };
 
-  return <div className="h-mobile-full flex flex-col">
+  return <div className="h-full flex flex-col">
     <div className="sticky top-0 z-10 w-full">
       <div className="relative  md:max-w-[980px] md:-translate-x-[3px] mx-3 md:mx-auto backdrop-blur-md bg-background rounded-2xl" ref={containerRef}>
         {showLeftArrow && (
@@ -236,7 +236,7 @@ const Page = observer(() => {
         )}
       </div>
     </div>
-    <ScrollArea onBottom={() => { }} className="flex-1 md:mb-[70px]">
+    <ScrollArea onBottom={() => { }} className="flex-1">
       <div className="max-w-[1024px] mx-auto flex flex-col gap-6 px-4 md:px-6 py-4">
         {getCurrentComponent()}
       </div>