discourse/app/assets/stylesheets/admin/emails.scss
Kris 6a99e7490a
UX: minor improvements to the admin email log layout (#34735)
Some minor improvements to the table layout

Giving long columns a little min width...

Before:
<img width="186" height="209" alt="image"
src="https://github.com/user-attachments/assets/d129b567-40e5-4d0c-a55b-d2252440f5e7"
/>

After:
<img width="332" height="291" alt="image"
src="https://github.com/user-attachments/assets/3b205942-ae31-4f45-ba91-9fab999c0267"
/>

Putting user info within a single link...

Before:
<img width="327" height="199" alt="image"
src="https://github.com/user-attachments/assets/54ece2d2-1ac5-4b9f-891a-dc62ea7a93b2"
/>


After: 
<img width="334" height="160" alt="image"
src="https://github.com/user-attachments/assets/ba1dd821-c9f9-4846-8c9f-a4c592923d33"
/>
2025-09-05 10:11:45 -04:00

213 lines
2.9 KiB
SCSS
Vendored

// Styles for admin/emails
// Emails
.admin-email-logs {
.admin-container {
margin-top: 0;
}
}
.email-list {
th {
white-space: nowrap;
min-width: 6rem;
}
.email-logs-user a {
display: flex;
gap: var(--space-2);
align-items: center;
min-width: 200px;
img {
align-self: baseline;
}
}
.filters input {
width: 100%;
}
.time {
width: 50px;
}
.reply-key {
display: block;
font-size: var(--font-down-1);
color: var(--primary-medium);
}
.username div {
max-width: 180px;
}
.addresses p {
margin: 2px 0;
max-width: 200px;
}
a {
// prevent long links from breaking the layout
display: inline-block;
max-width: 300px;
overflow-wrap: anywhere;
+ a {
margin-top: var(--space-2);
}
&[href^="mailto:"] {
// don't aggressively wrap email addresses
min-width: 250px;
}
}
code {
white-space: pre-line;
}
.email-details {
text-align: right;
a {
color: var(--primary-high);
}
}
td {
max-width: 20em;
overflow-wrap: break-word;
}
.incoming-email-link,
.sent-email-post-link-with-smtp-response {
min-width: 19em;
}
}
.incoming-emails {
.control-group {
margin: 8px 0;
}
.controls {
margin-left: 110px;
}
p {
margin: 5px 10px;
}
.error-description {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
hr {
margin: 0;
}
label {
font-weight: bold;
float: left;
width: 100px;
text-align: right;
margin: 0 10px;
}
ul {
list-style: none;
margin: 0 10px;
}
textarea {
width: 95%;
height: 150px;
font-family: monospace;
box-shadow: none;
}
}
.admin-list-item {
width: 100%;
border-top: 1px solid var(--content-border-color);
padding: 0.25em 0;
}
.email-preview-digest {
.controls {
margin: 1em 0.5em;
}
.preview-output iframe {
width: 100%;
height: 600px;
border-width: 1px;
}
}
.email-advanced-test {
.admin-controls {
display: block;
}
.email-body {
width: 95%;
height: 150px;
font-family: monospace;
}
}
.admin-email {
.email-list {
.sent-email-reply-key {
.reply-key {
word-break: break-word;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 125px;
}
}
.sent-email-post-link-with-smtp-response {
width: 100%;
display: inline-block;
word-break: break-word;
code {
font-size: var(--font-down-2);
}
}
}
}
// specific email admin modal styling
.admin-incoming-email-modal {
.incoming-emails {
label {
float: none;
margin: 0;
width: unset;
}
.control-group {
textarea {
height: 200px;
}
&:last-of-type textarea {
height: 40px;
}
}
.controls {
margin: 0;
}
p {
margin: 5px 0;
}
}
}