diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js
index 64db741..ff914c2 100644
--- a/packages/browser-extension/src/scripts/dialog.js
+++ b/packages/browser-extension/src/scripts/dialog.js
@@ -40,16 +40,12 @@ const reportDialogHtml = `
${browser.i18n.getMessage('reportDialog_urlInputLabel')}
*
-
+ />
${browser.i18n.getMessage('reportDialog_urlInputError')}
@@ -59,19 +55,13 @@ const reportDialogHtml = `
${browser.i18n.getMessage('reportDialog_reasonInputLabel')}
*
-
- ${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}
-
+ rows="4"
+ >${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}
${browser.i18n.getMessage('reportDialog_reasonInputError')}
@@ -152,8 +142,8 @@ function inputKeyDownHandler(event) {
*/
function inputPasteHandler(event) {
event.preventDefault();
- const text = event.clipboardData?.getData('text').replace(/\r?\n|\r/g, ' ');
+ const text = event.clipboardData?.getData('text').replace(/\r?\n|\r/g, ' ');
const selection = window.getSelection();
if (selection.rangeCount) {
@@ -174,7 +164,7 @@ function showReportDialog() {
existingDialog.showModal();
submitButton.setAttribute('aria-disabled', 'false');
- urlInput.textContent = window.location.origin + window.location.pathname;
+ urlInput.setAttribute('value', window.location.origin + window.location.pathname);
return;
}
@@ -188,8 +178,7 @@ function showReportDialog() {
const urlInput = dialog?.querySelector('#report-dialog-input-url');
closeButton.addEventListener('click', closeButtonClickHandler);
- dialog.querySelector('#report-dialog-input-url').textContent =
- window.location.origin + window.location.pathname;
+ urlInput.setAttribute('value', window.location.origin + window.location.pathname);
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
link.setAttribute('id', 'report-dialog-font');
link.setAttribute('rel', 'stylesheet');
@@ -222,9 +211,9 @@ async function submitButtonClickHandler(event) {
const dialog = document.getElementById(reportDialogId);
const reasonInput = dialog?.querySelector('#report-dialog-input-reason');
- const reasonText = reasonInput?.textContent.trim();
+ const reasonText = reasonInput?.value.trim();
const urlInput = dialog?.querySelector('#report-dialog-input-url');
- const urlText = urlInput?.textContent.trim();
+ const urlText = urlInput?.value.trim();
const errors = validateForm({ reason: reasonText, url: urlText });
diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css
index f4934e3..091fa3a 100644
--- a/packages/browser-extension/src/styles/dialog.css
+++ b/packages/browser-extension/src/styles/dialog.css
@@ -126,6 +126,7 @@
}
#report-dialog .report-dialog-input {
+ all: unset;
border: 1px solid var(--cookie-dialog-monster-color-tertiary);
border-radius: 4px;
color: var(--cookie-dialog-monster-color-secondary);
@@ -213,7 +214,7 @@
display: flex;
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 14px;
- height: 39px;
+ height: 42px;
justify-content: center;
line-height: 1.2;
outline: none;