fix: update interaction scaling for various components

Author: DarthGigi

src/lib/components/ScrollAreaItems.svelte

@@ -72,7 +72,7 @@
   data-orientation={orientation}
   {...restProps}>
   <div
-    class="relative flex gap-2 py-4 group-data-[orientation=horizontal]/scroll:w-max group-data-[orientation=horizontal]/scroll:flex-nowrap group-data-[orientation=vertical]/scroll:flex-wrap sm:gap-4">
+    class="relative flex gap-2 pt-4 group-data-[orientation=horizontal]/scroll:w-max group-data-[orientation=horizontal]/scroll:flex-nowrap group-data-[orientation=vertical]/scroll:flex-wrap sm:gap-4">
     {@render children?.()}
     <div
       class="pointer-events-none sticky -right-1 z-10 -ml-40 w-36 self-stretch bg-linear-to-l from-background/80 to-transparent scroll-fade-x blur-xs group-data-[orientation=vertical]/scroll:hidden">

src/lib/components/header/Menu.svelte

@@ -30,7 +30,7 @@
 </script>
 
 {#snippet ListItem({ title, content, href, class: className, icon: IconComponent, ...restProps }: ListItemProps)}
-  <NavigationMenu.Link {href} class={cn("hover:scale-95 hover:bg-background/50", className)} {...restProps}>
+  <NavigationMenu.Link {href} class={cn("interact:scale-95 interact:bg-background/50", className)} {...restProps}>
     <div class="flex flex-col gap-1">
       <div class="flex items-center-safe gap-1">
         <IconComponent class="size-5" />

src/lib/components/header/settings/Packs.svelte

@@ -141,7 +141,7 @@
         <button
           {@attach sortable.attachHandle}
           type="button"
-          class="flex size-10 shrink-0 cursor-grab touch-none items-center justify-center rounded-lg text-muted-foreground transition-[background-color,color,scale] duration-150 ease-out outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30 active:scale-[0.96] active:cursor-grabbing"
+          class="flex size-10 shrink-0 cursor-grab touch-none items-center justify-center rounded-lg text-muted-foreground transition-[background-color,color,scale] duration-150 ease-out outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30 active:scale-95 active:cursor-grabbing"
           aria-label="Reorder {pack.name ?? pack.id}">
           <GripVertical class="size-4" />
         </button>
@@ -152,7 +152,7 @@
           loading="lazy"
           src={pack.icon}
           alt={pack.name}
-          class="pointer-events-none aspect-square size-10 h-full rounded-lg outline outline-1 -outline-offset-1 outline-black/10 select-none [image-rendering:pixelated] dark:outline-white/10" />
+          class="pointer-events-none aspect-square size-10 h-full rounded-lg outline -outline-offset-1 outline-black/10 select-none [image-rendering:pixelated] dark:outline-white/10" />
         <Avatar.Fallback class="flex size-10 items-center rounded-lg text-center uppercase"
           >{pack.name?.slice(0, 2)}</Avatar.Fallback>
       </Avatar.Root>

src/lib/components/item/Item.svelte

@@ -44,7 +44,7 @@
     "overflow-clip nice-colors-dark",
     isInventory ? "p-0" : `relative p-2 ${bgColor}`,
     { "rounded-xl": !isInventory },
-    "standard:transition-all standard:duration-150 standard:ease-out standard:hover:scale-110 standard:active:scale-110"
+    "standard:transition-all standard:duration-150 standard:ease-out standard:active:scale-95 standard:interact:scale-95"
   )}
   bind:ref={targetNode}
   onclick={() => {

src/lib/components/misc/ContributorCard.svelte

@@ -38,7 +38,8 @@
 <Item.Root
   variant="outline"
   class={cn("glass glass-brightness-150 glass-contrast-60 dark:glass-brightness-50 dark:glass-contrast-100", {
-    "delay-75 duration-300 ease-out hover:scale-105 [a]:transition-[scale] standard:[a]:hover:bg-inherit": !options?.tip
+    "delay-75 duration-300 ease-out interact:scale-95 [a]:transition-[scale] standard:[a]:hover:bg-inherit":
+      !options?.tip
   })}>
   {#snippet child({ props })}
     <svelte:element
@@ -103,23 +104,3 @@
     </svelte:element>
   {/snippet}
 </Item.Root>
-
-<!-- <div class={cn("relative rounded-xl", { "transition-all duration-300 ease-out hover:scale-105": !options?.tip })}>
-  <Button href={options?.tip ? undefined : resolve("/stats/[ign]", { ign: user.id })} class="relative flex h-full w-full min-w-0 items-center gap-4 rounded-xl p-5 text-left glass glass-brightness-150 dark:glass-brightness-50 glass-contrast-60 dark:glass-contrast-100">
-    <Avatar.Root class="size-16 shrink-0">
-      <Avatar.Image loading="lazy" src={options?.tip ? "https://nmsr.nickac.dev/face/bc8ea1f51f253ff5142ca11ae45193a4ad8c3ab5e9c6eec8ba7a4fcb7bac40" : `https://nmsr.nickac.dev/face/${user.id}`} alt={user.username} class={cn("aspect-square size-16 [image-rendering:pixelated]", options?.tip ? "rounded-xl bg-foreground/10" : "")} />
-      <Avatar.Fallback class="flex h-full items-center justify-center rounded-xl bg-foreground/10 text-lg font-semibold text-muted-foreground uppercase">
-        {user.username?.slice(0, 2)}
-      </Avatar.Fallback>
-    </Avatar.Root>
-    <div class="flex flex-col justify-center gap-0">
-      <div class="text-lg font-semibold text-foreground">
-        {user.displayName ?? user.username}
-      </div>
-      {#if user.quote}
-        <div class={cn("pr-4 text-sm font-medium text-pretty text-foreground/80", user.role === Role.TECHNOBLADE ? "italic" : "")}>{@html user.quote}</div>
-      {/if}
-    </div>
-  </Button>
-
-</div> -->

src/lib/components/misc/CtaCard.svelte

@@ -20,7 +20,7 @@
 
 <Item.Root
   variant="outline"
-  class="w-fit delay-75 duration-300 ease-out [a]:transition-[scale] [a]:hover:scale-95 standard:[a]:hover:bg-inherit">
+  class="w-fit delay-75 duration-300 ease-out [a]:transition-[scale] [a]:interact:scale-95 standard:[a]:interact:bg-inherit">
   {#snippet child({ props })}
     <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
     <a {href} target="_blank" {...props}>

src/lib/components/newsroom/PostCard.svelte

@@ -42,7 +42,7 @@
   href="/newsroom/{post.slug}"
   data-sveltekit-preload-data="hover"
   class={cn(
-    "group relative flex h-full w-full min-w-0 flex-col overflow-hidden rounded-xl border text-left transition-[scale] delay-75 duration-300 ease-out hover:scale-95 focus-visible:scale-95 data-[featured=true]:border-accent-2/50",
+    "group relative flex h-full w-full min-w-0 flex-col overflow-hidden rounded-xl border text-left transition-[scale] delay-75 duration-300 ease-out data-[featured=true]:border-accent-2/50 interact:scale-95",
     { glass }
   )}
   data-featured={post.featured}>

src/lib/components/notices/BetaNotice.svelte

@@ -13,7 +13,7 @@
   class="fixed -bottom-0.5 left-0 z-50 w-full p-[env(safe-area-inset-top,0)] pr-[max(0.625rem,env(safe-area-inset-right))] pb-[env(safe-area-inset-bottom,0)] pl-[max(0.625rem,env(safe-area-inset-left))] leading-12">
   <Button
     variant="ghost"
-    class="relative mx-auto w-fit border! border-border glass transition-[scale] duration-150 ease-out glass-bg-popover hover:scale-95 "
+    class="relative mx-auto w-fit border! border-border glass transition-[scale] duration-150 ease-out glass-bg-popover interact:scale-95 "
     onpointerdown={() => (noticeOpen = !noticeOpen)}>
     <p class="flex items-center gap-x-1.5"><TriangleAlert class="size-5" />This is the SkyCrypt development site</p>
   </Button>

src/lib/layouts/stats/PlayerProfile.svelte

@@ -62,7 +62,7 @@
   <Popover.Root bind:open={ignOpen}>
     <Popover.Trigger
       disabled={(profile?.members?.length || 1) <= 1}
-      class="inline-flex items-center rounded-full bg-foreground/10 py-2 pr-4 pl-2 align-middle text-xl font-semibold whitespace-nowrap transition-[scale,background-color] duration-300 ease-out not-disabled:hover:scale-95 not-disabled:hover:bg-foreground/20 data-[state=open]:scale-95 data-[state=open]:bg-foreground/20 sm:text-3xl"
+      class="inline-flex items-center rounded-full bg-foreground/10 py-2 pr-4 pl-2 align-middle text-xl font-semibold whitespace-nowrap transition-[scale,background-color] duration-300 ease-out data-[state=open]:scale-95 data-[state=open]:bg-foreground/20 sm:text-3xl not-disabled:interact:scale-95 not-disabled:interact:bg-foreground/20"
       bind:ref={ignRef}>
       {#if profile != null && profile.rank?.rankColor}
         <div
@@ -98,7 +98,7 @@
             variant="outline"
             size="sm"
             data-removed={member.removed}
-            class="group flex-nowrap bg-foreground/5 [a]:transition-[scale,background-color] [a]:duration-300 [a]:ease-out [a]:hover:scale-95 [a]:hover:bg-foreground/10">
+            class="group flex-nowrap bg-foreground/5 [a]:transition-[scale,background-color] [a]:duration-300 [a]:ease-out [a]:hover:bg-foreground/10 [a]:interact:scale-95">
             {#snippet child({ props })}
               <a
                 href={resolve("/stats/[ign]/[[profile]]", {
@@ -140,7 +140,7 @@
   </Popover.Root>
   <span>on</span>
   <div
-    class="relative inline-flex items-center gap-2 rounded-full bg-foreground/10 px-2 py-1 align-middle text-xl font-semibold transition-[scale,background-color] duration-300 ease-out data-[disabled=false]:hover:scale-95 data-[disabled=false]:hover:bg-foreground/20 data-[disabled=false]:data-[open=true]:scale-95 data-[disabled=false]:data-[open=true]:bg-foreground/20 data-[warning=true]:border-2 data-[warning=true]:border-yellow-500/20 sm:text-3xl"
+    class="relative inline-flex items-center gap-2 rounded-full bg-foreground/10 px-2 py-1 align-middle text-xl font-semibold transition-[scale,background-color] duration-300 ease-out data-[disabled=false]:data-[open=true]:scale-95 data-[disabled=false]:data-[open=true]:bg-foreground/20 data-[warning=true]:border-2 data-[warning=true]:border-yellow-500/20 sm:text-3xl data-[disabled=false]:interact:scale-95 data-[disabled=false]:interact:bg-foreground/20"
     data-open={profileOpen || noticeOpen}
     data-warning={apiSettings.length > 0}
     bind:this={noticeRef}
@@ -176,7 +176,7 @@
             <Item.Root
               variant="outline"
               size="sm"
-              class="flex-nowrap bg-foreground/5 [a]:transition-[scale,background-color] [a]:duration-300 [a]:ease-out [a]:hover:scale-95 [a]:hover:bg-foreground/10">
+              class="flex-nowrap bg-foreground/5 [a]:transition-[scale,background-color] [a]:duration-300 [a]:ease-out [a]:hover:bg-foreground/10 [a]:interact:scale-95">
               {#snippet child({ props })}
                 <a
                   href={resolve("/stats/[ign]/[[profile]]", {

src/lib/sections/stats/Minions.svelte

@@ -34,7 +34,7 @@
   <div class="contents space-y-4">
     <Item.Root
       variant="outline"
-      class="mx-auto w-fit rounded-full duration-150 ease-out hover:scale-95 [a]:transition-[scale,background-color] [a]:hover:bg-foreground/10">
+      class="hover:interact-95 mx-auto w-fit rounded-full duration-150 ease-out [a]:transition-[scale,background-color] [a]:hover:bg-foreground/10">
       {#snippet child({ props })}
         <a href="https://minionah.com/" target="_blank" {...props}>
           <Item.Media>