react-os-shell 0.6.2 → 0.6.3

package/dist/index.js

@@ -915,7 +915,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.6.2" ;
+var VERSION = "0.6.3" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -3050,11 +3050,13 @@ function StartMenu({
   const itemCls = `w-full flex items-center gap-2 rounded-lg ${sizeConfig.px} ${sizeConfig.py} ${sizeConfig.text}`;
   const flyoutH = flyoutItems.length * sizeConfig.itemH + 12;
   const menuWidth = sizeConfig.mw;
+  const menuRect = menuRef.current?.getBoundingClientRect();
+  const minTop = menuRect ? menuRect.top : taskbarPosition === "top" ? taskbarH + 4 : 4;
+  const maxBottom = menuRect ? menuRect.bottom : taskbarPosition === "bottom" ? window.innerHeight - taskbarH - 4 : window.innerHeight - 4;
   let flyoutTop = hoveredY - flyoutH / 2;
-  const minTop = taskbarPosition === "top" ? taskbarH + 4 : 4;
-  const maxBottom = taskbarPosition === "bottom" ? window.innerHeight - taskbarH - 4 : window.innerHeight - 4;
   if (flyoutTop < minTop) flyoutTop = minTop;
-  if (flyoutTop + flyoutH > maxBottom) flyoutTop = maxBottom - flyoutH;
+  if (flyoutTop + flyoutH > maxBottom) flyoutTop = Math.max(minTop, maxBottom - flyoutH);
+  const flyoutMaxH = maxBottom - flyoutTop;
   const handleSectionHover = (label, e) => {
     clearTimeout(hoverTimeout.current);
     const rect = e.currentTarget.getBoundingClientRect();
@@ -3262,8 +3264,8 @@ function StartMenu({
         "div",
         {
           ref: flyoutRef,
-          className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
-          style: { left: menuRef.current ? menuRef.current.getBoundingClientRect().right + 4 : menuWidth + 12, top: flyoutTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
+          className: `fixed ${sizeConfig.fw} rounded-2xl flex flex-col overflow-hidden`,
+          style: { left: menuRef.current ? menuRef.current.getBoundingClientRect().right + 4 : menuWidth + 12, top: flyoutTop, maxHeight: flyoutMaxH, animation: "submenu-in 0.1s ease-out", ...menuGlass },
           onMouseEnter: () => clearTimeout(hoverTimeout.current),
           onMouseLeave: () => {
             hoverTimeout.current = setTimeout(() => {
@@ -3271,7 +3273,7 @@ function StartMenu({
               setHoveredChild(null);
             }, 200);
           },
-          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1", children: flyoutItems.map((item) => {
+          children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto", children: flyoutItems.map((item) => {
             const hasChildren = !!item.children && item.children.length > 0;
             const isChildHovered = hoveredChild === item.to;
             return /* @__PURE__ */ jsxs(
@@ -3316,12 +3318,13 @@ function StartMenu({
         const subH = kids.length * sizeConfig.itemH + 12;
         let subTop = hoveredChildY - subH / 2;
         if (subTop < minTop) subTop = minTop;
-        if (subTop + subH > maxBottom) subTop = maxBottom - subH;
+        if (subTop + subH > maxBottom) subTop = Math.max(minTop, maxBottom - subH);
+        const subMaxH = maxBottom - subTop;
         return /* @__PURE__ */ jsx(
           "div",
           {
-            className: `fixed ${sizeConfig.fw} rounded-2xl overflow-hidden`,
-            style: { left: subLeft, top: subTop, animation: "submenu-in 0.1s ease-out", ...menuGlass },
+            className: `fixed ${sizeConfig.fw} rounded-2xl flex flex-col overflow-hidden`,
+            style: { left: subLeft, top: subTop, maxHeight: subMaxH, animation: "submenu-in 0.1s ease-out", ...menuGlass },
             onMouseEnter: () => {
               clearTimeout(hoverTimeout.current);
               clearTimeout(childHoverTimeout.current);
@@ -3329,7 +3332,7 @@ function StartMenu({
             onMouseLeave: () => {
               childHoverTimeout.current = setTimeout(() => setHoveredChild(null), 200);
             },
-            children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1", children: kids.map((child) => /* @__PURE__ */ jsxs("div", { children: [
+            children: /* @__PURE__ */ jsx("div", { className: "py-1 px-1 overflow-y-auto", children: kids.map((child) => /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs(
                 "button",
                 {