RollbackWorkloadDialog: Direct Manipulation of CSS in sizeDialog() Function

[rak-phillip]

The sizeDialog() function in the close workload dialog directly modifies CSS properties of elements owned and maintained by vue-js-modal. This approach raises concerns about maintainability for two reasons:

1. vue-js-modal or our modal implementation could change - leading to unintended regressions in the behavior of this dialog
2. Directly manipulating CSS may have unintended side-effects, where these styles may be applied dynamically or overridden by other CSS rules

Proposed Change

Instead of directly manipulating CSS, consider emitting an event from the component to signal the need for dialog sizing changes.

Referenced Code

dashboard/shell/dialog/RollbackWorkloadDialog.vue

Lines 165 to 172 in ddbb569

	sizeDialog() {
	const dialogs = document.getElementsByClassName('v--modal');
	const width = this.showDiff ? '85%' : '600px';
	if (dialogs.length === 1) {
	dialogs[0].style.setProperty('--prompt-modal-width', width);
	}
	},