tgstation · ZeWaka · Sep 8, 2025 · Sep 7, 2025 · Sep 7, 2025
diff --git a/lib/components/Tabs.tsx b/lib/components/Tabs.tsx
@@ -31,6 +31,8 @@ export function Tabs(props: Props) {
 
   const firstRender = useRef<boolean>(true);
   const tabsRef = useRef<HTMLDivElement>(null);
+  const prevSelectedRef = useRef<Element | null>(null);
+
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(false);
 
@@ -64,13 +66,16 @@ export function Tabs(props: Props) {
       return;
     }
 
-    selectedElement.scrollIntoView({
-      behavior: firstRender.current ? 'auto' : 'smooth',
-      inline: 'center',
-    });
-    firstRender.current = false;
+    if (prevSelectedRef.current !== selectedElement) {
+      prevSelectedRef.current = selectedElement;
+      selectedElement.scrollIntoView({
+        behavior: firstRender.current ? 'auto' : 'smooth',
+        inline: 'center',
+      });
+    }
 
-    tabsElement.addEventListener('wheel', horizontalScroll);
+    firstRender.current = false;
+    tabsElement.addEventListener('wheel', horizontalScroll, { passive: true });
     tabsElement.addEventListener('scroll', checkScrollable);
     window.addEventListener('resize', checkScrollable);
     checkScrollable();

diff --git a/styles/components/Tabs.scss b/styles/components/Tabs.scss
@@ -136,23 +136,26 @@
 }
 
 .Tabs--scrollable {
-  --mask-width: 3.25rem;
+  --mask-width: 3.25em;
   --mask-left: 0rem;
   --mask-right: 0rem;
 
+  display: grid;
+  padding: 0;
+
   &-content {
     overflow: auto;
     scrollbar-width: none;
     overscroll-behavior: none;
     display: flex;
     flex-wrap: nowrap;
-    width: 100%;
+    padding: var(--space-s) var(--space-s) 0;
     mask-image: linear-gradient(
       90deg,
-      transparent calc(var(--mask-left) * 0.5),
+      transparent calc(var(--mask-left) * 0.66),
       black calc(0% + var(--mask-left)),
       black calc(100% - var(--mask-right)),
-      transparent calc(100% - calc(var(--mask-right) * 0.5))
+      transparent calc(100% - calc(var(--mask-right) * 0.66))
     );
 
     &.scrollable-left.scrollable-right {
@@ -175,8 +178,8 @@
     align-content: center;
     top: 0;
     height: 100%;
-    margin: none;
-    border-radius: unset;
+    margin: 0;
+    border-radius: 0;
     z-index: 1;
   }