version-pill-react 1.2.4 → 1.2.6

package/dist/index.js

@@ -295,7 +295,9 @@ function VersionPill({
       }
     );
   };
+  const versionsArray = Array.isArray(versions) ? versions : [];
   const tasksArray = Array.isArray(roadmapTasks) ? roadmapTasks : [];
+  const ideasArray = Array.isArray(ideas) ? ideas : [];
   const groupedTasks = tasksArray.reduce((acc, task) => {
     const col = task.column || "backlog";
     if (!acc[col]) acc[col] = [];
@@ -306,22 +308,32 @@ function VersionPill({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(positionStyles[position], className), style: { display: "inline-flex" }, children: renderBadge() }),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
       position: "fixed",
-      inset: 0,
-      zIndex: 99999,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: "100vw",
+      height: "100vh",
+      zIndex: 2147483647,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      padding: 16
+      padding: 20,
+      boxSizing: "border-box"
     }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           onClick: () => setIsOpen(false),
           style: {
-            position: "absolute",
-            inset: 0,
-            background: "rgba(0,0,0,0.5)",
-            backdropFilter: "blur(4px)"
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            background: isLight ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.7)",
+            backdropFilter: "blur(4px)",
+            WebkitBackdropFilter: "blur(4px)"
           }
         }
       ),
@@ -330,31 +342,35 @@ function VersionPill({
         {
           style: {
             position: "relative",
+            zIndex: 1,
+            display: "flex",
+            flexDirection: "column",
             width: "100%",
-            maxWidth: 480,
-            maxHeight: "80vh",
-            overflow: "hidden",
-            borderRadius: 16,
-            boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)",
-            background: isLight ? "#fff" : "#18181b"
+            maxWidth: 400,
+            maxHeight: "min(480px, 70vh)",
+            borderRadius: 12,
+            boxShadow: isLight ? "0 20px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)" : "0 20px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)",
+            background: isLight ? "#fff" : "#1a1a1a",
+            overflow: "hidden"
           },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "div",
               {
                 style: {
-                  padding: 16,
-                  borderBottom: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`,
+                  flexShrink: 0,
+                  padding: "14px 16px",
+                  borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between"
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-                    project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 20 }, children: project.icon }),
+                    project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18 }, children: project.icon }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 12, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontWeight: 600, fontSize: 15, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 11, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
                         "v",
                         currentVersion
                       ] })
@@ -365,14 +381,21 @@ function VersionPill({
                     {
                       onClick: () => setIsOpen(false),
                       style: {
-                        padding: 4,
+                        width: 28,
+                        height: 28,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
                         borderRadius: 6,
-                        background: "transparent",
+                        background: isLight ? "#f5f5f5" : "#2a2a2a",
                         border: "none",
                         cursor: "pointer",
-                        color: isLight ? "#71717a" : "#a1a1aa"
+                        color: isLight ? "#71717a" : "#a1a1aa",
+                        transition: "background 150ms"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                      onMouseEnter: (e) => e.currentTarget.style.background = isLight ? "#e5e5e5" : "#3a3a3a",
+                      onMouseLeave: (e) => e.currentTarget.style.background = isLight ? "#f5f5f5" : "#2a2a2a",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
                     }
                   )
                 ]
@@ -382,125 +405,142 @@ function VersionPill({
               "div",
               {
                 style: {
+                  flexShrink: 0,
                   display: "flex",
-                  gap: 4,
-                  padding: "8px 16px",
-                  borderBottom: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`
+                  gap: 2,
+                  padding: "8px 12px",
+                  borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
+                  background: isLight ? "#fafafa" : "#151515"
                 },
                 children: ["changelog", "roadmap", "ideas"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "button",
                   {
                     onClick: () => setActiveTab(tab),
                     style: {
-                      padding: "6px 12px",
+                      padding: "6px 10px",
                       borderRadius: 6,
                       border: "none",
                       cursor: "pointer",
-                      fontSize: 13,
+                      fontSize: 12,
                       fontWeight: 500,
-                      background: activeTab === tab ? isLight ? "#f4f4f5" : "#27272a" : "transparent",
-                      color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#a1a1aa"
+                      background: activeTab === tab ? isLight ? "#fff" : "#2a2a2a" : "transparent",
+                      color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#71717a",
+                      boxShadow: activeTab === tab ? isLight ? "0 1px 2px rgba(0,0,0,0.05)" : "0 1px 2px rgba(0,0,0,0.2)" : "none",
+                      transition: "all 150ms"
                     },
                     children: [
-                      tab === "changelog" && "\u{1F680} Changelog",
-                      tab === "roadmap" && "\u{1F5FA}\uFE0F Roadmap",
-                      tab === "ideas" && "\u{1F4A1} Ideas"
+                      tab === "changelog" && "Changelog",
+                      tab === "roadmap" && "Roadmap",
+                      tab === "ideas" && "Ideas"
                     ]
                   },
                   tab
                 ))
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, overflowY: "auto", maxHeight: "50vh" }, children: [
-              activeTab === "changelog" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: versions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 40, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F680}" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No releases yet" })
-              ] }) : versions.slice(0, 5).map((version, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 16, paddingBottom: 16, borderBottom: idx < 4 ? `1px solid ${isLight ? "#f4f4f5" : "#27272a"}` : "none" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 16 }, children: version.emoji || "\u{1F4E6}" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, overflowY: "auto", padding: 12, minHeight: 0 }, children: [
+              activeTab === "changelog" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: versionsArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F680}" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No releases yet" })
+              ] }) : versionsArray.slice(0, 5).map((version, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12, paddingBottom: 12, borderBottom: idx < versionsArray.length - 1 && idx < 4 ? `1px solid ${isLight ? "#f0f0f0" : "#252525"}` : "none" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14 }, children: version.emoji || "\u{1F4E6}" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, fontSize: 13, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "span",
                     {
                       style: {
-                        padding: "2px 6px",
-                        fontSize: 10,
+                        padding: "1px 5px",
+                        fontSize: 9,
                         fontWeight: 500,
-                        borderRadius: 4,
-                        background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : "#f4f4f5",
-                        color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : "#52525b"
+                        borderRadius: 3,
+                        background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : isLight ? "#f4f4f5" : "#2a2a2a",
+                        color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : isLight ? "#52525b" : "#a1a1aa"
                       },
                       children: version.type
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, color: isLight ? "#71717a" : "#a1a1aa", marginBottom: 8 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", marginBottom: 6 }, children: [
                   "v",
                   version.version,
                   " \xB7 ",
                   new Date(version.date).toLocaleDateString()
                 ] }),
-                version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 14, color: isLight ? "#52525b" : "#d4d4d8", marginBottom: 8 }, children: version.description }),
-                version.features && version.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { margin: 0, paddingLeft: 0, listStyle: "none" }, children: version.features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { display: "flex", alignItems: "flex-start", gap: 8, fontSize: 14, color: isLight ? "#52525b" : "#d4d4d8", marginBottom: 4 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", marginTop: 2 }, children: "\u2713" }),
-                  feature
-                ] }, i)) })
+                version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", margin: "0 0 6px 0", lineHeight: 1.5 }, children: version.description }),
+                version.features && version.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { style: { margin: 0, paddingLeft: 0, listStyle: "none" }, children: [
+                  version.features.slice(0, 4).map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { display: "flex", alignItems: "flex-start", gap: 6, fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", marginBottom: 2, lineHeight: 1.4 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", fontSize: 11 }, children: "\u2713" }),
+                    feature
+                  ] }, i)),
+                  version.features.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { fontSize: 11, color: isLight ? "#a1a1aa" : "#525252", marginTop: 2 }, children: [
+                    "+",
+                    version.features.length - 4,
+                    " more..."
+                  ] })
+                ] })
               ] }, idx)) }),
-              activeTab === "roadmap" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 40, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F5FA}\uFE0F" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No public roadmap items" })
-              ] }) : ["in-progress", "todo", "backlog", "done"].map((col) => {
+              activeTab === "roadmap" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F5FA}\uFE0F" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No public roadmap items" })
+              ] }) : ["in-progress", "todo", "backlog"].map((col) => {
                 const tasks = groupedTasks[col];
                 if (!tasks || tasks.length === 0) return null;
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 16 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#71717a" : "#a1a1aa", marginBottom: 8, textTransform: "uppercase" }, children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: 10, fontWeight: 600, color: isLight ? "#a1a1aa" : "#71717a", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.5px" }, children: [
                     COLUMN_LABELS[col] || col,
                     " (",
                     tasks.length,
                     ")"
                   ] }),
-                  tasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  tasks.slice(0, 4).map((task) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
                       style: {
-                        padding: 12,
-                        marginBottom: 8,
-                        borderRadius: 8,
-                        background: isLight ? "#f4f4f5" : "#27272a"
+                        padding: "8px 10px",
+                        marginBottom: 4,
+                        borderRadius: 5,
+                        background: isLight ? "#f5f5f5" : "#252525"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "span",
                           {
                             style: {
-                              width: 8,
-                              height: 8,
+                              width: 6,
+                              height: 6,
                               borderRadius: "50%",
-                              background: TYPE_COLORS[task.type] || "#71717a"
+                              background: TYPE_COLORS[task.type] || "#71717a",
+                              flexShrink: 0
                             }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, color: isLight ? "#18181b" : "#fff" }, children: task.title })
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, color: isLight ? "#18181b" : "#fff", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: task.title })
                       ] })
                     },
                     task.id
-                  ))
+                  )),
+                  tasks.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", marginTop: 4 }, children: [
+                    "+",
+                    tasks.length - 4,
+                    " more..."
+                  ] })
                 ] }, col);
               }) }),
-              activeTab === "ideas" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: ideas.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 40, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F4A1}" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No feature requests yet" })
-              ] }) : ideas.map((idea) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              activeTab === "ideas" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: ideasArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F4A1}" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No feature requests yet" })
+              ] }) : ideasArray.slice(0, 5).map((idea) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 "div",
                 {
                   style: {
-                    padding: 12,
-                    marginBottom: 8,
-                    borderRadius: 8,
-                    background: isLight ? "#f4f4f5" : "#27272a",
+                    padding: 10,
+                    marginBottom: 6,
+                    borderRadius: 6,
+                    background: isLight ? "#f5f5f5" : "#252525",
                     display: "flex",
                     alignItems: "flex-start",
-                    gap: 12
+                    gap: 10
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -510,23 +550,20 @@ function VersionPill({
                           display: "flex",
                           flexDirection: "column",
                           alignItems: "center",
-                          padding: "4px 8px",
-                          borderRadius: 6,
-                          background: isLight ? "#fff" : "#18181b",
-                          minWidth: 40
+                          padding: "3px 6px",
+                          borderRadius: 4,
+                          background: isLight ? "#fff" : "#1a1a1a",
+                          minWidth: 32
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 10, color: isLight ? "#71717a" : "#a1a1aa" }, children: "votes" })
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 9, color: isLight ? "#71717a" : "#71717a" }, children: "votes" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 4 }, children: idea.title }),
-                      idea.description && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 13, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
-                        idea.description.slice(0, 100),
-                        "..."
-                      ] })
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 2 }, children: idea.title }),
+                      idea.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: idea.description.slice(0, 80) })
                     ] })
                   ]
                 },
@@ -537,9 +574,10 @@ function VersionPill({
               "div",
               {
                 style: {
-                  padding: 12,
-                  borderTop: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`,
-                  background: isLight ? "#fafafa" : "#0a0a0a",
+                  flexShrink: 0,
+                  padding: "10px 12px",
+                  borderTop: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
+                  background: isLight ? "#fafafa" : "#151515",
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between"
@@ -551,7 +589,7 @@ function VersionPill({
                       href: "https://versionpill.com",
                       target: "_blank",
                       rel: "noopener noreferrer",
-                      style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#52525b", textDecoration: "none" },
+                      style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", textDecoration: "none" },
                       children: "Powered by Version Pill"
                     }
                   ),
@@ -562,14 +600,17 @@ function VersionPill({
                       target: "_blank",
                       rel: "noopener noreferrer",
                       style: {
-                        padding: "6px 12px",
-                        fontSize: 12,
+                        padding: "5px 10px",
+                        fontSize: 11,
                         fontWeight: 500,
-                        borderRadius: 6,
+                        borderRadius: 5,
                         background: "#22c55e",
                         color: "#fff",
-                        textDecoration: "none"
+                        textDecoration: "none",
+                        transition: "background 150ms"
                       },
+                      onMouseEnter: (e) => e.currentTarget.style.background = "#16a34a",
+                      onMouseLeave: (e) => e.currentTarget.style.background = "#22c55e",
                       children: "View All \u2192"
                     }
                   )