fix: hopefully fix everything that was broken/changed

Signed-off-by: Antony Bouyon <antony.bouyon@believe.com>

docs-ui/src/app/hooks/page.mdx

@@ -1,13 +1,7 @@
-import { ComponentCard, ComponentCards } from '@/components/ComponentCards';
+import { HookGrid } from '@/components/HookGrid';
 
 # Hooks
 
 Backstage UI custom hooks provide easy access to design system features, style management, and responsive interface creation.
 
-<ComponentCards>
-  <ComponentCard
-    title="useBreakpoint"
-    description="Responsive breakpoint detection hook (performance optimizations in progress)."
-    href="/hooks/use-breakpoint"
-  />
-</ComponentCards>
+<HookGrid />

docs-ui/src/app/hooks/use-breakpoint/components.tsx

@@ -1,20 +1,9 @@
 'use client';
 
 import { useBreakpoint } from '@backstage/ui';
-import { useEffect, useState } from 'react';
 
 export function UseBreakpointExample() {
   const { breakpoint, up, down } = useBreakpoint();
-  const [isMounted, setIsMounted] = useState(false);
-
-  // prevent hydration mismatch by rendering only on the client
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted) {
-    return null;
-  }
 
   return (
     <div>

docs-ui/src/app/hooks/use-breakpoint/page.mdx

@@ -3,9 +3,9 @@ import { PageTitle } from '@/components/PageTitle';
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Banner } from '@/components/Banner';
-import { UseBreakpointExample } from './components';
 import { useBreakpointReturnDefs } from './props-definition';
 import { useBreakpointExampleSnippet } from './snippets';
+import { UseBreakpointExample } from './components';
 
 <PageTitle
   title="useBreakpoint"