Scrollbar adjustment

frontend/src/features/event/grid/schedule-header.tsx

@@ -55,7 +55,7 @@ export default function ScheduleHeader({
     <div
       className={cn(
         preview ? "md:bg-panel top-0" : cn(topMarginClass, "bg-background"),
-        scrollbarPresent && "pr-4",
+        scrollbarPresent && "pr-3",
         "sticky z-10 col-span-2 grid h-[50px] w-full items-center justify-center",
       )}
       style={{

frontend/src/features/event/grid/timeblocks/base.tsx

@@ -15,7 +15,7 @@ export default function BaseTimeBlock({
 }: TimeBlockProps) {
   return (
     <div
-      className="relative isolate grid"
+      className="relative isolate grid overflow-x-clip"
       onMouseLeave={onMouseLeave}
       style={{
         gridTemplateColumns: `${TIME_LABEL_WIDTH}px 1fr ${hasNext ? SIDE_WIDTH : 10}px`,

frontend/src/styles/radix.css

@@ -98,3 +98,18 @@
     transform: scale(0.95) translateY(10px);
   }
 }
+
+/* Disabling scrollbar margin management */
+html body[data-scroll-locked] {
+  /*
+    When opening a modal, Radix will add padding/margin to the body to counteract a
+    dynamic scrollbar that disappears.
+
+    Our custom scrollbar was made persistent, so we want to override this behavior,
+    otherwise the content will shift to the left anyway when opening a modal.
+  */
+  --removed-body-scroll-bar-size: 0px !important;
+
+  margin-right: 0px !important;
+  padding-right: 0px !important;
+}

frontend/src/styles/scrollbar.css

@@ -12,20 +12,24 @@
   }
 }
 
+html {
+  overflow-y: scroll;
+}
+
 ::-webkit-scrollbar-button {
   display: none;
 }
 
 ::-webkit-scrollbar {
-  width: 16px;
+  width: 12px;
   background-color: transparent;
 }
 
 ::-webkit-scrollbar-track {
   background-color: var(--sb-track-color);
 
   /* floating track */
-  border: 4px solid transparent;
+  border: 3px solid transparent;
   border-radius: 100vh;
   background-clip: padding-box;
 
@@ -37,11 +41,12 @@
   background-color: var(--sb-thumb-color);
 
   /* floating track */
-  border: 4px solid transparent;
+  border: 3px solid transparent;
   border-radius: 100vh;
   background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--foreground);
+  border: 2px solid transparent;
 }