{
document.getElementById('add-tag').style.display = 'none';
document.getElementById('all-tags').appendChild(tagName);
document.getElementById('all-tags').appendChild(check);
+ document.getElementById('all-tags').setAttribute('style', 'display: flex; flex-wrap: wrap;');
let checkBtn = document.getElementById('checkmark');
checkBtn.onclick = () => {
@@ -304,7 +305,10 @@ document.getElementById('add-tag').onclick = () => {
const addedTag = document.createElement('p');
addedTag.className = 'tag';
addedTag.textContent = tagValue;
- document.getElementById('all-tags').appendChild(addedTag);
+ addedTag.setAttribute('style', 'height: fit-content');
+ document
+ .getElementById('all-tags')
+ .insertBefore(addedTag, document.getElementById('add-tag'));
document.getElementById('add-tag').style.display = 'block';
document.getElementById('all-tags').removeChild(tagName);
document.getElementById('all-tags').removeChild(checkBtn);
@@ -321,7 +325,7 @@ function getEventData() {
var endDate = new Date(eventinfo.endtimestamp * 1000);
document.getElementById('eventdetails').innerHTML = /* html */ `
-
diff --git a/public/components/ContactForm.js b/public/components/ContactForm.js
index 3a4ee79..5c85b73 100644
--- a/public/components/ContactForm.js
+++ b/public/components/ContactForm.js
@@ -34,7 +34,7 @@ class ContactForm extends Component {
}
div {
width: 100%;
- max-width: var(--max-width-small);
+ max-width: var(--max-width-medium);
margin: 0 auto;
height: 100%;
color: var(--accent);
diff --git a/public/styles/inputs.css b/public/styles/inputs.css
index 7d7aded..97862c1 100644
--- a/public/styles/inputs.css
+++ b/public/styles/inputs.css
@@ -24,7 +24,7 @@ input:-webkit-autofill:active {
}
.form textarea {
- min-width: min(850px, calc(95vw));
+ min-width: var(--max-width-medium);
border: 2px solid var(--accent);
resize: none;
}
diff --git a/public/styles/variables.css b/public/styles/variables.css
index f756b31..2f52828 100644
--- a/public/styles/variables.css
+++ b/public/styles/variables.css
@@ -16,7 +16,7 @@
--success-lighter: lightgreen;
--success-darker: darkgreen;
--max-width: min(1000px, 100vw);
- --max-width-small: min(800px, 100vw);
+ --max-width-medium: min(850px, calc(95vw));
--delete: #f02828;
--delete-lighter: #f87777;
--delete-darker: #d30707;