diff --git a/main.js b/main.js
index 053621c..3a5dcea 100644
--- a/main.js
+++ b/main.js
@@ -92,27 +92,60 @@ if (document.getElementById('email-list')) {
const fromFull = email.domain ? `${email.from}!${email.domain}` : email.from;
return fromFull === userFull;
});
+ // Sort emails by timestamp descending (newest first)
+ inboxEmails.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+ sentEmails.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
let currentFolder = 'inbox';
let selectedEmail = null;
- function renderList() {
- const list = currentFolder === 'inbox' ? inboxEmails : sentEmails;
- let html = `
';
- document.getElementById('email-list').innerHTML = html;
+ }
+ function renderList() {
+ const listDiv = document.getElementById('email-list');
+ if (!listDiv) return;
+ let emailsToShow = currentFolder === 'inbox' ? inboxEmails : sentEmails;
+ emailsToShow = filterEmails(emailsToShow);
+ let html = '';
+ emailsToShow.forEach((email, idx) => {
+ const isSelected = selectedEmail === idx;
+ const subject = email.subject || '(No Subject)';
+ const fromFull = email.from && email.domain ? `${email.from}!${email.domain}` : email.from || '';
+ const toFull = email.to && email.domain ? `${email.to}!${email.domain}` : email.to || '';
+ const dateStr = formatDate(email.timestamp);
+ html += `
`;
+ });
+ listDiv.innerHTML = html;
// Add click listeners
document.querySelectorAll('.email-list-item').forEach(item => {
item.onclick = function() {
@@ -123,25 +156,71 @@ if (document.getElementById('email-list')) {
});
}
function renderDetail() {
- const list = currentFolder === 'inbox' ? inboxEmails : sentEmails;
- if (selectedEmail == null || !list[selectedEmail]) {
- document.getElementById('email-detail').innerHTML = '';
+ const detailDiv = document.getElementById('email-detail');
+ if (!detailDiv) return;
+ let emailsToShow = currentFolder === 'inbox' ? inboxEmails : sentEmails;
+ if (selectedEmail == null || !emailsToShow[selectedEmail]) {
+ detailDiv.innerHTML = '
Select an email to view details.
';
return;
}
- const email = list[selectedEmail];
- const fromDisplay = email.domain ? `${email.from}!${email.domain}` : email.from;
- const toDisplay = email.domain ? `${email.to}!${email.domain}` : email.to;
- document.getElementById('email-detail').innerHTML = `
-
+ const email = emailsToShow[selectedEmail];
+ const fromFull = email.from && email.domain ? `${email.from}!${email.domain}` : email.from || '';
+ const toFull = email.to && email.domain ? `${email.to}!${email.domain}` : email.to || '';
+ const dateStr = formatDate(email.timestamp);
+ function formatFullDate(iso) {
+ if (!iso) return '';
+ const date = new Date(iso);
+ if (isNaN(date)) return '';
+ let month = String(date.getMonth() + 1).padStart(2, '0');
+ let day = String(date.getDate()).padStart(2, '0');
+ let year = date.getFullYear();
+ let hour = date.getHours();
+ let minute = date.getMinutes();
+ let ampm = hour >= 12 ? 'pm' : 'am';
+ hour = hour % 12;
+ if (hour === 0) hour = 12;
+ let timeStr = minute === 0 ? `${hour}${ampm}` : `${hour}:${String(minute).padStart(2, '0')}${ampm}`;
+ return `${month}/${day}/${year} @ ${timeStr}`;
+ }
+ const fullDateStr = formatFullDate(email.timestamp);
+
+ // Send POST to /mailbox/open to indicate message was opened
+ const { username, password } = getCredentials();
+ if (username && password && email.id) {
+ fetch('http://localhost:8080/mailbox/open', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Basic ' + btoa(username + ':' + password)
+ },
+ body: JSON.stringify({ user: username, id: email.id })
+ });
+ }
+
+ // Show 'Read' if in sent folder and email.read is true
+ let readHtml = '';
+ if (currentFolder === 'sent' && email.read === true) {
+ readHtml = '
Read';
+ }
+
+ detailDiv.innerHTML = `
+
+
+
${readHtml}${dateStr}
+ ${email.body || ''}
-
${email.body}
`;
}
+ // Helper to filter emails (no-op for now, can add search/filter later)
+ function filterEmails(emails) {
+ return emails;
+ }
// Sidebar folder switching
document.getElementById('sidebar-inbox').onclick = function() {
currentFolder = 'inbox';
@@ -164,6 +243,7 @@ if (document.getElementById('email-list')) {
})
.catch(err => {
document.getElementById('inboxError').innerText = 'Failed to load inbox.';
+ console.error('Inbox load error:', err);
});
}
}
@@ -208,21 +288,23 @@ if (document.getElementById('sendForm')) {
};
}
-// Compose Overlay logic
+// Compose Panel logic (bottom right, non-blocking)
if (document.getElementById('openComposeBtn')) {
- const overlay = document.getElementById('composeOverlay');
+ const panel = document.getElementById('composePanel');
const openBtn = document.getElementById('openComposeBtn');
- const closeBtn = document.getElementById('closeComposeBtn');
+ const closeXBtn = document.getElementById('composeCloseXBtn');
const form = document.getElementById('composeForm');
const errorP = document.getElementById('composeError');
openBtn.onclick = function() {
- overlay.style.display = 'flex';
+ panel.style.display = 'flex';
form.reset();
errorP.innerText = '';
};
- closeBtn.onclick = function() {
- overlay.style.display = 'none';
- };
+ if (closeXBtn) {
+ closeXBtn.onclick = function() {
+ panel.style.display = 'none';
+ };
+ }
form.onsubmit = async function(e) {
e.preventDefault();
const { username, password } = getCredentials();
@@ -252,11 +334,41 @@ if (document.getElementById('openComposeBtn')) {
body: JSON.stringify(email)
});
if (res.ok) {
- overlay.style.display = 'none';
+ panel.style.display = 'none';
location.reload();
} else {
const err = await res.text();
errorP.innerText = err;
}
};
+ // Ensure dark mode is applied on load for inbox.html
+ applyDarkMode(getDarkModePref());
+}
+
+// Dark mode toggle logic
+function applyDarkMode(isDark) {
+ if (isDark) {
+ document.body.classList.add('dark-mode');
+ } else {
+ document.body.classList.remove('dark-mode');
+ }
+}
+function getDarkModePref() {
+ return localStorage.getItem('darkMode') === 'true';
+}
+function setDarkModePref(val) {
+ localStorage.setItem('darkMode', val ? 'true' : 'false');
+}
+if (document.getElementById('toggleDarkModeBtn')) {
+ const btn = document.getElementById('toggleDarkModeBtn');
+ btn.onclick = function() {
+ const isDark = !getDarkModePref();
+ setDarkModePref(isDark);
+ applyDarkMode(isDark);
+ };
+ // Apply on load
+ applyDarkMode(getDarkModePref());
+} else {
+ // Apply dark mode on other pages too
+ applyDarkMode(getDarkModePref());
}
diff --git a/style-v1.css b/style-v1.css
new file mode 100644
index 0000000..b8b22eb
--- /dev/null
+++ b/style-v1.css
@@ -0,0 +1,306 @@
+body {
+ font-family: Arial, sans-serif;
+ background: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+body.dark-mode {
+ background: #181a1b;
+ color: #e0e0e0;
+}
+.layout {
+ display: flex;
+ min-height: 100vh;
+}
+.sidebar {
+ width: 240px;
+ background: #e0e0e0; /* Changed from #222e3c to a light grey */
+ color: #222e3c;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ padding: 32px 0 0 0;
+ box-shadow: 2px 0 8px rgba(0,0,0,0.04);
+}
+body.dark-mode .sidebar {
+ background: #23272e;
+ color: #e0e0e0;
+ box-shadow: 2px 0 8px rgba(0,0,0,0.18);
+}
+.sidebar h2 {
+ color: #222e3c;
+ text-align: center;
+ margin-bottom: 32px;
+ font-size: 1.5em;
+ letter-spacing: 1px;
+}
+body.dark-mode .sidebar h2,
+body.dark-mode .sidebar-btn,
+body.dark-mode .sidebar-btn.active,
+body.dark-mode .sidebar-btn:hover {
+ color: #e0e0e0;
+ background: #23272e;
+}
+.sidebar nav ul {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 24px 0;
+}
+.sidebar nav li {
+ margin: 0 0 8px 0;
+}
+.sidebar-btn {
+ width: 100%;
+ background: none;
+ border: none;
+ color: #222e3c;
+ padding: 14px 0;
+ font-size: 1.1em;
+ text-align: left;
+ padding-left: 32px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+body.dark-mode .sidebar-btn.active, body.dark-mode .sidebar-btn:hover {
+ background: #2d3138;
+}
+.sidebar-btn.active, .sidebar-btn:hover {
+ background: #cccccc;
+}
+.compose-btn, .logout-btn {
+ margin: 12px 24px 0 24px;
+ padding: 12px 0;
+ border-radius: 4px;
+ border: none;
+ font-size: 1em;
+ font-weight: bold;
+ cursor: pointer;
+}
+.compose-btn {
+ background: #0077cc;
+ color: #fff;
+}
+body.dark-mode .compose-btn {
+ background: #005fa3;
+ color: #fff;
+}
+.compose-btn:hover {
+ background: #005fa3;
+}
+.logout-btn {
+ background: #fff;
+ color: #222e3c;
+ border: 1px solid #eee;
+ margin-bottom: 24px;
+}
+body.dark-mode .logout-btn {
+ background: #23272e;
+ color: #e0e0e0;
+ border: 1px solid #444;
+}
+.logout-btn:hover {
+ background: #f4f4f4;
+}
+body.dark-mode .logout-btn:hover {
+ background: #181a1b;
+}
+.main-content {
+ flex: 1;
+ background: #fff;
+ padding: 40px 32px;
+ display: flex;
+ gap: 32px;
+}
+body.dark-mode .main-content {
+ background: #111317;
+}
+#email-list {
+ width: 340px;
+ border-right: 1px solid #eee;
+ padding-right: 24px;
+ overflow-y: auto;
+ max-height: 70vh;
+}
+body.dark-mode #email-list {
+ border-color: #333;
+}
+.email-list-section {
+ margin-bottom: 32px;
+}
+.email-list-title {
+ font-size: 1.1em;
+ color: #0077cc;
+ margin-bottom: 8px;
+}
+body.dark-mode .email-list-title {
+ color: #fff;
+}
+.email-list-item {
+ padding: 12px 10px;
+ border-radius: 4px;
+ margin-bottom: 6px;
+ cursor: pointer;
+ border: 1px solid transparent;
+ transition: background 0.15s, border 0.15s;
+}
+body.dark-mode .email-list-item {
+ background: #111317;
+ color: #fff;
+}
+.email-list-item.selected, .email-list-item:hover {
+ background: #f0f6fa;
+ border: 1px solid #0077cc;
+}
+body.dark-mode .email-list-item.selected, body.dark-mode .email-list-item:hover {
+ background: #2d3138;
+ border-color: #0077cc;
+}
+.email-list-item .subject {
+ font-weight: bold;
+ color: #222e3c;
+}
+body.dark-mode .email-list-item .subject {
+ color: #fff;
+}
+.email-list-item .fromto {
+ font-size: 0.95em;
+ color: #555;
+}
+.email-detail {
+ flex: 1;
+ min-width: 0;
+ padding-left: 24px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.email-detail-content {
+ background: #f8fafc;
+ border-radius: 8px;
+ padding: 24px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+body.dark-mode .email-detail-content {
+ background: #181a1b;
+ color: #e0e0e0;
+}
+.email-detail-header {
+ margin-bottom: 16px;
+}
+.email-detail-header strong {
+ color: #0077cc;
+}
+.email-detail-body {
+ margin-top: 16px;
+ white-space: pre-wrap;
+ color: #222e3c;
+}
+body.dark-mode .email-detail-body {
+ color: #fff;
+}
+.error {
+ color: #d8000c;
+ text-align: center;
+}
+body.dark-mode .error {
+ color: #ffb3b3;
+}
+/* Modal overlay for compose */
+.modal-overlay {
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background: rgba(0,0,0,0.35);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+.modal-content {
+ background: #fff;
+ padding: 32px 32px 24px 32px;
+ border-radius: 10px;
+ box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+ min-width: 340px;
+ max-width: 95vw;
+ max-height: 90vh;
+ overflow-y: auto;
+ position: relative;
+}
+body.dark-mode .modal-content {
+ background: #111317;
+ color: #e0e0e0;
+}
+#composeForm input, #composeForm textarea, #composeForm button {
+ width: 100%;
+ margin: 8px 0;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+}
+body.dark-mode input, body.dark-mode textarea {
+ background: #181a1b;
+ color: #e0e0e0;
+ border: 1px solid #444;
+}
+#composeForm button[type="submit"] {
+ background: #0077cc;
+ color: #fff;
+ border: none;
+ font-weight: bold;
+ margin-bottom: 0;
+}
+#composeForm button[type="submit"]:hover {
+ background: #005fa3;
+}
+#composeForm button[type="button"] {
+ background: #eee;
+ color: #222e3c;
+ border: none;
+ margin-top: 0;
+}
+#composeForm button[type="button"]:hover {
+ background: #ddd;
+}
+body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
+ color: #aaa;
+}
+.darkmode-btn {
+ margin: 12px 24px 0 24px;
+ padding: 12px 0;
+ border-radius: 4px;
+ border: none;
+ font-size: 1em;
+ font-weight: bold;
+ cursor: pointer;
+ background: #eee;
+ color: #222e3c;
+}
+body.dark-mode .darkmode-btn {
+ background: #444;
+ color: #fff;
+ border: none;
+}
+body.dark-mode .darkmode-btn:hover {
+ background: #222;
+}
+.darkmode-btn:hover {
+ background: #ccc;
+}
+@media (max-width: 900px) {
+ .main-content {
+ flex-direction: column;
+ padding: 24px 8px;
+ }
+ #email-list {
+ width: 100%;
+ max-height: 200px;
+ border-right: none;
+ border-bottom: 1px solid #eee;
+ padding-right: 0;
+ padding-bottom: 16px;
+ }
+ .email-detail {
+ padding-left: 0;
+ }
+}
diff --git a/style.css b/style.css
index ed12549..1e4e7c3 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,10 @@ body {
margin: 0;
padding: 0;
}
+body.dark-mode {
+ background: #181a1b;
+ color: #e0e0e0;
+}
.layout {
display: flex;
min-height: 100vh;
@@ -18,6 +22,11 @@ body {
padding: 32px 0 0 0;
box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}
+body.dark-mode .sidebar {
+ background: #23272e;
+ color: #e0e0e0;
+ box-shadow: 2px 0 8px rgba(0,0,0,0.18);
+}
.sidebar h2 {
color: #222e3c;
text-align: center;
@@ -25,6 +34,13 @@ body {
font-size: 1.5em;
letter-spacing: 1px;
}
+body.dark-mode .sidebar h2,
+body.dark-mode .sidebar-btn,
+body.dark-mode .sidebar-btn.active,
+body.dark-mode .sidebar-btn:hover {
+ color: #e0e0e0;
+ background: #23272e;
+}
.sidebar nav ul {
list-style: none;
padding: 0;
@@ -45,6 +61,9 @@ body {
cursor: pointer;
transition: background 0.2s;
}
+body.dark-mode .sidebar-btn.active, body.dark-mode .sidebar-btn:hover {
+ background: #2d3138;
+}
.sidebar-btn.active, .sidebar-btn:hover {
background: #cccccc;
}
@@ -61,6 +80,10 @@ body {
background: #0077cc;
color: #fff;
}
+body.dark-mode .compose-btn {
+ background: #005fa3;
+ color: #fff;
+}
.compose-btn:hover {
background: #005fa3;
}
@@ -70,9 +93,17 @@ body {
border: 1px solid #eee;
margin-bottom: 24px;
}
+body.dark-mode .logout-btn {
+ background: #23272e;
+ color: #e0e0e0;
+ border: 1px solid #444;
+}
.logout-btn:hover {
background: #f4f4f4;
}
+body.dark-mode .logout-btn:hover {
+ background: #181a1b;
+}
.main-content {
flex: 1;
background: #fff;
@@ -80,6 +111,9 @@ body {
display: flex;
gap: 32px;
}
+body.dark-mode .main-content {
+ background: #111317;
+}
#email-list {
width: 340px;
border-right: 1px solid #eee;
@@ -87,6 +121,9 @@ body {
overflow-y: auto;
max-height: 70vh;
}
+body.dark-mode #email-list {
+ border-color: #333;
+}
.email-list-section {
margin-bottom: 32px;
}
@@ -95,6 +132,9 @@ body {
color: #0077cc;
margin-bottom: 8px;
}
+body.dark-mode .email-list-title {
+ color: #fff;
+}
.email-list-item {
padding: 12px 10px;
border-radius: 4px;
@@ -103,14 +143,25 @@ body {
border: 1px solid transparent;
transition: background 0.15s, border 0.15s;
}
+body.dark-mode .email-list-item {
+ background: #111317;
+ color: #fff;
+}
.email-list-item.selected, .email-list-item:hover {
background: #f0f6fa;
border: 1px solid #0077cc;
}
+body.dark-mode .email-list-item.selected, body.dark-mode .email-list-item:hover {
+ background: #2d3138;
+ border-color: #0077cc;
+}
.email-list-item .subject {
font-weight: bold;
color: #222e3c;
}
+body.dark-mode .email-list-item .subject {
+ color: #fff;
+}
.email-list-item .fromto {
font-size: 0.95em;
color: #555;
@@ -129,6 +180,10 @@ body {
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
+body.dark-mode .email-detail-content {
+ background: #181a1b;
+ color: #e0e0e0;
+}
.email-detail-header {
margin-bottom: 16px;
}
@@ -140,10 +195,16 @@ body {
white-space: pre-wrap;
color: #222e3c;
}
+body.dark-mode .email-detail-body {
+ color: #fff;
+}
.error {
color: #d8000c;
text-align: center;
}
+body.dark-mode .error {
+ color: #ffb3b3;
+}
/* Modal overlay for compose */
.modal-overlay {
position: fixed;
@@ -153,6 +214,7 @@ body {
align-items: center;
justify-content: center;
z-index: 1000;
+ pointer-events: none;
}
.modal-content {
background: #fff;
@@ -165,24 +227,138 @@ body {
overflow-y: auto;
position: relative;
}
-#composeForm input, #composeForm textarea, #composeForm button {
+body.dark-mode .modal-content {
+ background: #111317;
+ color: #e0e0e0;
+}
+/* Compose panel for bottom right, non-blocking */
+.compose-panel {
+ position: fixed;
+ right: 32px;
+ bottom: 32px;
+ z-index: 2000;
+ min-width: 340px;
+ max-width: 95vw;
+ max-height: 90vh;
+ background: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+ padding: 32px 32px 0 32px;
+ display: none;
+ flex-direction: column;
+ overflow-y: auto;
+}
+body.dark-mode .compose-panel {
+ background: #111317;
+ color: #e0e0e0;
+}
+/* Remove all borders and spacing from compose fields, only a line between them */
+.compose-panel input,
+.compose-panel textarea {
+ border: none;
+ border-bottom: 2px solid #d0d0d0;
+ border-radius: 0;
+ background: transparent;
+ outline: none;
+ box-shadow: none;
+ margin: 0;
+ padding: 10px 0 6px 0;
+ font-size: 1em;
+ transition: border-color 0.2s;
width: 100%;
- margin: 8px 0;
- padding: 10px;
- border: 1px solid #ccc;
- border-radius: 4px;
box-sizing: border-box;
}
+.compose-panel input:first-child {
+ margin-top: 0;
+}
+.compose-panel input + input,
+.compose-panel input + textarea,
+.compose-panel textarea + input,
+.compose-panel textarea + textarea {
+ margin-top: 0;
+}
+.compose-panel input:focus,
+.compose-panel textarea:focus {
+ border-bottom: 2px solid #0077cc;
+ background: transparent;
+}
+body.dark-mode .compose-panel input,
+body.dark-mode .compose-panel textarea {
+ background: transparent;
+ color: #e0e0e0;
+ border-bottom: 2px solid #444;
+}
+body.dark-mode .compose-panel input:focus,
+body.dark-mode .compose-panel textarea:focus {
+ border-bottom: 2px solid #4da3ff;
+}
+.compose-panel input::placeholder,
+.compose-panel textarea::placeholder {
+ color: #888;
+ opacity: 1;
+}
+body.dark-mode .compose-panel input::placeholder,
+body.dark-mode .compose-panel textarea::placeholder {
+ color: #aaa;
+}
+#composeForm input, #composeForm textarea {
+ border: none !important;
+ border-bottom: 2px solid #d0d0d0 !important;
+ border-radius: 0 !important;
+ background: transparent !important;
+ margin: 0 !important;
+ padding: 10px 0 6px 0 !important;
+ width: 100%;
+ box-sizing: border-box;
+}
+body.dark-mode #composeForm input, body.dark-mode #composeForm textarea {
+ border-bottom: 2px solid #444 !important;
+ color: #e0e0e0;
+}
+#composeForm input:focus, #composeForm textarea:focus {
+ border-bottom: 2px solid #0077cc !important;
+}
+body.dark-mode #composeForm input:focus, body.dark-mode #composeForm textarea:focus {
+ border-bottom: 2px solid #4da3ff !important;
+}
+#composeForm input::placeholder, #composeForm textarea::placeholder {
+ color: #888;
+}
+body.dark-mode #composeForm input::placeholder, body.dark-mode #composeForm textarea::placeholder {
+ color: #aaa;
+}
+#composeForm {
+ display: flex;
+ flex-direction: column;
+ height: auto;
+ position: static;
+}
#composeForm button[type="submit"] {
+ align-self: flex-end;
+ margin-top: 16px;
+ margin-bottom: 0;
+ margin-right: 0;
+ position: static;
+ min-width: 100px;
+ min-height: 40px;
background: #0077cc;
color: #fff;
border: none;
font-weight: bold;
- margin-bottom: 0;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+ transition: background 0.2s;
}
#composeForm button[type="submit"]:hover {
background: #005fa3;
}
+body.dark-mode #composeForm button[type="submit"] {
+ background: #005fa3;
+ color: #fff;
+}
+body.dark-mode #composeForm button[type="submit"]:hover {
+ background: #0077cc;
+}
#composeForm button[type="button"] {
background: #eee;
color: #222e3c;
@@ -192,6 +368,38 @@ body {
#composeForm button[type="button"]:hover {
background: #ddd;
}
+body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
+ color: #aaa;
+}
+.darkmode-btn {
+ margin: 12px 24px 0 24px;
+ padding: 12px 0;
+ border-radius: 4px;
+ border: none;
+ font-size: 1em;
+ font-weight: bold;
+ cursor: pointer;
+ background: #eee;
+ color: #222e3c;
+}
+body.dark-mode .darkmode-btn {
+ background: #444;
+ color: #fff;
+ border: none;
+}
+body.dark-mode .darkmode-btn:hover {
+ background: #222;
+}
+.darkmode-btn:hover {
+ background: #ccc;
+}
+.sidebar-icon {
+ width: 15px;
+ height: 15px;
+ vertical-align: middle;
+ margin-right: 12px;
+ margin-bottom: 2px;
+}
@media (max-width: 900px) {
.main-content {
flex-direction: column;
@@ -209,3 +417,8 @@ body {
padding-left: 0;
}
}
+.compose-panel textarea,
+#composeForm textarea {
+ min-height: 120px !important;
+ resize: vertical;
+}