Keep a dragged firewall rule at its measured width

The Card carried Mantine's `w="100%"` prop, whose style props land in the
style attribute after anything passed via `style`, so it overrode the pixel
width dnd measures at lift time. On a `position: fixed` element `100%`
resolves against the viewport rather than the list, so grabbing a rule
snapped the card from 734px to 798px and pushed it past the right edge.

Moving the width into `style`, ahead of the dnd spread, leaves normal flow
untouched and lets the measured width win while dragging.
This commit is contained in:
Domingo Dirutigliano 2026-09-03 18:42:16 +02:00
parent 2caea98222
commit 090d117115
No known key found for this signature in database

View File

@ -199,9 +199,11 @@ export const Firewall = () => {
radius="md" radius="md"
p="md" p="md"
mb="md" mb="md"
w="100%"
bg="transparent" bg="transparent"
style={{ style={{
// not the `w` prop: Mantine's style props would beat the width dnd measures, and
// `100%` against a `position: fixed` card resolves to the viewport, not the list
width: '100%',
transition: 'border-color 0.2s ease', transition: 'border-color 0.2s ease',
// dnd puts the drag transform/transition in here: it has to win over our defaults // dnd puts the drag transform/transition in here: it has to win over our defaults
...provided.draggableProps.style, ...provided.draggableProps.style,