From 84bb57f208a789ec0d38f8b2812a4cdc510937ef Mon Sep 17 00:00:00 2001
From: imagineer99 <samleejackson0@gmail.com>
Date: Tue, 3 Mar 2026 18:37:46 +0000
Subject: [PATCH] fix: prevent select scroll-lock margin from shifting layout

---
 studio/frontend/src/components/ui/select.tsx | 36 ++++++++++----------
 studio/frontend/src/index.css                |  3 ++
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/studio/frontend/src/components/ui/select.tsx b/studio/frontend/src/components/ui/select.tsx
index 52fe4e5a75..4c500af08e 100644
--- a/studio/frontend/src/components/ui/select.tsx
+++ b/studio/frontend/src/components/ui/select.tsx
@@ -4,8 +4,8 @@ import { Select as SelectPrimitive } from "radix-ui";
 import type * as React from "react";
 import { createContext, useContext, useState } from "react";
 
-import { cn } from "@/lib/utils";
-import { useDialogPortalContainer } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { useDialogPortalContainer } from "@/components/ui/dialog";
 import {
   ArrowDown01Icon,
   ArrowUp01Icon,
@@ -92,22 +92,22 @@ function SelectTrigger({
   );
 }
 
-function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  container,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content> & {
-  container?: HTMLElement | null;
-}) {
-  const dialogContainer = useDialogPortalContainer();
-  return (
-    <SelectPrimitive.Portal container={container ?? dialogContainer ?? undefined}>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        data-align-trigger={position === "item-aligned"}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  container,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content> & {
+  container?: HTMLElement | null;
+}) {
+  const dialogContainer = useDialogPortalContainer();
+  return (
+    <SelectPrimitive.Portal container={container ?? dialogContainer ?? undefined}>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
         className={cn(
           "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-border ring-1 ring-border min-w-36 rounded-xl p-1 corner-squircle duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto ",
           position === "popper" &&
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index 2ef1ed7d96..57d6e451c8 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -270,6 +270,9 @@
     @apply font-sans;
     scrollbar-gutter: stable;
   }
+  body[data-scroll-locked] {
+    margin-right: 0 !important;
+  }
   h1,
   h2,
   h3,