In OnyxAlertDialog setting height and width is not adjusting onyx-alert-dialog__content and onyx-alert-dialog__actions size

[Aswathi-Arjun]

In OnyxAlertDialog setting height and width is not adjusting onyx-alert-dialog__content and onyx-alert-dialog__actions size. Is there a specific CSS attribute that can do this at one place.

Code Snipplet:

<script lang="ts" setup>
import { OnyxAlertDialog, OnyxButton } from "sit-onyx";

const props = defineProps<{
  productDialogState: boolean;
}>();

const emit = defineEmits<{
  updateDialogState: [boolean];
}>();

const handleClose = () => {
  emit("updateDialogState", false);
};

</script>

<template>
  <OnyxAlertDialog class="product-modal" :open="props.productDialogState" label="Confirm deletion">
    Are you sure that you want to delete the selected item? This action can not
    be reverted.

    <template #actions>
      <OnyxButton color="neutral" label="Cancel" mode="plain" @click="handleClose"/>
    </template>
  </OnyxAlertDialog>
</template>
<style lang="scss">
.product-modal{
 width:997px;
 height: 654px
}
</style>

ScreenShot:

[larsrickert]

Hey @Aswathi-Arjun, you can set the width using the --max-width CSS variable, see this playground example.

The height depends on the content by default. Could you please share why you want to change the height?
In the example you also see the CSS for setting the height