xertica-ui 2.5.2 → 2.5.3

package/components/layout/sidebar/sidebar.tsx

@@ -23,7 +23,6 @@ import {
   DropdownMenuSubContent,
   DropdownMenuPortal,
 } from '../../ui/dropdown-menu';
-import { ScrollArea } from '../../ui/scroll-area';
 import { Input } from '../../ui/input';
 import { Search as SearchIcon } from 'lucide-react';
 import { cn } from '../../shared/utils';
@@ -926,9 +925,12 @@ function SidebarNav({
   if (variant === 'assistant') {
     return (
       <div className="flex-1 min-h-0 overflow-hidden">
-        <ScrollArea className="h-full px-4">
+        <div
+          className="h-full px-4"
+          style={{ overflowY: 'auto', overflowX: 'hidden' }}
+        >
           {navigationGroups.map(group => renderAssistantGroup(group))}
-        </ScrollArea>
+        </div>
       </div>
     );
   }
@@ -936,7 +938,10 @@ function SidebarNav({
   if (isMobileViewport && isOverflowAccordionOpen) {
     return (
       <div className="flex-1 min-h-0 overflow-hidden">
-        <ScrollArea className="h-full">
+        <div
+          className="h-full"
+          style={{ overflowY: 'auto', overflowX: 'hidden' }}
+        >
           <nav
             id="sidebar-nav"
             aria-label={t('sidebar.mainNavigation')}
@@ -1008,7 +1013,7 @@ function SidebarNav({
               </div>
             )}
           </nav>
-        </ScrollArea>
+        </div>
       </div>
     );
   }

package/components/pages/home-content/HomeContent.tsx

@@ -1,120 +1,119 @@
-import React from 'react';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../ui/card';
-import { Header } from '../../layout/header';
-import { Button } from '../../ui/button';
-import { FileText } from 'lucide-react';
-import { ScrollArea } from '../../ui/scroll-area';
-import { useLocation, useNavigate, Link } from 'react-router-dom';
-import { Badge } from '../../ui/badge';
-import { PageHeader } from '../../ui/page-header';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
-import { SIDEBAR_EXPANDED_WIDTH, SIDEBAR_COLLAPSED_WIDTH } from '../../shared/layout-constants';
-import { useFeatureCards } from '../../../features/home';
-import { useTranslation } from 'react-i18next';
-import { SectionErrorBoundary } from '../../shared/error-boundary';
-import { FeatureCardSkeleton } from '../../blocks/card-patterns/FeatureCardSkeleton';
-
-/**
- * Main dashboard content area for the landing page.
- *
- * @description
- * Fetches feature cards via `useFeatureCards` (React Query). All UI strings are
- * translated via `useTranslation()` — change language via `LanguageSelector`.
- *
- * @ai-rules
- * 1. Data: Feature cards come from `useFeatureCards()` — never hardcode them here.
- * 2. i18n: Use `t('home.*')` for all UI strings — never hardcode text in JSX.
- * 3. Loading: Renders a skeleton card while the query is in-flight.
- */
-export function HomeContent() {
-  const { t } = useTranslation();
-  const layout = useOptionalLayout();
-  const sidebarExpanded = layout?.sidebarExpanded ?? false;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
-  const navigate = useNavigate();
-
-  const { data: featureCards = [], isLoading } = useFeatureCards();
-
-  return (
-    <div
-      style={{
-        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : SIDEBAR_COLLAPSED_WIDTH,
-      }}
-      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-    >
-      <Header
-        showThemeToggle={true}
-        showLanguageSelector={true}
-        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
-        renderLink={(href, props) => <Link to={href} {...props} />}
-      />
-
-      <main className="flex-1 overflow-hidden bg-muted">
-        <ScrollArea className="h-full">
-          <div className="p-5 sm:p-4 md:p-6">
-            <div className="max-w-6xl mx-auto space-y-8">
-              <PageHeader title={t('home.welcome')} subtitle={t('home.subtitle')} />
-
-              <SectionErrorBoundary>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                  {isLoading ? (
-                    <>
-                      <FeatureCardSkeleton showAction />
-                      <FeatureCardSkeleton showAction />
-                      <FeatureCardSkeleton showAction />
-                    </>
-                  ) : (
-                    featureCards.map(card => (
-                      <Card
-                        key={card.id}
-                        className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
-                      >
-                        <CardHeader>
-                          <div className="flex items-center gap-3">
-                            <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
-                              <FileText className="w-6 h-6 text-[var(--chart-2)]" />
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <CardTitle className="text-sm">
-                                {t(`home.${card.id.replace(/-/g, '')}Title`, {
-                                  defaultValue: card.title,
-                                })}
-                              </CardTitle>
-                              {card.badge && (
-                                <Badge variant="default" className="text-xs">
-                                  {t(`home.${card.id.replace(/-/g, '')}badge`, {
-                                    defaultValue: card.badge,
-                                  })}
-                                </Badge>
-                              )}
-                            </div>
-                          </div>
-                        </CardHeader>
-                        <CardContent className="flex-1">
-                          <p className="text-muted-foreground">
-                            {t(`home.${card.id.replace(/-/g, '')}Description`, {
-                              defaultValue: card.description,
-                            })}
-                          </p>
-                        </CardContent>
-                        <CardFooter>
-                          <Button
-                            variant="outline"
-                            className="w-full"
-                            onClick={() => navigate(card.href)}
-                          >
-                            {t('common.view')}
-                          </Button>
-                        </CardFooter>
-                      </Card>
-                    ))
-                  )}
-                </div>
-              </SectionErrorBoundary>
-            </div>
-          </div>
-        </ScrollArea>
-      </main>
-    </div>
-  );
-}
+import React from 'react';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../ui/card';
+import { Header } from '../../layout/header';
+import { Button } from '../../ui/button';
+import { FileText } from 'lucide-react';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
+import { Badge } from '../../ui/badge';
+import { PageHeader } from '../../ui/page-header';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { SIDEBAR_EXPANDED_WIDTH, SIDEBAR_COLLAPSED_WIDTH } from '../../shared/layout-constants';
+import { useFeatureCards } from '../../../features/home';
+import { useTranslation } from 'react-i18next';
+import { SectionErrorBoundary } from '../../shared/error-boundary';
+import { FeatureCardSkeleton } from '../../blocks/card-patterns/FeatureCardSkeleton';
+
+/**
+ * Main dashboard content area for the landing page.
+ *
+ * @description
+ * Fetches feature cards via `useFeatureCards` (React Query). All UI strings are
+ * translated via `useTranslation()` — change language via `LanguageSelector`.
+ *
+ * @ai-rules
+ * 1. Data: Feature cards come from `useFeatureCards()` — never hardcode them here.
+ * 2. i18n: Use `t('home.*')` for all UI strings — never hardcode text in JSX.
+ * 3. Loading: Renders a skeleton card while the query is in-flight.
+ */
+export function HomeContent() {
+  const { t } = useTranslation();
+  const layout = useOptionalLayout();
+  const sidebarExpanded = layout?.sidebarExpanded ?? false;
+  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const navigate = useNavigate();
+
+  const { data: featureCards = [], isLoading } = useFeatureCards();
+
+  return (
+    <div
+      style={{
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : SIDEBAR_COLLAPSED_WIDTH,
+      }}
+      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+    >
+      <Header
+        showThemeToggle={true}
+        showLanguageSelector={true}
+        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
+        renderLink={(href, props) => <Link to={href} {...props} />}
+      />
+
+      <main className="flex-1 overflow-hidden bg-muted">
+        <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
+          <div className="p-5 sm:p-4 md:p-6">
+            <div className="max-w-6xl mx-auto space-y-8">
+              <PageHeader title={t('home.welcome')} subtitle={t('home.subtitle')} />
+
+              <SectionErrorBoundary>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {isLoading ? (
+                    <>
+                      <FeatureCardSkeleton showAction />
+                      <FeatureCardSkeleton showAction />
+                      <FeatureCardSkeleton showAction />
+                    </>
+                  ) : (
+                    featureCards.map(card => (
+                      <Card
+                        key={card.id}
+                        className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
+                      >
+                        <CardHeader>
+                          <div className="flex items-center gap-3">
+                            <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
+                              <FileText className="w-6 h-6 text-[var(--chart-2)]" />
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <CardTitle className="text-sm">
+                                {t(`home.${card.id.replace(/-/g, '')}Title`, {
+                                  defaultValue: card.title,
+                                })}
+                              </CardTitle>
+                              {card.badge && (
+                                <Badge variant="default" className="text-xs">
+                                  {t(`home.${card.id.replace(/-/g, '')}badge`, {
+                                    defaultValue: card.badge,
+                                  })}
+                                </Badge>
+                              )}
+                            </div>
+                          </div>
+                        </CardHeader>
+                        <CardContent className="flex-1">
+                          <p className="text-muted-foreground">
+                            {t(`home.${card.id.replace(/-/g, '')}Description`, {
+                              defaultValue: card.description,
+                            })}
+                          </p>
+                        </CardContent>
+                        <CardFooter>
+                          <Button
+                            variant="outline"
+                            className="w-full"
+                            onClick={() => navigate(card.href)}
+                          >
+                            {t('common.view')}
+                          </Button>
+                        </CardFooter>
+                      </Card>
+                    ))
+                  )}
+                </div>
+              </SectionErrorBoundary>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}