Spacing for emoji buttons search

This commit is contained in:
Half-Shot
2024-11-08 13:01:40 +00:00
parent 0a8e53e393
commit f6e32742f2
2 changed files with 11 additions and 7 deletions

View File

@@ -39,12 +39,16 @@
list-style: none; list-style: none;
} }
.reactionsMenu {
min-height: 3em;
}
.reactionButton { .reactionButton {
padding: 1em; padding: 1em;
font-size: 1.8em; font-size: 1.4em;
width: 1.8em; width: 1.4em;
height: 1.8em; height: 1.4em;
border-radius: 1.8em; border-radius: 1.4em;
} }
.verticalSeperator { .verticalSeperator {
@@ -59,6 +63,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: var(--cpd-separator-spacing); gap: var(--cpd-separator-spacing);
margin-bottom: var(--cpd-space-3x);
} }
.searchForm > label { .searchForm > label {

View File

@@ -171,10 +171,9 @@ export function ReactionPopupMenu({
onClick={() => setIsSearching(false)} onClick={() => setIsSearching(false)}
/> />
</Form.Root> </Form.Root>
<Separator />
</> </>
) : null} ) : null}
<menu> <menu className={styles.reactionsMenu}>
{filteredReactionSet.map((reaction) => ( {filteredReactionSet.map((reaction) => (
<li className={styles.reactionPopupMenuItem} key={reaction.name}> <li className={styles.reactionPopupMenuItem} key={reaction.name}>
<Tooltip label={reaction.name}> <Tooltip label={reaction.name}>
@@ -192,7 +191,7 @@ export function ReactionPopupMenu({
</menu> </menu>
</section> </section>
{!isSearching ? ( {!isSearching ? (
<section> <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
<li key="search" className={styles.reactionPopupMenuItem}> <li key="search" className={styles.reactionPopupMenuItem}>
<Tooltip label={t("common.search")}> <Tooltip label={t("common.search")}>
<CpdButton <CpdButton