@open-mercato/ui 0.6.8-develop.7072.1.19c2a8bbe0 → 0.6.8-develop.7077.1.94f1126c13

package/src/backend/AppShell.tsx

@@ -411,6 +411,19 @@ function resolveItemKey(item: { id?: string; href: string }): string {
   return item.href
 }
 
+// Horizontal padding lives on each sidebar block rather than on the <aside>, so the scroll
+// container never needs a negative-margin bleed to reach the panel edges. The transition keeps the
+// compact/expanded padding step in sync with the aside's width animation.
+function sidebarBlockPadding(compact: boolean): string {
+  return `${compact ? 'px-2' : 'px-3'} transition-[padding] duration-200 ease-out`
+}
+
+// An InjectionSpot renders nothing when no widget is registered, so its wrapper must collapse
+// instead of surviving as an empty flex child that still costs a full `gap-3`.
+function sidebarInjectionWrapper(compact: boolean): string {
+  return `${sidebarBlockPadding(compact)} empty:hidden`
+}
+
 function SerializedIcon({ markup }: { markup: string }) {
   return <span aria-hidden="true" dangerouslySetInnerHTML={{ __html: markup }} />
 }
@@ -804,11 +817,12 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
   ) {
     const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
     const lastVisibleIndex = sortedSections.length - 1
+    const blockPadding = sidebarBlockPadding(compact)
 
     return (
       <div className="flex h-full flex-col gap-3">
         {!hideHeader && (
-          <div className="mb-2">
+          <div className={`mb-2 ${blockPadding}`}>
             <Link
               href="/backend"
               className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
@@ -820,16 +834,18 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           </div>
         )}
         {!compact && !hideSearch && (
-          <SearchInput
-            value={navQuery}
-            onChange={setNavQuery}
-            placeholder={t('appShell.searchNavPlaceholder', 'Search...')}
-            aria-label={t('appShell.searchNavAria', 'Search navigation')}
-            clearLabel={t('appShell.searchNavClear', 'Clear search')}
-            className="mb-2"
-          />
+          <div className={blockPadding}>
+            <SearchInput
+              value={navQuery}
+              onChange={setNavQuery}
+              placeholder={t('appShell.searchNavPlaceholder', 'Search...')}
+              aria-label={t('appShell.searchNavAria', 'Search navigation')}
+              clearLabel={t('appShell.searchNavClear', 'Clear search')}
+              className="mb-2"
+            />
+          </div>
         )}
-        <div data-sidebar-scroll="true" className={`flex flex-1 flex-col gap-3 overflow-y-auto scrollbar-hide pr-1 ${compact ? '-ml-2 pl-2' : '-ml-3 pl-3'}`}>
+        <div data-sidebar-scroll="true" className="flex flex-1 flex-col gap-3 overflow-x-hidden overflow-y-auto scrollbar-hide">
           <nav className="flex flex-col gap-2">
           {sortedSections.map((section, sectionIndex) => {
             const sectionNavQueryActive = hideSearch ? false : navQueryActive
@@ -909,7 +925,11 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
             }
 
             return (
-              <div key={section.id}>
+              <div
+                key={section.id}
+                className={`${blockPadding} ${sectionIndex !== lastVisibleIndex ? 'border-b pb-2' : ''}`}
+                data-sidebar-group="true"
+              >
                 {!compact && (
                   <Button
                     variant="muted"
@@ -926,7 +946,6 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                     {sortedItems.map((item) => renderSectionItem(item))}
                   </div>
                 )}
-                {sectionIndex !== lastVisibleIndex && <div className={`my-2 border-t ${compact ? '-ml-2 -mr-3' : '-ml-3 -mr-4'}`} />}
               </div>
             )
           })}
@@ -937,9 +956,12 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
   }
 
   function renderSidebar(compact: boolean, hideHeader?: boolean, forceMainOnly?: boolean) {
+    const blockPadding = sidebarBlockPadding(compact)
+    const injectionWrapper = sidebarInjectionWrapper(compact)
+
     if (!isChromeReady && isChromeLoading) {
       return (
-        <div className="flex flex-col min-h-full gap-3" data-testid="backend-chrome-loading">
+        <div className={`flex min-h-full flex-col gap-3 ${blockPadding}`} data-testid="backend-chrome-loading">
           {!hideHeader ? (
             <div className="mb-2">
               <Link
@@ -952,7 +974,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               </Link>
             </div>
           ) : null}
-          <div className="flex flex-1 flex-col gap-3 pr-1">
+          <div className="flex flex-1 flex-col gap-3">
             <div className="space-y-3">
               <div className="h-8 rounded bg-muted/50" />
               <div className="space-y-2 pl-1">
@@ -1007,7 +1029,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     return (
       <div className="flex h-full flex-col gap-3">
         {!hideHeader && (
-          <div className="mb-2">
+          <div className={`mb-2 ${blockPadding}`}>
             <Link
               href="/backend"
               className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
@@ -1019,22 +1041,26 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           </div>
         )}
         {shouldRenderSidebarInjectionSpots ? (
-          <InjectionSpot
-            spotId={BACKEND_SIDEBAR_TOP_INJECTION_SPOT_ID}
-            context={injectionContext}
-          />
+          <div className={injectionWrapper} data-sidebar-injection-wrapper="true">
+            <InjectionSpot
+              spotId={BACKEND_SIDEBAR_TOP_INJECTION_SPOT_ID}
+              context={injectionContext}
+            />
+          </div>
         ) : null}
         {!compact && (
-          <SearchInput
-            value={navQuery}
-            onChange={setNavQuery}
-            placeholder={t('appShell.searchNavPlaceholder', 'Search...')}
-            aria-label={t('appShell.searchNavAria', 'Search navigation')}
-            clearLabel={t('appShell.searchNavClear', 'Clear search')}
-            className="mb-2"
-          />
+          <div className={blockPadding}>
+            <SearchInput
+              value={navQuery}
+              onChange={setNavQuery}
+              placeholder={t('appShell.searchNavPlaceholder', 'Search...')}
+              aria-label={t('appShell.searchNavAria', 'Search navigation')}
+              clearLabel={t('appShell.searchNavClear', 'Clear search')}
+              className="mb-2"
+            />
+          </div>
         )}
-        <div data-sidebar-scroll="true" className={`flex flex-1 flex-col gap-3 overflow-y-auto scrollbar-hide pr-1 ${compact ? '-ml-2 pl-2' : '-ml-3 pl-3'}`}>
+        <div data-sidebar-scroll="true" className="flex flex-1 flex-col gap-3 overflow-x-hidden overflow-y-auto scrollbar-hide">
           {(() => {
               const isSettingsPath = (href: string) => {
                 if (href === '/backend/settings') return true
@@ -1063,10 +1089,12 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                 <>
                   <nav className="flex flex-col gap-2" data-testid="sidebar">
                     {shouldRenderSidebarInjectionSpots ? (
-                      <InjectionSpot
-                        spotId={BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID}
-                        context={injectionContext}
-                      />
+                      <div className={injectionWrapper} data-sidebar-injection-wrapper="true">
+                        <InjectionSpot
+                          spotId={BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID}
+                          context={injectionContext}
+                        />
+                      </div>
                     ) : null}
                     {mainGroups.map((g, gi) => {
                       const groupId = resolveGroupKey(g)
@@ -1080,7 +1108,11 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                       })
                       if (visibleItems.length === 0) return null
                       return (
-                        <div key={groupId}>
+                        <div
+                          className={`${blockPadding} ${gi !== mainLastVisibleGroupIndex ? 'border-b pb-2' : ''}`}
+                          key={groupId}
+                          data-sidebar-group="true"
+                        >
                           {!compact && (
                             <Button
                               variant="muted"
@@ -1173,7 +1205,6 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                               })}
                             </div>
                           )}
-                          {gi !== mainLastVisibleGroupIndex && <div className={`my-2 border-t ${compact ? '-ml-2 -mr-3' : '-ml-3 -mr-4'}`} />}
                         </div>
                       )
                     })}
@@ -1182,7 +1213,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               )
             })()}
         </div>
-        <div className="sticky bottom-0 bg-background pb-1">
+        <div className={`sticky bottom-0 bg-background pb-1 ${injectionWrapper}`} data-sidebar-injection-wrapper="true">
           {shouldRenderSidebarInjectionSpots ? (
             <InjectionSpot
               spotId={BACKEND_SIDEBAR_NAV_FOOTER_INJECTION_SPOT_ID}
@@ -1227,15 +1258,17 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     if (!sections) return null
     return (
       <div className="flex h-full flex-col gap-2">
-        <Link
-          href="/backend"
-          className="inline-flex items-center gap-2 rounded-lg px-2 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
-          data-testid="appshell-section-back-to-main"
-          aria-label={t('backend.nav.backToMain', 'Back to Main')}
-        >
-          <ChevronLeft className="size-4 shrink-0" aria-hidden />
-          <span className="truncate">{title}</span>
-        </Link>
+        <div className={sidebarBlockPadding(false)}>
+          <Link
+            href="/backend"
+            className="inline-flex items-center gap-2 rounded-lg px-2 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
+            data-testid="appshell-section-back-to-main"
+            aria-label={t('backend.nav.backToMain', 'Back to Main')}
+          >
+            <ChevronLeft className="size-4 shrink-0" aria-hidden />
+            <span className="truncate">{title}</span>
+          </Link>
+        </div>
         <div className="min-h-0 flex-1">
           {renderSectionSidebar(sections, title, false, true, true)}
         </div>
@@ -1304,7 +1337,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
         {effectiveCollapsed ? <PanelLeftOpen className="size-4" /> : <PanelLeftClose className="size-4" />}
       </button>
       {/* Desktop main sidebar */}
-      <aside ref={sidebarAsideRef} className={`${asideClassesBase} ${effectiveCollapsed ? 'px-2' : 'px-3'} hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative transition-[width,padding] duration-200 ease-out`} style={{ width: asideWidth }}>
+      <aside ref={sidebarAsideRef} className={`${asideClassesBase} px-0 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative transition-[width] duration-200 ease-out`} style={{ width: asideWidth }}>
         {renderSidebar(effectiveCollapsed, false, isSectionView)}
         {/* Scroll affordance — gradient fade + clickable chevron that flips up when
             the user reaches the bottom and disappears when nothing is scrollable
@@ -1349,7 +1382,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           original swap behavior to fit the narrow width. */}
       {isSectionView ? (
         <aside
-          className={`${asideClassesBase} px-3 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`}
+          className={`${asideClassesBase} px-0 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`}
           style={{ width: '240px' }}
           data-testid="appshell-section-sidebar"
         >
@@ -1571,7 +1604,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                   ? `mobile-drawer-tab-${mobileDrawerView === 'main' ? 'main' : 'section'}`
                   : undefined
               }
-              className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-3"
+              className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden py-3"
             >
               {/* Force expanded sidebar in mobile drawer, hide its header and collapse toggle */}
               {renderSidebar(false, true, mobileDrawerView === 'main')}

package/src/backend/__tests__/AppShell.test.tsx

@@ -9,6 +9,7 @@ import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWith
 
 const mockInjectionSpot = jest.fn()
 let mockPathname = '/backend/users'
+let mockInjectionSpotRendersNothing = false
 
 jest.mock('next/link', () => {
   const React = require('react')
@@ -39,6 +40,7 @@ jest.mock('next/navigation', () => ({
 jest.mock('../injection/InjectionSpot', () => ({
   InjectionSpot: (props: { spotId: string; context?: Record<string, unknown> }) => {
     mockInjectionSpot(props)
+    if (mockInjectionSpotRendersNothing) return null
     return <div data-testid={`injection-spot:${props.spotId}`} />
   },
 }))
@@ -55,7 +57,9 @@ jest.mock('../injection/eventBridge', () => ({
 }))
 
 jest.mock('../injection/StatusBadgeInjectionSpot', () => ({
-  StatusBadgeInjectionSpot: () => <div data-testid="status-badge-injection-spot" />,
+  StatusBadgeInjectionSpot: () => (
+    mockInjectionSpotRendersNothing ? null : <div data-testid="status-badge-injection-spot" />
+  ),
 }))
 
 jest.mock('../operations/LastOperationBanner', () => ({
@@ -117,6 +121,7 @@ describe('AppShell', () => {
   beforeEach(() => {
     mockInjectionSpot.mockClear()
     mockPathname = '/backend/users'
+    mockInjectionSpotRendersNothing = false
   })
 
   beforeAll(() => {
@@ -623,6 +628,116 @@ describe('AppShell', () => {
     }
   })
 
+  describe('sidebar layout', () => {
+    const multiGroups = [
+      groups[0],
+      {
+        id: 'commerce',
+        name: 'Commerce',
+        items: [{ href: '/backend/orders', title: 'Orders' }],
+      },
+      {
+        id: 'ops',
+        name: 'Ops',
+        items: [{ href: '/backend/jobs', title: 'Jobs' }],
+      },
+    ]
+
+    it('collapses sidebar injection-spot wrappers when their spots render nothing', async () => {
+      mockInjectionSpotRendersNothing = true
+
+      const { container } = renderWithProviders(
+        <AppShell email="demo@example.com" groups={groups}>
+          <div>Child content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Users List')).toBeInTheDocument()
+      })
+
+      const wrappers = Array.from(container.querySelectorAll('[data-sidebar-injection-wrapper="true"]'))
+      expect(wrappers.length).toBeGreaterThan(0)
+      for (const wrapper of wrappers) {
+        // The spot rendered nothing, so the wrapper is an empty flex child of the sidebar's
+        // `gap-3` column and would still cost a full gap unless it collapses itself.
+        expect(wrapper.children).toHaveLength(0)
+        expect(wrapper).toHaveClass('empty:hidden')
+      }
+    })
+
+    it('keeps every sidebar injection spot inside a self-collapsing wrapper', async () => {
+      const { container } = renderWithProviders(
+        <AppShell email="demo@example.com" groups={groups}>
+          <div>Child content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Users List')).toBeInTheDocument()
+      })
+
+      const sidebarSpotIds = ['backend:sidebar:top', 'backend:sidebar:nav', 'backend:sidebar:nav:footer', 'backend:sidebar:footer']
+      for (const spotId of sidebarSpotIds) {
+        const spot = container.querySelector(`[data-testid="injection-spot:${spotId}"]`)
+        expect(spot).not.toBeNull()
+        expect(spot!.closest('[data-sidebar-injection-wrapper="true"]')).not.toBeNull()
+      }
+    })
+
+    it('renders group separators on the group wrapper itself, skipping the last visible group', async () => {
+      const { container } = renderWithProviders(
+        <AppShell email="demo@example.com" groups={multiGroups}>
+          <div>Child content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Orders')).toBeInTheDocument()
+      })
+
+      const sidebar = screen.getByTestId('sidebar')
+      const groupWrappers = Array.from(sidebar.querySelectorAll('[data-sidebar-group="true"]'))
+      expect(groupWrappers).toHaveLength(multiGroups.length)
+      groupWrappers.forEach((wrapper, index) => {
+        const isLast = index === groupWrappers.length - 1
+        expect(wrapper).toHaveClass(isLast ? 'px-3' : 'border-b')
+        expect(wrapper.classList.contains('border-b')).toBe(!isLast)
+        expect(wrapper.classList.contains('pb-2')).toBe(!isLast)
+      })
+
+      // The old standalone bleeding separator elements must not come back — they were what
+      // forced the scroll container's negative-margin bleed in the first place.
+      expect(container.querySelectorAll('[data-sidebar-scroll="true"] div.border-t')).toHaveLength(0)
+    })
+
+    it('pads sidebar content blocks instead of bleeding the scroll container out of the aside', async () => {
+      const { container } = renderWithProviders(
+        <AppShell email="demo@example.com" groups={groups}>
+          <div>Child content</div>
+        </AppShell>,
+        { dict },
+      )
+
+      await waitFor(() => {
+        expect(screen.getByText('Users List')).toBeInTheDocument()
+      })
+
+      const scrollContainers = Array.from(container.querySelectorAll('[data-sidebar-scroll="true"]'))
+      expect(scrollContainers.length).toBeGreaterThan(0)
+      for (const scroller of scrollContainers) {
+        expect(scroller).toHaveClass('overflow-x-hidden')
+        for (const className of Array.from(scroller.classList)) {
+          expect(className.startsWith('-ml-')).toBe(false)
+          expect(className.startsWith('-mr-')).toBe(false)
+        }
+      }
+    })
+  })
+
   describe('two-level sidebar (settings/profile mode)', () => {
     it('renders main + section sidebars side-by-side when on a settings path', async () => {
       mockPathname = '/backend/entities/user'

package/src/backend/sidebar/SidebarCustomizationEditor.tsx

@@ -1579,11 +1579,10 @@ function SidebarPreview({
 
   return (
     <div className="relative w-[240px] overflow-hidden rounded-xl border bg-background shadow-sm">
-      {/* Match AppShell's outer aside: border-r, py-4, px-3 — minus border-r since the
-          card border already serves that purpose, plus rounded so it reads as a preview tile. */}
-      <div className="flex flex-col gap-3 px-3 py-4">
+      {/* Match AppShell's full-width group boxes with padding applied by each inner region. */}
+      <div className="flex flex-col gap-3 py-4">
         {/* Brand block — same classes as AppShell brand tile */}
-        <div className="mb-2">
+        <div className="mb-2 px-3">
           <div className="flex items-center gap-3 rounded-xl p-3">
             <Image
               src="/open-mercato.svg"
@@ -1596,11 +1595,13 @@ function SidebarPreview({
           </div>
         </div>
         {/* Search input mock — same container styling as the real sidebar */}
-        <div className="mb-2 flex items-center gap-2 rounded-lg border border-border bg-background pl-2.5 pr-2 py-2 shadow-sm">
-          <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden />
-          <span className="min-w-0 flex-1 text-sm text-muted-foreground/70 truncate">
-            {t('appShell.sidebarCustomizationPreviewSearchPlaceholder', 'Search...')}
-          </span>
+        <div className="px-3">
+          <div className="mb-2 flex items-center gap-2 rounded-lg border border-border bg-background pl-2.5 pr-2 py-2 shadow-sm">
+            <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+            <span className="min-w-0 flex-1 text-sm text-muted-foreground/70 truncate">
+              {t('appShell.sidebarCustomizationPreviewSearchPlaceholder', 'Search...')}
+            </span>
+          </div>
         </div>
         {groups.length === 0 ? (
           <p className="px-2 text-sm text-muted-foreground">
@@ -1612,7 +1613,10 @@ function SidebarPreview({
               const visibleItems = group.items.filter((item) => item.hidden !== true)
               if (visibleItems.length === 0) return null
               return (
-                <div key={resolveGroupKey(group)}>
+                <div
+                  key={resolveGroupKey(group)}
+                  className={`px-3 ${gi < groups.length - 1 ? 'border-b pb-2' : ''}`}
+                >
                   <div className="w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1">
                     <span>{group.name}</span>
                   </div>
@@ -1641,7 +1645,6 @@ function SidebarPreview({
                       )
                     })}
                   </div>
-                  {gi < groups.length - 1 ? <div className="my-2 border-t -ml-3 -mr-4" /> : null}
                 </div>
               )
             })}