new middle

Screenshot

Issue screenshot

Stored at legacy-import/issues/64/1771866124929-212c7dc5-8afa-41c0-bf85-7acd7898480f.png

Metadata

Selector candidates
[
  {
    "matches": 1,
    "score": 60,
    "selector": "div:nth-of-type(6)",
    "strategy": "nth-of-type"
  },
  {
    "matches": 2,
    "score": 88,
    "selector": "div[role=\"dialog\"]",
    "strategy": "attr:role"
  },
  {
    "matches": 2,
    "score": 86,
    "selector": "div[aria-label=\"Dialog\"]",
    "strategy": "attr:aria-label"
  },
  {
    "matches": 2,
    "score": 76,
    "selector": "div.fixed.z-\\[9999\\].bg-background",
    "strategy": "class"
  },
  {
    "matches": 0,
    "score": 58,
    "selector": "html \u003e body \u003e div \u003e div:nth-of-type(6)",
    "strategy": "ancestor-path"
  }
]
Target fingerprint
{
  "ancestorPath": [
    "html",
    "body",
    "div"
  ],
  "ariaLabel": "Dialog",
  "className": "fixed z-[9999] bg-background overflow-hidden overscroll-contain inset-0 h-full w-full flex flex-col rounded-none",
  "href": null,
  "id": null,
  "name": null,
  "role": "dialog",
  "tagName": "div",
  "textSample": "Back Price agreement required You can adjust this base price if needed. Fees are added for the client and shown below be"
}
Secondary signal
{
  "hasFiberInstance": true,
  "reactComponentStack": [
    "div",
    "o",
    "ResponsiveDrawerContent",
    "v",
    "tj",
    "t6",
    "Content",
    "D",
    "U",
    "x",
    "c",
    "f"
  ],
  "reactOwnerStack": [],
  "source": "react-fiber"
}
Layout evidence
bbox:
{
  "bottom": 597,
  "height": 714,
  "left": 0,
  "right": 402,
  "top": -117,
  "width": 402,
  "x": 0,
  "y": -117
}

viewport:
{
  "height": 536,
  "width": 302
}

scroll:
{
  "x": 0,
  "y": 117
}

screenshotMarks:
[]
DOM excerpt
<div data-responsive-drawer="true" data-drawer-variant="fullpage" role="dialog" aria-modal="true" aria-label="Dialog" class="fixed z-[9999] bg-background overflow-hidden overscroll-contain inset-0 h-full w-full flex flex-col rounded-none" style="font-family: var(--font-inter), Inter, sans-serif; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);"><div class="grid gap-1.5 p-4 text-center sm:text-left relative flex-shrink-0 border-b py-4 px-4 sm:px-6 mb-4" data-sentry-component="DrawerHeader" data-sentry-source-file="drawer.tsx"><div class="grid grid-cols-[2rem_1fr_2rem] items-center gap-2.5"><button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-600 transition-colors hover:text-gray-900 hover:bg-gray-100" aria-label="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left h-4 w-4" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg><span class="sr-only">Back</span></button><h3 class="text-center text-lg font-semibold leading-none tracking-tight text-gray-900">Price agreement required</h3><div class="h-8 w-8" aria-hidden="true"></div></div></div><div class="flex-1 overflow-y-auto min-h-0 px-5 pb-6"><div class="flex flex-col gap-4"><div class="sr-only">You can adjust this base price if needed. Fees are added for the client and shown below before checkout.</div><div class="space-y-4" data-sentry-component="UnifiedBookingDetailsDrawer" data-sentry-source-file="UnifiedBookingDetailsDrawer.tsx"><section class="space-y-4 rounded-xl border border-gray-200 bg-white p-4"><div class="space-y-1"><h3 class="text-base font-semibold text-gray-900">Base price proposal for estelle</h3><p class="text-sm text-gray-600">You can adjust this base price if needed. Fees are added for the client and shown below before checkout.</p></div><div class="space-y-3"><label data-slot="label" class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50" for="price-agreement-subtotal" data-sentry-element="LabelPrimitive.Root" data-sentry-component="Label" data-sentry-source-file="label.tsx">Base price proposed for estelle</label><div class="flex items-center gap-2"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9 rounded-lg shrink-0" type="button" aria-label="Decrease price" data-sentry-element="Comp" data-sentry-component="Button" data-sentry-source-file="button.tsx">-</button><input id="price-agreement-subtotal" min="0" step="1" class="h-10 flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm" type="number" value="92"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-9 rounded-lg shrink-0" type="button" aria-label="Increase price" data-sentry-element="Comp" data-sentry-component="Button" data-sentry-source-file="button.tsx">+</button></div><p class="text-xs text-gray-500">This amount is the base price before fees. The final client total (including fees) is shown in the breakdown.</p></div><div class="border border-gray-200 rounded-3xl p-5 shadow-sm bg-white" data-sentry-component="RequestDetailsPricingCard" data-sentry-source-file="RequestDetailsPricingCard.tsx"><h5 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">Request details</h5><h3 class="font-bold text-lg text-gray-900 mb-1">Dog Walking</h3><div class="text-sm text-gray-600 mb-4 flex flex-wrap items-center gap-1"><span>3 days</span><span class="text-gray-300">•</span><span>3 walks/day</span><span class="text-gray-300">•</span><span>9 walks total</span><span class="text-gray-300">•</span><span class="text-gray-700">C

Thread

No comments yet.