fix(subscription): improve layout and drag-and-drop functionality in subscription rules section

- Adjust styles for better overflow handling and responsiveness in sortable subscription rules
- Implement custom drag-and-drop modifiers to enhance user experience
- Refine spacing and structure in advanced sheet component for consistency

Author: x0sina

dashboard/src/components/subscriptions/sortable-subscription-rule.tsx

@@ -115,8 +115,8 @@ export function SortableSubscriptionRule({ index, onRemove, form, id }: Sortable
 
   return (
     <>
-      <div ref={setNodeRef} style={style} className="cursor-default" dir="ltr">
-        <div className="group relative flex flex-col gap-2 rounded-md border bg-card p-2 transition-colors hover:bg-accent/20 sm:flex-row sm:items-center sm:gap-3 sm:p-3">
+      <div ref={setNodeRef} style={style} className="min-w-0 max-w-full cursor-default overflow-hidden" dir="ltr">
+        <div className="group relative flex min-w-0 max-w-full flex-col gap-2 overflow-hidden rounded-md border bg-card p-2 transition-colors hover:bg-accent/20 sm:flex-row sm:items-center sm:gap-3 sm:p-3">
           <div className="flex min-w-0 flex-1 flex-row gap-1 sm:gap-1.5">
             <button
               type="button"

dashboard/src/components/subscriptions/subscription-rule-advanced-sheet.tsx

@@ -116,7 +116,7 @@ export function SubscriptionRuleAdvancedSheet({
               </Button>
             </div>
 
-            <div className="max-h-[min(50dvh,24rem)] space-y-3 overflow-y-auto pr-0.5">
+            <div className="max-h-[min(50dvh,24rem)] space-y-3 overflow-y-auto p-px">
               {responseHeaderCount > 0 ? (
                 responseHeaderEntries.map(([headerKey, headerValue], index) => (
                   <div key={`${rowId}-header-${index}`} className="space-y-2 rounded-lg border bg-card/50 p-3">

dashboard/src/components/subscriptions/subscription-rules-section.tsx

@@ -3,15 +3,19 @@ import type { SubscriptionFormData } from '@/components/subscriptions/subscripti
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core'
+import type { Modifier } from '@dnd-kit/core'
 import { rectSortingStrategy, SortableContext } from '@dnd-kit/sortable'
 import { FileText, Plus, RotateCcw } from 'lucide-react'
 import type { ComponentProps } from 'react'
+import { useMemo, useRef } from 'react'
 import type { FieldArrayWithId } from 'react-hook-form'
 import { UseFormReturn } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 
 type DndContextSensors = NonNullable<ComponentProps<typeof DndContext>['sensors']>
 
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
+
 export interface SubscriptionRulesSectionProps {
   form: UseFormReturn<SubscriptionFormData>
   ruleFields: FieldArrayWithId<SubscriptionFormData, 'rules'>[]
@@ -34,9 +38,28 @@ export function SubscriptionRulesSection({
   isSaving,
 }: SubscriptionRulesSectionProps) {
   const { t } = useTranslation()
+  const rulesListRef = useRef<HTMLDivElement>(null)
+  const rulesModifiers = useMemo<Modifier[]>(
+    () => [
+      ({ transform, draggingNodeRect }) => {
+        const listRect = rulesListRef.current?.getBoundingClientRect()
+        if (!draggingNodeRect || !listRect) {
+          return { ...transform, x: 0 }
+        }
+        const edgeAllowance = clamp(draggingNodeRect.height, 56, 120)
+
+        return {
+          ...transform,
+          x: 0,
+          y: clamp(transform.y, listRect.top - draggingNodeRect.top - edgeAllowance, listRect.bottom - draggingNodeRect.bottom + edgeAllowance),
+        }
+      },
+    ],
+    [],
+  )
 
   return (
-    <div className="space-y-3">
+    <div className="min-w-0 space-y-3 overflow-hidden">
       <div className="rounded-lg border bg-card p-3 shadow-sm sm:p-4">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
           <div className="min-w-0 flex-1 space-y-1">
@@ -70,10 +93,10 @@ export function SubscriptionRulesSection({
           <p className="mb-1 text-xs font-medium sm:text-sm">{t('settings.subscriptions.rules.noRules')}</p>
         </div>
       ) : (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
-          <div dir="ltr">
+        <DndContext sensors={sensors} collisionDetection={closestCenter} modifiers={rulesModifiers} onDragEnd={onDragEnd}>
+          <div dir="ltr" className="min-w-0 overflow-hidden">
             <SortableContext items={ruleFields.map(field => field.id)} strategy={rectSortingStrategy}>
-              <div className="scrollbar-thin flex max-h-[min(70vh,500px)] touch-pan-y flex-col gap-2 overflow-y-auto py-1 sm:max-h-[500px] sm:gap-2.5 sm:py-1">
+              <div ref={rulesListRef} className="scrollbar-thin flex max-h-[min(70vh,500px)] min-w-0 touch-pan-y flex-col gap-2 overflow-y-auto overflow-x-hidden py-1 sm:max-h-[500px] sm:gap-2.5 sm:py-1">
                 {ruleFields.map((field, index) => (
                   <SortableSubscriptionRule key={field.id} id={field.id} index={index} onRemove={onRemoveRule} form={form} />
                 ))}

dashboard/src/components/ui/sheet.tsx

@@ -23,7 +23,7 @@ const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Ove
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg outline-none transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
   {
     variants: {
       side: {