How can I change the z-index on the Alert-Dialog blur background?

[brucegl]

Hi,

I have the following scenario:

I am able to change the z-index for AlertDialog.Content so that it sits on top of the Leaflet map using <AlertDialog.Content class="alert-dialog"> in +page.svelte and .alert-dialog { z-index: 2000; } in styles.css. Leaflet uses some big z-index values!

However, I can't work out how to change the z-index of the Alert-Dialog blur so that the entire Leaflet map is blurred out.

UPDATE:
I discovered the AlertDialog.Overlay component and tried adding it in various ways. The best I could come up with is by adding AlertDialog.Overlay near the end of this code block:

<AlertDialog.Root>
        <AlertDialog.Trigger asChild let:builder>
	        <Button builders={[builder]} variant="outline">Update Alarms</Button>
        </AlertDialog.Trigger>
        <AlertDialog.Content class="alert-dialog-content">
	        <AlertDialog.Header>
		        <AlertDialog.Title>Update alarms</AlertDialog.Title>
		        <AlertDialog.Description>
			        This action will send an alarm update request to {$page.params.device}. If the
			        device is offline, expect a delay before the request is addressed.
		        </AlertDialog.Description>
	        </AlertDialog.Header>
	        <div class="pb-2">
		        <Switch
			        class="align-middle"
			        id="peakOverSet"
			        bind:checked={alarmSettings.overPressureAlarm1En}
		        />
		        <Label class="align-middle" for="peakOverSet"
			        >Peak period: over pressure alarm</Label
		        >
	        </div>
	        <div class="grid w-full max-w-sm items-center gap-1.5 pb-4">
		        <Label for="peakOverAlarm">Alarm threshold (mbar)</Label>
		        <Input
			        type="text"
			        id="peakOverAlarm"
			        placeholder={alarmSettings.overPressureAlarm1Value}
		        />
	        </div>
	        <AlertDialog.Footer>
		        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
		        <AlertDialog.Action>Submit</AlertDialog.Action>
	        </AlertDialog.Footer>
        </AlertDialog.Content>
        <AlertDialog.Overlay class="alert-dialog-overlay"></AlertDialog.Overlay>
</AlertDialog.Root>

This is still not quite right as the background is totally washed out now (see below). I think this is because AlertDialog.Content contains an explicit AlertDialog.Overlay, so the above code is causing 2 overlays on the background text and graphs and 1 overlay on the map.

ANOTHER UPDATE:
I edited the shadcn-svelte alert-dialog-overlay.svelte component to have a larger z-index and removed <AlertDialog.Overlay class="alert-dialog-overlay"></AlertDialog.Overlay> from the above code. This provides the effect I'm looking for (see below) but it's not the right way to go, so I'm holding out on thoughts for a better way. Thanks.

Any help is much appreciated,
Gary