fix: scaled button width

projects/client/src/lib/components/buttons/Button.svelte

@@ -4,8 +4,11 @@
   import { disableTransitionOn } from "$lib/utils/actions/disableTransitionOn";
   import { mobileAppleDeviceTriggerHack } from "$lib/utils/actions/mobileAppleDeviceTriggerHack";
   import { triggerWithKeyboard } from "$lib/utils/actions/triggerWithKeyboard";
+  import { GlobalResizeObserver } from "$lib/utils/events/GlobalResizeObserver";
+  import { debounce } from "$lib/utils/timing/debounce";
+  import { time } from "$lib/utils/timing/time";
+  import { onMount } from "svelte";
   import type { TraktButtonProps } from "./TraktButtonProps";
-
   type TraktButtonAnchorProps = HTMLAnchorProps &
     TraktButtonProps & { onclickoutside?: (ev: CustomEvent) => void };
 
@@ -28,6 +31,34 @@
   const href = $derived((props as TraktButtonAnchorProps).href);
   const noscroll = $derived((props as TraktButtonAnchorProps).noscroll);
   const { isActive } = $derived(useActiveLink(href));
+
+  function snapshotWidth(node: HTMLElement) {
+    if (size === "normal" && style !== "ghost") {
+      return;
+    }
+
+    const snapshot = () => {
+      const computedStyle = getComputedStyle(node);
+      node.style.setProperty("--button-width", computedStyle.width);
+    };
+
+    onMount(() => {
+      snapshot();
+    });
+
+    const unobserve = GlobalResizeObserver.getInstance().observe(
+      node,
+      debounce<ResizeObserverEntry, void>(() => {
+        snapshot();
+      }, time.fps(60)),
+    );
+
+    return {
+      destroy: () => {
+        unobserve();
+      },
+    };
+  }
 </script>
 
 {#snippet contents()}
@@ -56,6 +87,7 @@
     use:clickOutside
     use:triggerWithKeyboard
     use:mobileAppleDeviceTriggerHack
+    use:snapshotWidth
     data-sveltekit-keepfocus
     data-sveltekit-noscroll={noscroll}
     class="trakt-button trakt-button-link"
@@ -74,6 +106,7 @@
   <button
     use:disableTransitionOn={"touch"}
     use:clickOutside
+    use:snapshotWidth
     class="trakt-button"
     aria-label={label}
     data-variant={variant}
@@ -136,7 +169,7 @@
     );
 
     --scale-factor-button: 1;
-    --button-height: var(--ni-52);
+    --button-height: var(--ni-48);
 
     --color-background-button-light: color-mix(
       in srgb,
@@ -170,6 +203,21 @@
     transition-property: box-shadow, outline, padding, transform, color,
       background;
 
+    margin: calc(
+        (
+            var(--button-height) *
+              var(--scale-factor-button) - var(--button-height)
+          ) /
+          2
+      )
+      calc(
+        (
+            var(--button-width) *
+              var(--scale-factor-button) - var(--button-width)
+          ) /
+          2
+      );
+
     &.trakt-button-link {
       &[data-style="ghost"] {
         &.trakt-link-active {
@@ -192,7 +240,6 @@
 
     &[data-size="small"] {
       --scale-factor-button: 0.75;
-      margin: var(--ni-neg-2) var(--ni-neg-8);
     }
 
     &[data-size="tag"] {
@@ -273,7 +320,6 @@
     }
 
     &[data-style="ghost"] {
-      margin: var(--ni-neg-2) var(--ni-neg-6);
       transform: scale(calc(var(--scale-factor-button) * 0.9));
       background: transparent;
 

projects/client/src/lib/components/dropdown/DropdownList.svelte

@@ -72,7 +72,7 @@
 
     &[data-size="small"] {
       transform: scale(0.75);
-      margin: var(--ni-neg-32);
+      margin: var(--ni-neg-24);
 
       :global(li p) {
         font-size: var(--ni-16);

projects/client/src/lib/utils/events/GlobalResizeObserver.spec.ts

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { GlobalResizeObserver } from './GlobalResizeObserver';
+
+describe('GlobalResizeObserver', () => {
+  let element: HTMLElement;
+  const observeFn = vi.fn();
+  const unobserveFn = vi.fn();
+
+  beforeEach(() => {
+    element = document.createElement('div');
+
+    vi
+      .spyOn(globalThis, 'ResizeObserver')
+      .mockImplementation(() => ({
+        observe: observeFn,
+        unobserve: unobserveFn,
+        disconnect: vi.fn(),
+      }));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should observe an element', () => {
+    const callback = vi.fn();
+
+    GlobalResizeObserver.getInstance().observe(element, callback);
+
+    expect(observeFn).toHaveBeenCalled();
+  });
+
+  it('should not observe the same element twice', () => {
+    const callback = vi.fn();
+
+    GlobalResizeObserver.getInstance().observe(element, callback);
+    GlobalResizeObserver.getInstance().observe(element, callback);
+
+    expect(observeFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should unobserve an element', () => {
+    const callback = vi.fn();
+
+    const unobserve = GlobalResizeObserver.getInstance().observe(
+      element,
+      callback,
+    );
+    unobserve();
+
+    expect(unobserveFn).toHaveBeenCalledWith(element);
+  });
+
+  it('should not unobserve an element twice', () => {
+    const callback = vi.fn();
+
+    const unobserve = GlobalResizeObserver.getInstance().observe(
+      element,
+      callback,
+    );
+    unobserve();
+    unobserve();
+
+    expect(unobserveFn).toHaveBeenCalledTimes(1);
+  });
+});

projects/client/src/lib/utils/events/GlobalResizeObserver.ts

@@ -0,0 +1,53 @@
+type ResizeEventHandler = (element: ResizeObserverEntry) => void;
+
+class GlobalResizeObserver {
+  private static instance: GlobalResizeObserver;
+  private static callbacks: Map<Element, ResizeEventHandler> = new Map();
+
+  private _resizeObserver: ResizeObserver;
+
+  private constructor() {
+    // Private constructor to prevent direct instantiation
+    this._resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const callback = GlobalResizeObserver.callbacks.get(entry.target);
+        if (!callback) {
+          return;
+        }
+
+        callback(entry);
+      });
+    });
+  }
+
+  public static getInstance(): GlobalResizeObserver {
+    if (!GlobalResizeObserver.instance) {
+      GlobalResizeObserver.instance = new GlobalResizeObserver();
+    }
+
+    return GlobalResizeObserver.instance;
+  }
+
+  public observe(
+    element: HTMLElement,
+    callback: ResizeEventHandler,
+  ) {
+    if (!GlobalResizeObserver.callbacks.has(element)) {
+      GlobalResizeObserver.callbacks.set(element, callback);
+      this._resizeObserver.observe(element);
+    }
+
+    return () => this.unobserve(element);
+  }
+
+  private unobserve(element: HTMLElement) {
+    if (!GlobalResizeObserver.callbacks.has(element)) {
+      return;
+    }
+
+    GlobalResizeObserver.callbacks.delete(element);
+    this._resizeObserver.unobserve(element);
+  }
+}
+
+export { GlobalResizeObserver };

projects/client/test/mocks/ResizeObserver.mock.ts

@@ -0,0 +1,19 @@
+(globalThis as Record<string, unknown>).ResizeObserver = class ResizeObserver {
+  constructor(
+    callback: (
+      entries: ResizeObserverEntry[],
+      observer: ResizeObserver,
+    ) => void,
+  ) {
+    callback([{
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: [],
+      contentRect: new DOMRectReadOnly(),
+      target: document.createElement('div'),
+    }], this);
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};

projects/client/vitest-setup.ts

@@ -7,6 +7,7 @@ import './test/mocks/matchMedia.mock.ts';
 import './test/mocks/messages.mock.ts';
 import './test/mocks/navigation.mock.ts';
 import './test/mocks/navigator.mock.ts';
+import './test/mocks/ResizeObserver.mock.ts';
 import './test/mocks/variables.mock.ts';
 
 import { setAuthorization } from '$test/beds/store/renderStore.ts';