[frontend/pages] Make emoji management layout flex

This commit is contained in:
pancakes 2025-03-07 14:47:41 +10:00 committed by Laura Hausmann
parent c43394075a
commit 7c0ed5fed4
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
3 changed files with 31 additions and 9 deletions

View file

@ -3,6 +3,7 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
width: 25rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
border-radius: 0.5rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
@ -38,4 +39,10 @@
line-height: 1; line-height: 1;
color: var(--notice-color); color: var(--notice-color);
} }
}
@media (max-width: 1000px) {
.emoji-entry {
width: 100%;
}
} }

View file

@ -1,15 +1,16 @@
.emoji-search { .emoji-search {
display: flex; display: flex;
margin-top: 1rem; margin-top: 1rem;
button {
margin-right: 0;
}
} }
.search { .search {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} margin-left: 0;
.search-from {
display: inline-block;
} }
.category-name { .category-name {
@ -19,8 +20,8 @@
} }
.emoji-list { .emoji-list {
display: grid; display: flex;
grid-template-columns: repeat(2, 1fr); flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
} }
@ -37,6 +38,6 @@
@media (max-width: 1000px) { @media (max-width: 1000px) {
.emoji-list { .emoji-list {
grid-template-columns: 1fr; flex-direction: column;
} }
} }

View file

@ -1,6 +1,10 @@
.emoji-search { .emoji-search {
display: flex; display: flex;
margin: 1rem 0; margin: 1rem 0;
button {
margin-right: 0;
}
} }
.search { .search {
@ -8,9 +12,13 @@
width: 100%; width: 100%;
} }
.search:first-of-type {
margin-left: 0;
}
.emoji-list { .emoji-list {
display: grid; display: flex;
grid-template-columns: repeat(2, 1fr); flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
} }
@ -19,4 +27,10 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 5rem; margin-top: 5rem;
}
@media (max-width: 1000px) {
.emoji-list {
flex-direction: column;
}
} }