@orsetra/shared-ui 1.7.2 → 1.7.4

package/components/layout/sidebar/main-sidebar.tsx

@@ -96,14 +96,14 @@ export function MainSidebar({
 
       <div className={cn(
         "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out overflow-y-auto",
-        isMinimized ? "w-16" : "w-64 shadow-xl",
+        isMinimized ? "w-16" : "w-56 lg:w-60 xl:w-64 shadow-xl",
         isMinimized
           ? "translate-x-0"
           : (isOpen ? "translate-x-0" : "-translate-x-full")
       )}>
         <div className={cn(
-          "flex items-center h-16 border-b border-ui-border bg-white sticky top-0 z-10",
-          isMinimized ? "justify-center px-2" : "justify-between px-4"
+          "flex items-center h-14 border-b border-ui-border bg-white sticky top-0 z-10",
+          isMinimized ? "justify-center px-2" : "justify-between px-3 lg:px-4"
         )}>
           {!isMinimized && <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />}
           {isMinimized ? (
@@ -120,7 +120,7 @@ export function MainSidebar({
           )}
         </div>
 
-        <nav className={cn("space-y-1", isMinimized ? "p-2" : "p-3")}>
+        <nav className={cn("space-y-0.5 lg:space-y-1", isMinimized ? "p-2" : "p-2 lg:p-3")}>
           {mainMenuItems.map((item) => {
             const Icon = item.icon
             const hasSubMenu = (sidebarMenus[item.id]?.length ?? 0) > 0
@@ -135,7 +135,7 @@ export function MainSidebar({
 
             const itemClassName = cn(
               "w-full flex items-center text-left transition-all duration-150 font-medium",
-              isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
+              isMinimized ? "justify-center p-2 lg:p-3" : "gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2",
               isActive
                 ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
                 : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
@@ -182,13 +182,13 @@ export function MainSidebar({
 
                 {/* Inline accordion sub-items */}
                 {!isMinimized && isExpanded && hasSubMenu && (
-                  <div className="pl-4 pb-1">
+                  <div className="pl-3 lg:pl-4 pb-1">
                     {sidebarMenus[item.id].map((subItem) => (
                       <a
                         key={subItem.id}
                         href={buildSubItemHref(item.id, subItem.href)}
                         onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
-                        className="flex items-center gap-3 px-3 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
+                        className="flex items-center gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
                       >
                         <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
                         {subItem.name}

package/components/layout/sidebar/sidebar.tsx

@@ -69,8 +69,6 @@ export function useInjectSidebarNavigation(items: SubMenuItem[] | undefined, tit
 // ── Sidebar storage ───────────────────────────────────────────────────────────
 
 const SIDEBAR_STORAGE_KEY = "sidebar:state"
-const SIDEBAR_WIDTH = "14rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContext = {
@@ -200,13 +198,7 @@ const SidebarProvider = React.forwardRef<
         <SidebarContext.Provider value={contextValue}>
           <TooltipProvider delayDuration={0}>
             <div
-              style={
-                {
-                  "--sidebar-width": SIDEBAR_WIDTH,
-                  "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                  ...style,
-                } as React.CSSProperties
-              }
+              style={style ? (style as React.CSSProperties) : undefined}
               suppressHydrationWarning
               className={cn(
                 "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
@@ -267,7 +259,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   return (
     <div
-      className="h-screen sticky top-0 flex flex-col bg-gray-50 border-r border-ui-border min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
+      className="h-screen sticky top-0 flex flex-col bg-gray-50 min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
       style={{ width: isCollapsed ? "var(--sidebar-width-icon)" : "var(--sidebar-width)" }}
     >
       {/* Header */}
@@ -300,12 +292,12 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       {/* Section label — hidden when collapsed */}
       {!isCollapsed && (
         injectedItems === undefined ? (
-          <div className="h-10 flex items-center px-4 flex-shrink-0 gap-2">
+          <div className="h-8 lg:h-10 flex items-center px-3 lg:px-4 flex-shrink-0 gap-2 border-r border-ui-border">
             <div className="h-4 w-4 bg-gray-200 animate-pulse rounded flex-shrink-0" />
             <div className="h-2.5 w-20 bg-gray-200 animate-pulse rounded" />
           </div>
         ) : (injectedTitle || (currentMenu && sectionLabels[currentMenu])) ? (
-          <div className="h-10 flex items-center px-4 flex-shrink-0 gap-2">
+          <div className="h-8 lg:h-10 flex items-center px-3 lg:px-4 flex-shrink-0 gap-2 border-r border-ui-border">
             {isInjecting ? (
               <button
                 type="button"
@@ -334,8 +326,8 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
       {/* Nav */}
       <nav className={cn(
-        "flex-1 overflow-y-auto",
-        isCollapsed ? "px-1 py-3 space-y-0.5" : "px-3 py-4 space-y-1"
+        "flex-1 overflow-y-auto border-r border-ui-border",
+        isCollapsed ? "px-1 py-2 lg:py-3 space-y-0.5" : "px-2 lg:px-3 py-3 lg:py-4 space-y-0.5 lg:space-y-1"
       )}>
         {/* Secondary nav items — skeleton while injected but loading */}
         {injectedItems === undefined ? (
@@ -344,7 +336,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
               key={i}
               className={cn(
                 "flex items-center border-l-4 border-transparent animate-pulse",
-                isCollapsed ? "p-2 justify-center" : "px-3 py-2 gap-x-3"
+                isCollapsed ? "p-2 justify-center" : "px-2 lg:px-3 py-1.5 lg:py-2 gap-x-3"
               )}
             >
               <div className="h-4 w-4 bg-gray-200 flex-shrink-0" />
@@ -375,7 +367,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
               onClick={handleClick}
               className={cn(
                 "flex items-center transition-colors border-l-4",
-                isCollapsed ? "justify-center p-2" : "px-3 py-2 gap-x-3 text-sm",
+                isCollapsed ? "justify-center p-2" : "px-2 lg:px-3 py-1.5 lg:py-2 gap-x-3 text-sm",
                 isActive
                   ? "bg-interactive/10 text-interactive font-medium border-interactive"
                   : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
@@ -436,7 +428,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       </nav>
 
       {/* Collapse / expand toggle */}
-      <div className={cn("flex-shrink-0 p-2", isCollapsed ? "flex justify-center" : "flex justify-end")}>
+      <div className={cn("flex-shrink-0 p-2 border-r border-ui-border", isCollapsed ? "flex justify-center" : "flex justify-end")}>
         <button
           type="button"
           onClick={toggleSidebar}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",