fix(ui): resolve hover flicker on icon edges and quote sound-in SCSS values

pedroforbeck · pedroforbeck · commit f502831d25b3 · 2026-04-15T15:40:13.000-03:00
- Add pointer-events: none to tooltip panels (MainMenu, MenuOverlay) - Expand icon hit areas with padding (Avatar, PartyDeck, FriendEntry) - Fix ::after overlay stealing pointer events (GameCard) - Quote all sound-in values to prevent SCSS parse errors (23 files) Fixes #10329
diff --git a/game/addons/menu/Code/AvatarEditor/AvatarUI.razor.scss b/game/addons/menu/Code/AvatarEditor/AvatarUI.razor.scss
@@ -90,15 +90,15 @@ AvatarUI > .controls
 	{
 		opacity: 1;
 		background-color: #08f;
-		sound-in: ui.button.over;
+		sound-in: "ui.button.over";
 	}
 
 	&:active
 	{
 		background-color: white;
 		color: #222;
 		opacity: 1;
-		sound-in: ui.button.press;
+		sound-in: "ui.button.press";
 	}
 }
 
@@ -176,13 +176,13 @@ ButtonGroup, .buttongroup
 	> *:hover
 	{
 		opacity: 1;
-		sound-in: ui.button.over;
+		sound-in: "ui.button.over";
 	}
 	
 	> *:active
 	{
 		background-color: #2af;
-		sound-in: ui.button.press;
+		sound-in: "ui.button.press";
 	}
 
 	> *.active
diff --git a/game/addons/menu/Code/AvatarEditor/UI/ClothingIcon.razor.scss b/game/addons/menu/Code/AvatarEditor/UI/ClothingIcon.razor.scss
@@ -18,7 +18,7 @@ ClothingIcon
     &:hover
     {
         background-color: #0088ff55;
-        sound-in: ui.button.over;
+        sound-in: "ui.button.over";
     }
 
     &.active
diff --git a/game/addons/menu/Code/AvatarEditor/UI/ClothingItemSelector.razor.scss b/game/addons/menu/Code/AvatarEditor/UI/ClothingItemSelector.razor.scss
@@ -95,7 +95,7 @@ ClothingItemSelector > .category
 	&:hover
 	{
 		opacity: 1;
-		sound-in: ui.button.over;
+		sound-in: "ui.button.over";
 	}
 
 	&:active
diff --git a/game/addons/menu/Code/MainMenu.razor.scss b/game/addons/menu/Code/MainMenu.razor.scss
@@ -10,6 +10,7 @@
 }
 
 .tooltip {
+    pointer-events: none;
     background-color: #656e7e;
     font-family: Poppins;
     border: none;
diff --git a/game/addons/menu/Code/MenuUI/Components/Footer.razor.scss b/game/addons/menu/Code/MenuUI/Components/Footer.razor.scss
@@ -40,11 +40,11 @@ Footer {
         border-radius: $rounding-large;
 
         &:active {
-            sound-in: ui.button.press;
+            sound-in: "ui.button.press";
         }
 
         &:hover {
-            sound-in: ui.button.over;
+            sound-in: "ui.button.over";
             cursor: pointer;
             background-color: $default-800;
         }
@@ -77,11 +77,11 @@ Footer {
         border: 1px solid transparent; // Avoid layout shifts
 
         &:active {
-            sound-in: ui.button.press;
+            sound-in: "ui.button.press";
         }
 
         &:hover {
-            sound-in: ui.button.over;
+            sound-in: "ui.button.over";
             border: 1px solid $default-border;
             cursor: pointer;
             border-radius: $rounding-default;
diff --git a/game/addons/menu/Code/MenuUI/Components/GameClosedToast.razor.scss b/game/addons/menu/Code/MenuUI/Components/GameClosedToast.razor.scss
@@ -10,7 +10,7 @@ GameClosedToast
     box-shadow: 5px 5px 20px rgba( black, 0.8 );
     opacity: 1;
     transition: all 0.2s ease-out;
-    sound-in: ui.popup.message.open;
+    sound-in: "ui.popup.message.open";
     overflow: hidden;
     flex-direction: row;
     background-color: #1b202c;
diff --git a/game/addons/menu/Code/MenuUI/Components/GameClosing.razor.scss b/game/addons/menu/Code/MenuUI/Components/GameClosing.razor.scss
@@ -15,7 +15,7 @@
     box-shadow: 5px 5px 20px rgba( black, 0.5 );
     opacity: 1;
     transition: all 0.4s bounce-out;
-    sound-in: ui.popup.message.open;
+    sound-in: "ui.popup.message.open";
     overflow: hidden;
     padding-left: 70px;
     position: relative;
diff --git a/game/addons/menu/Code/MenuUI/Components/GameStarting.razor.scss b/game/addons/menu/Code/MenuUI/Components/GameStarting.razor.scss
@@ -13,7 +13,7 @@
     box-shadow: 5px 5px 20px rgba( black, 0.8 );
     opacity: 1;
     transition: all 0.2s ease-out;
-    sound-in: ui.popup.message.open;
+    sound-in: "ui.popup.message.open";
     overflow: hidden;
     padding: 8px;
     bottom: 0px;
diff --git a/game/addons/menu/Code/MenuUI/Components/New/Avatar.razor.scss b/game/addons/menu/Code/MenuUI/Components/New/Avatar.razor.scss
@@ -3,6 +3,8 @@
 Avatar
 {
 	pointer-events: all;
+	padding: 4px;
+	margin: -4px;
 
 	.avatar
 	{
diff --git a/game/addons/menu/Code/MenuUI/Components/New/Carousel.razor.scss b/game/addons/menu/Code/MenuUI/Components/New/Carousel.razor.scss
@@ -36,11 +36,11 @@ Carousel {
             }
 
             &:active {
-                sound-in: ui.button.press;
+                sound-in: "ui.button.press";
             }
 
             &:hover {
-                sound-in: ui.button.over;
+                sound-in: "ui.button.over";
                 background-color: $default-800;
 
                 .icon {
diff --git a/game/addons/menu/Code/MenuUI/Components/New/GameCard.razor.scss b/game/addons/menu/Code/MenuUI/Components/New/GameCard.razor.scss
@@ -150,7 +150,7 @@ GameCard {
         transition: all 150ms ease;
         z-index: -10;
         border-radius: $rounding-large;
-        pointer-events: all;
+        pointer-events: none;
     }
 
     &:hover {
diff --git a/game/addons/menu/Code/MenuUI/Components/New/Navbar.razor.scss b/game/addons/menu/Code/MenuUI/Components/New/Navbar.razor.scss
@@ -60,11 +60,11 @@ Navbar {
 		border-radius: $rounding-default;
 
 		&:active {
-			sound-in: ui.button.press;
+			sound-in: "ui.button.press";
 		}
 
 		&:hover {
-			sound-in: ui.button.over;
+			sound-in: "ui.button.over";
 			border: 1px solid $default-border;
 			cursor: pointer;
 			border-radius: $rounding-default;
diff --git a/game/addons/menu/Code/MenuUI/ContentBlock/ContentBlockBody.razor.scss b/game/addons/menu/Code/MenuUI/ContentBlock/ContentBlockBody.razor.scss
@@ -1,4 +1,4 @@
-﻿@import "/styles/_theme.scss";
+@import "/styles/_theme.scss";
 
 ContentBlockBody {
 	position: relative;
@@ -46,11 +46,11 @@ ContentBlockBody {
 		}
 
 		&:active {
-			sound-in: ui.button.press;
+			sound-in: "ui.button.press";
 		}
 
 		&:hover {
-			sound-in: ui.button.over;
+			sound-in: "ui.button.over";
 			background-color: $default-800;
 
 			.icon {
diff --git a/game/addons/menu/Code/MenuUI/Front/GameTag.razor.scss b/game/addons/menu/Code/MenuUI/Front/GameTag.razor.scss
@@ -23,7 +23,7 @@ GameTag
 
     &:hover
     {
-        sound-in: ui.button.over;
+        sound-in: "ui.button.over";
         opacity: 0.4;
     }
 
@@ -40,6 +40,6 @@ GameTag
 
     &:active
     {
-        sound-in: ui.button.press;
+        sound-in: "ui.button.press";
     }
 }
diff --git a/game/addons/menu/Code/MenuUI/Navigation/PartyDeck/PartyDeck.razor.scss b/game/addons/menu/Code/MenuUI/Navigation/PartyDeck/PartyDeck.razor.scss
@@ -1,11 +1,11 @@
-﻿$primary: #3472e6 !default;
+$primary: #3472e6 !default;
 $green: #97e634 !default;
 
 
 partydeck .vertical-button
 {
     position: relative;
-    padding: 0px;
+    padding: 6px;
     cursor: pointer;
     flex-direction: column;
     font-size: 10px;
diff --git a/game/addons/menu/Code/MenuUI/Navigation/SocialBar/FriendEntry.razor.scss b/game/addons/menu/Code/MenuUI/Navigation/SocialBar/FriendEntry.razor.scss
@@ -1,91 +1,75 @@
-
-FriendEntry
-{
+FriendEntry {
     flex-shrink: 0;
     max-height: 48px;
     flex-direction: row;
     align-items: center;
     cursor: pointer;
-    padding: 4px;
+    padding: 8px;
     border-radius: 64px;
 
-    &:hover
-    {
-        background-color: rgba( 255, 255, 255, 0.02 );
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.02);
 
-        &:not( .active )
-        {
-            sound-in: ui.button.over;
+        &:not(.active) {
+            sound-in: "ui.button.over";
         }
     }
 
-    &.offline
-    {
+    &.offline {
         opacity: 0.4;
     }
 
-    .avatar
-    {
+    .avatar {
         width: 40px;
         height: 40px;
         background-size: cover;
         border-radius: 100%;
         margin-right: 8px;
     }
 
-    .info
-    {
+    .info {
         flex-direction: column;
         flex-grow: 1;
     }
 
-    .name
-    {
+    .name {
         font-size: 14px;
         color: #fff;
         font-weight: 600;
     }
 
-    .status
-    {
+    .status {
         flex-grow: 0;
         font-size: 10px;
         font-weight: 500;
         border-radius: 8px;
         color: white;
     }
 
-    &.ingame
-    {
-        .avatar
-        {
+    &.ingame {
+        .avatar {
             border: 2px solid #3472e6;
         }
 
-        .status
-        {
+        .status {
             color: #3472e6;
         }
     }
 
-    &.online .status
-    {
+    &.online .status {
         color: white;
-    }   
+    }
 
-    &.offline .status
-    {
+    &.offline .status {
         color: gray;
     }
 
-    .actions
-    {
+    .actions {
         flex-grow: 0;
         gap: 8px;
     }
 
-    .button-simple
-    {
+    .button-simple {
         align-items: center;
         cursor: pointer;
         font-size: 16px;
@@ -96,15 +80,13 @@ FriendEntry
         border-radius: 32px;
         background-color: transparent;
 
-        &:hover
-        {
+        &:hover {
             background-color: white;
             color: red;
 
-            &:not( .active )
-            {
-                sound-in: ui.button.over;
+            &:not(.active) {
+                sound-in: "ui.button.over";
             }
         }
     }
-}
+}
diff --git a/game/addons/menu/Code/MenuUI/Popups/FriendPopup.razor.scss b/game/addons/menu/Code/MenuUI/Popups/FriendPopup.razor.scss
@@ -8,7 +8,7 @@ FriendPopup.popup-panel
     font-family: Poppins;
     border: 0px solid black;
     min-width: 220px;
-    sound-in: ui.button.over;
+    sound-in: "ui.button.over";
     border-bottom: 3px solid #477fe7;
     align-items: center;
     overflow: visible;
diff --git a/game/addons/menu/Code/Modals/OrganizationModal.razor.scss b/game/addons/menu/Code/Modals/OrganizationModal.razor.scss
@@ -63,7 +63,7 @@
 
                     &:hover {
                         text-decoration: underline;
-                        sound-in: ui.button.over;
+                        sound-in: "ui.button.over";
                     }
                 }
             }
diff --git a/game/addons/menu/Code/Modals/PackageModals/Components/Media.razor.scss b/game/addons/menu/Code/Modals/PackageModals/Components/Media.razor.scss
@@ -85,7 +85,7 @@ Media > .main
             &:hover
             {
                 opacity: 0.9;
-                sound-in: ui.button.over;
+                sound-in: "ui.button.over";
             }
 
             &.selected
diff --git a/game/addons/menu/Code/Overlay/MenuOverlay.cs.scss b/game/addons/menu/Code/Overlay/MenuOverlay.cs.scss
@@ -76,7 +76,7 @@ MenuOverlay
 		transition: all 0.3s bounce-out;
 		position: absolute;
 		padding-left: 72px;
-		sound-in: ui.popup.message.open;
+		sound-in: "ui.popup.message.open";
 
 		& > .iconpanel
 		{
@@ -107,7 +107,7 @@ MenuOverlay
 			transition: all 0.1s ease-out;
 			opacity: 0;
 			transform: scale( 1.2 );
-			sound-in: ui.popup.message.close;
+			sound-in: "ui.popup.message.close";
 		}
 
 		.message
@@ -199,6 +199,7 @@ MenuOverlay
 
 .tooltip
 {
+	pointer-events: none;
 	background-color: #222;
 	border: 0.5px solid #333;
 	color: #ccc;
diff --git a/game/addons/menu/Code/Overlay/Popups/AchievementUnlocked.razor.scss b/game/addons/menu/Code/Overlay/Popups/AchievementUnlocked.razor.scss
diff --git a/game/addons/menu/Code/styles/_button.scss b/game/addons/menu/Code/styles/_button.scss
diff --git a/game/addons/menu/Code/styles/components/_button.scss b/game/addons/menu/Code/styles/components/_button.scss

Original file line number	Diff line number	Diff line change
`@@ -90,15 +90,15 @@ AvatarUI > .controls`
`90`	`90`	`{`
`91`	`91`	`opacity: 1;`
`92`	`92`	`background-color: #08f;`
`93`		`- sound-in: ui.button.over;`
	`93`	`+ sound-in: "ui.button.over";`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`&:active`
`97`	`97`	`{`
`98`	`98`	`background-color: white;`
`99`	`99`	`color: #222;`
`100`	`100`	`opacity: 1;`
`101`		`- sound-in: ui.button.press;`
	`101`	`+ sound-in: "ui.button.press";`
`102`	`102`	`}`
`103`	`103`	`}`
`104`	`104`
`@@ -176,13 +176,13 @@ ButtonGroup, .buttongroup`
`176`	`176`	`> *:hover`
`177`	`177`	`{`
`178`	`178`	`opacity: 1;`
`179`		`- sound-in: ui.button.over;`
	`179`	`+ sound-in: "ui.button.over";`
`180`	`180`	`}`
`181`	`181`
`182`	`182`	`> *:active`
`183`	`183`	`{`
`184`	`184`	`background-color: #2af;`
`185`		`- sound-in: ui.button.press;`
	`185`	`+ sound-in: "ui.button.press";`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`> *.active`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ ClothingIcon`
`18`	`18`	`&:hover`
`19`	`19`	`{`
`20`	`20`	`background-color: #0088ff55;`
`21`		`- sound-in: ui.button.over;`
	`21`	`+ sound-in: "ui.button.over";`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`&.active`
Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@ ClothingItemSelector > .category`
`95`	`95`	`&:hover`
`96`	`96`	`{`
`97`	`97`	`opacity: 1;`
`98`		`- sound-in: ui.button.over;`
	`98`	`+ sound-in: "ui.button.over";`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`&:active`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.tooltip {`
	`13`	`+ pointer-events: none;`
`13`	`14`	`background-color: #656e7e;`
`14`	`15`	`font-family: Poppins;`
`15`	`16`	`border: none;`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@`
`3`	`3`	`Avatar`
`4`	`4`	`{`
`5`	`5`	`pointer-events: all;`
	`6`	`+ padding: 4px;`
	`7`	`+ margin: -4px;`
`6`	`8`
`7`	`9`	`.avatar`
`8`	`10`	`{`
Original file line number	Diff line number	Diff line change
`@@ -36,11 +36,11 @@ Carousel {`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`&:active {`
`39`		`- sound-in: ui.button.press;`
	`39`	`+ sound-in: "ui.button.press";`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`&:hover {`
`43`		`- sound-in: ui.button.over;`
	`43`	`+ sound-in: "ui.button.over";`
`44`	`44`	`background-color: $default-800;`
`45`	`45`
`46`	`46`	`.icon {`