@scripso-homepad/ui 0.4.40 → 0.4.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.40",
+  "version": "0.4.41",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/web/components/Drawer.tsx

@@ -1,5 +1,6 @@
 import { X } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
@@ -10,6 +11,7 @@ const DRAWER_TRANSITION_MS = 300;
 
 let bodyScrollLockCount = 0;
 let previousBodyOverflow = '';
+let previousHtmlOverflow = '';
 
 function lockBodyScroll() {
   if (typeof document === 'undefined') {
@@ -18,7 +20,9 @@ function lockBodyScroll() {
 
   if (bodyScrollLockCount === 0) {
     previousBodyOverflow = document.body.style.overflow;
+    previousHtmlOverflow = document.documentElement.style.overflow;
     document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
   }
 
   bodyScrollLockCount += 1;
@@ -33,7 +37,9 @@ function unlockBodyScroll() {
 
   if (bodyScrollLockCount === 0) {
     document.body.style.overflow = previousBodyOverflow;
+    document.documentElement.style.overflow = previousHtmlOverflow;
     previousBodyOverflow = '';
+    previousHtmlOverflow = '';
   }
 }
 
@@ -141,9 +147,9 @@ export function Drawer({
     return null;
   }
 
-  return (
+  const drawer = (
     <div
-      className="fixed inset-0 z-50 flex justify-end p-2 max-md:p-0"
+      className="fixed inset-0 z-50 flex justify-end overscroll-none p-2 max-md:p-0"
       role="presentation"
     >
       <button
@@ -163,7 +169,7 @@ export function Drawer({
         aria-labelledby="homepad-drawer-title"
         {...(subtitle ? { 'aria-describedby': 'homepad-drawer-subtitle' } : {})}
         className={cn(
-          'relative z-10 flex h-[calc(100dvh-16px)] min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none',
+          'relative z-10 flex h-full max-h-full min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:rounded-none',
           // Keep GPU transform only while animating — settled translate-x-0 blurs text.
           !isTransformSettled && 'will-change-transform',
           isAnimatedIn
@@ -229,4 +235,6 @@ export function Drawer({
       </aside>
     </div>
   );
+
+  return typeof document !== 'undefined' ? createPortal(drawer, document.body) : drawer;
 }

package/src/web/components/table/TablePrimitives.tsx

@@ -111,22 +111,22 @@ export function TableHead({
   sortDirection = null,
   onSort,
   children,
+  onClick,
+  onKeyDown,
   ...props
 }: TableHeadProps) {
   const isSortable = sortable && onSort != null;
 
   const content = isSortable ? (
-    <button
-      type="button"
-      onClick={onSort}
+    <span
       className={cn(
-        'inline-flex w-full cursor-pointer items-center gap-2.5 border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit transition-colors hover:text-storm-gray-500',
+        'inline-flex w-full items-center gap-2.5 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit',
         tableHeadSortButtonAlignClasses[align],
       )}
     >
       <span>{children}</span>
       <TableSortIcon direction={sortDirection} />
-    </button>
+    </span>
   ) : (
     children
   );
@@ -138,10 +138,31 @@ export function TableHead({
         tableHeadPaddingClassName,
         tableHeaderClassName,
         !isSortable && tableAlignClasses[align],
+        isSortable && 'cursor-pointer select-none hover:text-storm-gray-500',
         className,
       )}
       aria-sort={resolveAriaSort(sortDirection, isSortable)}
+      tabIndex={isSortable ? 0 : undefined}
       {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+
+        onSort();
+      }}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onSort();
+        }
+      }}
     >
       {content}
     </th>

package/src/web/layout/DashboardLayout.tsx

@@ -27,11 +27,11 @@ export function DashboardLayout({
   mainClassName,
 }: DashboardLayoutProps) {
   return (
-    <div className={cn('flex h-screen min-w-0 overflow-hidden flex-row bg-storm-gray-0', className)}>
-      <div className="max-md:contents md:h-screen md:shrink-0">
+    <div className={cn('flex h-dvh min-w-0 overflow-hidden flex-row bg-storm-gray-0', className)}>
+      <div className="max-md:contents md:h-dvh md:shrink-0">
         <Sidebar {...sidebar} />
       </div>
-      <div className="flex h-screen min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+      <div className="flex h-dvh min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         <SidebarMobileHeader {...mobileHeader} />
         <AppHeader {...header} />
         <main className={mainClassName ?? 'min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto p-4 xl:p-6'}>{children}</main>

package/src/web/layout/Sidebar.tsx

@@ -173,12 +173,12 @@ export function Sidebar({
       />
 
       {showCollapsedRail && mobileOpen ? (
-        <div className="h-screen w-[76px] shrink-0" aria-hidden />
+        <div className="h-dvh w-[76px] shrink-0" aria-hidden />
       ) : null}
 
       <aside
         className={cn(
-          'fixed inset-y-0 left-0 z-50 flex h-screen w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl',
+          'fixed inset-y-0 left-0 z-50 flex h-dvh w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl',
           'transition-[transform,width,padding,gap] duration-300 ease-in-out will-change-[transform,width]',
           mobileOpen ? 'translate-x-0' : '-translate-x-full pointer-events-none',
           'md:relative md:z-auto md:w-[76px] md:translate-x-0 md:pointer-events-auto md:shadow-none md:items-center md:gap-2 md:px-3 md:py-4',