From f8b85d4b4e1f830b473b06d42a380659355485e3 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 1 May 2026 16:13:54 -0700
Subject: [PATCH] fix sidebar product updates spacing

---
 src/components/ProductUpdates.tsx | 83 +++++++++++++++++--------------
 1 file changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/components/ProductUpdates.tsx b/src/components/ProductUpdates.tsx
index b1da32a93..0d88853a7 100644
--- a/src/components/ProductUpdates.tsx
+++ b/src/components/ProductUpdates.tsx
@@ -81,10 +81,10 @@ export default function ProductUpdates({
 
     const showNewVersionPopup = Boolean(
         latestVersion &&
-        valid(latestVersion) &&
-        valid(currentVersion) &&
-        ignoredVersionUpdate !== latestVersion &&
-        gt(latestVersion, currentVersion)
+            valid(latestVersion) &&
+            valid(currentVersion) &&
+            ignoredVersionUpdate !== latestVersion &&
+            gt(latestVersion, currentVersion)
     );
 
     const filteredUpdates = data.updates.filter(
@@ -103,40 +103,51 @@ export default function ProductUpdates({
             )}
         >
             <div className="flex flex-col gap-1">
-                {filteredUpdates.length > 1 && (
-                    <small
-                        className={cn(
-                            "text-xs text-muted-foreground flex items-center gap-1 mt-2",
-                            showMoreUpdatesText
-                                ? "animate-in fade-in duration-300"
-                                : "opacity-0"
+                {filteredUpdates.length > 0 && (
+                    <div className="mt-3 flex flex-col gap-2">
+                        {filteredUpdates.length > 1 && (
+                            <small
+                                className={cn(
+                                    "text-xs text-muted-foreground flex items-center gap-1",
+                                    showMoreUpdatesText
+                                        ? "animate-in fade-in duration-300"
+                                        : "opacity-0"
+                                )}
+                            >
+                                <BellIcon className="flex-none size-3" />
+                                <span>
+                                    {showNewVersionPopup
+                                        ? t("productUpdateMoreInfo", {
+                                              noOfUpdates:
+                                                  filteredUpdates.length
+                                          })
+                                        : t("productUpdateInfo", {
+                                              noOfUpdates:
+                                                  filteredUpdates.length
+                                          })}
+                                </span>
+                            </small>
                         )}
-                    >
-                        <BellIcon className="flex-none size-3" />
-                        <span>
-                            {showNewVersionPopup
-                                ? t("productUpdateMoreInfo", {
-                                      noOfUpdates: filteredUpdates.length
-                                  })
-                                : t("productUpdateInfo", {
-                                      noOfUpdates: filteredUpdates.length
-                                  })}
-                        </span>
-                    </small>
+                        <ProductUpdatesListPopup
+                            updates={filteredUpdates}
+                            show={filteredUpdates.length > 0}
+                            onDimissAll={() =>
+                                setProductUpdatesRead([
+                                    ...productUpdatesRead,
+                                    ...filteredUpdates.map(
+                                        (update) => update.id
+                                    )
+                                ])
+                            }
+                            onDimiss={(id) =>
+                                setProductUpdatesRead([
+                                    ...productUpdatesRead,
+                                    id
+                                ])
+                            }
+                        />
+                    </div>
                 )}
-                <ProductUpdatesListPopup
-                    updates={filteredUpdates}
-                    show={filteredUpdates.length > 0}
-                    onDimissAll={() =>
-                        setProductUpdatesRead([
-                            ...productUpdatesRead,
-                            ...filteredUpdates.map((update) => update.id)
-                        ])
-                    }
-                    onDimiss={(id) =>
-                        setProductUpdatesRead([...productUpdatesRead, id])
-                    }
-                />
             </div>
 
             <NewVersionAvailable