@olwiba/ui 0.2.13 → 0.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/app/AppShell.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { useCallback, type ReactNode } from 'react';
 import {
   BellIcon,
   CreditCardIcon,
@@ -249,12 +249,16 @@ function ShellSidebar({
   sidebarPosition: 'viewport' | 'contained';
 }) {
   const fallbackLogo = typeof brand.name === 'string' ? brand.name.slice(0, 1).toUpperCase() : null;
+  const { isMobile, setOpenMobile } = useSidebar();
+  const closeMobileMenu = useCallback(() => {
+    if (isMobile) setOpenMobile(false);
+  }, [isMobile, setOpenMobile]);
 
   return (
     <Sidebar side={side} collapsible={collapsible} sidebarPosition={sidebarPosition}>
       <SidebarHeader className="py-3">
         <SidebarMenu>
-          <SidebarMenuItem>
+          <SidebarMenuItem onClickCapture={closeMobileMenu}>
             <SidebarMenuButton
               asChild
               size="lg"
@@ -295,7 +299,7 @@ function ShellSidebar({
           <SidebarGroupContent className="flex flex-col gap-2">
             {action && (
               <SidebarMenu>
-                <SidebarMenuItem>
+                <SidebarMenuItem onClickCapture={closeMobileMenu}>
                   {action.href ? (
                     <SidebarMenuButton
                       asChild
@@ -328,7 +332,7 @@ function ShellSidebar({
 
             <SidebarMenu>
               {navItems.map((item) => (
-                <SidebarMenuItem key={item.label}>
+                <SidebarMenuItem key={item.label} onClickCapture={closeMobileMenu}>
                   <SidebarMenuButton asChild tooltip={item.label} isActive={item.isActive}>
                     {renderLink({
                       href: item.href,

package/src/app/AuthSection.tsx

@@ -25,7 +25,27 @@ const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) =>
 
 // ─── Centered layout ──────────────────────────────────────────────────────────
 
-function CenteredAuth({ children, brand, className }: { children: React.ReactNode; brand?: React.ReactNode; className?: string }) {
+function CenteredAuth({ children, brand, framed, className }: { children: React.ReactNode; brand?: React.ReactNode; framed?: boolean; className?: string }) {
+  if (framed) {
+    return (
+      // Framed: a page frame is already supplying the background, the page
+      // padding, and — with a navbar and footer around it — the height. All
+      // three have to come off here or they are applied twice: padding inside
+      // padding, and a full-viewport section that pushes the footer below the
+      // fold on every auth screen.
+      //
+      // The card fills the content column on a phone, matching the contact
+      // form, and only takes its reading width once there is room for the
+      // page to centre it.
+      <section className={cn('flex flex-col py-6 sm:py-10', className)}>
+        <div className="mx-auto w-full max-w-none sm:my-auto sm:max-w-md">
+          {brand && <div className="mb-8 text-center">{brand}</div>}
+          {children}
+        </div>
+      </section>
+    );
+  }
+
   return (
     // `min-h-dvh`, not `min-h-screen`: on mobile `100vh` is the viewport with
     // the browser chrome *retracted*, so a screen-height box is always taller
@@ -325,6 +345,18 @@ export interface AuthSectionProps extends AuthFormProps {
   children?: React.ReactNode;
   /** (split layout only) Custom content for the left decorative panel */
   panel?: React.ReactNode;
+  /**
+   * Render inside an existing page frame — one already providing the
+   * background, the horizontal padding, and a navbar and footer.
+   *
+   * Standalone (the default) the section owns the whole viewport, which is
+   * right for an auth screen that is the only thing on the page. It is wrong
+   * the moment there is chrome around it: the padding lands on top of the
+   * frame's own, and `min-h-dvh` guarantees the footer starts below the fold.
+   *
+   * (centered layout only)
+   */
+  framed?: boolean;
   className?: string;
 }
 
@@ -332,6 +364,7 @@ export function AuthSection({
   layout = 'centered',
   children,
   panel,
+  framed,
   className,
   ...formProps
 }: AuthSectionProps) {
@@ -348,7 +381,7 @@ export function AuthSection({
   const { brand, ...restFormProps } = formProps;
   const form = children ?? <DefaultForm {...restFormProps} />;
   return (
-    <CenteredAuth brand={brand} className={className}>
+    <CenteredAuth brand={brand} framed={framed} className={className}>
       {form}
     </CenteredAuth>
   );

package/src/marketing/Navbar.tsx

@@ -82,14 +82,19 @@ export function Navbar({
           </div>
         )}
 
-        {/* Mobile drawer — trigger on the right, panel slides in from the left */}
+        {/* Mobile controls + drawer trigger — keep quick toggles visible, with menu last. */}
         <Sheet open={open} onOpenChange={setOpen}>
-          <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="col-start-3 justify-self-end md:hidden">
-              <Menu className="size-5" />
-              <span className="sr-only">Open menu</span>
-            </Button>
-          </SheetTrigger>
+          <div className="col-start-3 flex items-center justify-end gap-1 md:hidden">
+            {controls?.map((control, i) => (
+              <React.Fragment key={i}>{control}</React.Fragment>
+            ))}
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Menu className="size-5" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </SheetTrigger>
+          </div>
           <SheetContent side="left" className="w-72">
             {/* Brand row alone at the top — leaves the top-right corner to the built-in close */}
             <div className="flex items-center pb-4">
@@ -105,13 +110,6 @@ export function Navbar({
                 })}
               </span>
             </div>
-            {controls?.length ? (
-              <div className="mb-4 flex w-full items-center justify-between gap-1">
-                {controls.map((control, i) => (
-                  <React.Fragment key={i}>{control}</React.Fragment>
-                ))}
-              </div>
-            ) : null}
             <Separator />
             <nav className="mt-4 flex flex-col gap-1">
               {navLinks.map((link) => (