From 7403dee98dabcc5cdbd251b76eaad4531d48beb6 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Thu, 24 Jul 2025 21:23:45 +0100
Subject: [PATCH] rename useIsOverflow hook and add comments to explain usage

---
 frontend/src/components/shared/QuickAccessBar.tsx            | 4 ++--
 frontend/src/hooks/{useIsOverflow.ts => useIsOverflowing.ts} | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename frontend/src/hooks/{useIsOverflow.ts => useIsOverflowing.ts} (91%)

diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index 8bd4b7a6d..22a49617e 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -10,7 +10,7 @@ import NotificationsIcon from "@mui/icons-material/NotificationsRounded";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import rainbowStyles from '../../styles/rainbow.module.css';
 import AppConfigModal from './AppConfigModal';
-import { useIsOverflow } from '../../hooks/useIsOverflow';
+import { useIsOverflowing } from '../../hooks/useIsOverflowing';
 import './QuickAccessBar.css';
 
 interface QuickAccessBarProps {
@@ -114,7 +114,7 @@ const QuickAccessBar = ({
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [activeButton, setActiveButton] = useState<string>('tools');
   const scrollableRef = useRef<HTMLDivElement>(null);
-  const isOverflow = useIsOverflow(scrollableRef);
+  const isOverflow = useIsOverflowing(scrollableRef);
 
   const buttonConfigs: ButtonConfig[] = [
     {
diff --git a/frontend/src/hooks/useIsOverflow.ts b/frontend/src/hooks/useIsOverflowing.ts
similarity index 91%
rename from frontend/src/hooks/useIsOverflow.ts
rename to frontend/src/hooks/useIsOverflowing.ts
index 9a2e381cd..b5e6d3962 100644
--- a/frontend/src/hooks/useIsOverflow.ts
+++ b/frontend/src/hooks/useIsOverflowing.ts
@@ -20,7 +20,7 @@ import * as React from 'react';
         }, [isOverflow]);
 
         const scrollableRef = useRef<HTMLDivElement>(null);
-        const isOverflow = useIsOverflow(scrollableRef);
+        const isOverflow = useIsOverflowing(scrollableRef);
 
         Fallback example (for browsers without ResizeObserver):
 
@@ -32,7 +32,7 @@ import * as React from 'react';
 */
 
 
-export const useIsOverflow = (ref: React.RefObject<HTMLElement | null>, callback?: (isOverflow: boolean) => void) => {
+export const useIsOverflowing = (ref: React.RefObject<HTMLElement | null>, callback?: (isOverflow: boolean) => void) => {
   // State to track overflow status
   const [isOverflow, setIsOverflow] = React.useState<boolean | undefined>(undefined);