fix: prevent horizontal scroll in RTL drag-and-drop

Author: x0sina

dashboard/src/components/ui/accordion.tsx

@@ -18,7 +18,10 @@ const AccordionTrigger = React.forwardRef<React.ElementRef<typeof AccordionPrimi
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         ref={ref}
-        className={cn('flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180', className)}
+        className={cn(
+          'flex flex-1 items-center justify-between rounded-sm py-4 text-left text-sm font-medium ring-offset-background transition-all placeholder:text-muted-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
         {...props}
       >
         {children}
@@ -38,4 +41,4 @@ const AccordionContent = React.forwardRef<React.ElementRef<typeof AccordionPrimi
 )
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

dashboard/src/index.css

@@ -125,6 +125,7 @@
 
   body {
     @apply bg-background text-foreground font-body;
+    overflow-x: hidden; /* Prevent horizontal scroll from drag-and-drop elements */
   }
 
   /* Enhanced shadcn-style scrollbar */
@@ -191,6 +192,23 @@
   .scrollbar-muted::-webkit-scrollbar-thumb:hover {
     background: hsl(var(--muted-foreground) / 0.5);
   }
+
+  /* Fix for drag-and-drop elements causing horizontal overflow in RTL */
+  [data-rbd-draggable-id],
+  [data-rbd-drag-handle-draggable-id],
+  [data-dnd-kit-drag-overlay] {
+    max-width: 100vw !important;
+    left: 0 !important;
+    right: auto !important;
+  }
+
+  /* Ensure drag overlay elements don't extend beyond viewport */
+  [data-dnd-kit-drag-overlay] {
+    position: fixed !important;
+    z-index: 9999 !important;
+    max-width: calc(100vw - 20px) !important;
+    max-height: calc(100vh - 20px) !important;
+  }
 }
 
 @layer utilities {