From c536e2b42a10685996aed0ee9249b421cd0d599b Mon Sep 17 00:00:00 2001
From: ComputelessComputer <john@hyprnote.com>
Date: Mon, 23 Feb 2026 11:32:51 +0900
Subject: [PATCH 1/2] feat: Increase onboarding content spacing and padding

Adjust horizontal padding from px-1 to px-5 with corresponding
negative margins, and add bottom padding with negative margin to
improve visual spacing and content layout in onboarding screens.
---
 apps/desktop/src/components/onboarding/shared.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/desktop/src/components/onboarding/shared.tsx b/apps/desktop/src/components/onboarding/shared.tsx
index 7943b2cc69..588e9e1810 100644
--- a/apps/desktop/src/components/onboarding/shared.tsx
+++ b/apps/desktop/src/components/onboarding/shared.tsx
@@ -113,7 +113,7 @@ export function OnboardingSection({
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.3, ease: "easeInOut" }}
-            className="overflow-hidden px-1 -mx-1"
+            className="overflow-hidden px-5 -mx-5 pb-5 -mb-5"
           >
             {children}
           </motion.div>

From 63028806245f775065b17ec6b3f218d2b828a1c2 Mon Sep 17 00:00:00 2001
From: ComputelessComputer <john@hyprnote.com>
Date: Mon, 23 Feb 2026 11:37:50 +0900
Subject: [PATCH 2/2] feat: Add wiggle animation to welcome tab icon

Add wiggle animation to the wave emoji in the onboarding welcome tab
that triggers on hover. Create wiggle keyframes with rotation
animation from 0 to 14 degrees and back. Fix tab icon visibility
logic to only hide icon on hover when tab is closable.

The wiggle animation provides friendly visual feedback when users
hover over the welcome tab, making the onboarding experience more
engaging and interactive.
---
 .../components/main/body/onboarding/index.tsx |  6 ++++-
 .../src/components/main/body/shared.tsx       |  4 ++-
 apps/desktop/src/styles/globals.css           | 25 +++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/components/main/body/onboarding/index.tsx b/apps/desktop/src/components/main/body/onboarding/index.tsx
index bffbb36690..09c99b46cc 100644
--- a/apps/desktop/src/components/main/body/onboarding/index.tsx
+++ b/apps/desktop/src/components/main/body/onboarding/index.tsx
@@ -37,7 +37,11 @@ export const TabItemOnboarding: TabItem<
 }) => {
   return (
     <TabItemBase
-      icon={<span className="text-sm">👋</span>}
+      icon={
+        <span className="text-sm inline-block origin-[70%_80%] group-hover:animate-wiggle">
+          👋
+        </span>
+      }
       title="Welcome"
       selected={tab.active}
       allowPin={false}
diff --git a/apps/desktop/src/components/main/body/shared.tsx b/apps/desktop/src/components/main/body/shared.tsx
index f89fe0eeb1..90ca20eafb 100644
--- a/apps/desktop/src/components/main/body/shared.tsx
+++ b/apps/desktop/src/components/main/body/shared.tsx
@@ -234,7 +234,9 @@ export function TabItemBase({
             <div
               className={cn([
                 "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
-                isHovered || isConfirmationOpen ? "opacity-0" : "opacity-100",
+                (isHovered && allowClose) || isConfirmationOpen
+                  ? "opacity-0"
+                  : "opacity-100",
               ])}
             >
               {finalizing ? (
diff --git a/apps/desktop/src/styles/globals.css b/apps/desktop/src/styles/globals.css
index 38b93df068..ace013dc49 100644
--- a/apps/desktop/src/styles/globals.css
+++ b/apps/desktop/src/styles/globals.css
@@ -16,6 +16,31 @@
   --animate-reveal-left: reveal-left 0.5s ease-out forwards;
   --animate-kbd-press: kbd-press 0.4s ease-out forwards;
 
+  --animate-wiggle: wiggle 1s ease-in-out infinite;
+
+  @keyframes wiggle {
+    0%, 100% {
+      transform: rotate(0deg);
+    }
+    15% {
+      transform: rotate(14deg);
+    }
+    30% {
+      transform: rotate(-8deg);
+    }
+    40% {
+      transform: rotate(7deg);
+    }
+    50% {
+      transform: rotate(-4deg);
+    }
+    60% {
+      transform: rotate(2deg);
+    }
+    70%, 100% {
+      transform: rotate(0deg);
+    }
+  }
   @keyframes shimmer {
     0% {
       transform: translateX(-100%);