Private
Public Access
ksmithandClaude Sonnet 5
b4a104f8c6
The picker's delete "x" overlaps the glyph in a tightly packed grid, which is too easy to hit by accident on a touch screen. Adding and deleting custom emoji now live in their own modal under the account menu, with delete gated behind the same confirm() every other destructive action in the app uses. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
108 lines
2.1 KiB
CSS
108 lines
2.1 KiB
CSS
.emoji-picker-scrim {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 30;
|
|
}
|
|
|
|
.emoji-picker {
|
|
position: absolute;
|
|
z-index: 31;
|
|
width: 320px;
|
|
max-height: 380px;
|
|
overflow-y: auto;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--ds-border);
|
|
border-radius: var(--radius);
|
|
padding: var(--sp-2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-2);
|
|
}
|
|
|
|
.emoji-picker-below {
|
|
top: calc(100% + 8px);
|
|
}
|
|
|
|
.emoji-picker-above {
|
|
bottom: calc(100% + 8px);
|
|
}
|
|
|
|
.emoji-picker-left {
|
|
left: 0;
|
|
}
|
|
|
|
.emoji-picker-right {
|
|
right: 0;
|
|
}
|
|
|
|
.emoji-picker-search {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--ds-surface-2);
|
|
border: 1px solid var(--ds-border);
|
|
border-radius: var(--radius);
|
|
padding: 6px 10px;
|
|
color: var(--ds-text);
|
|
font-size: 0.82rem;
|
|
outline: none;
|
|
flex: none;
|
|
}
|
|
|
|
.emoji-picker-search:focus {
|
|
border-color: var(--ds-accent);
|
|
}
|
|
|
|
.emoji-picker-no-results {
|
|
font-size: 0.82rem;
|
|
color: var(--ds-muted);
|
|
padding: var(--sp-3) var(--sp-2);
|
|
text-align: center;
|
|
}
|
|
|
|
.emoji-picker-category-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ds-muted);
|
|
padding: 4px 4px 2px;
|
|
}
|
|
|
|
.emoji-picker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(9, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.emoji-picker-item {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 1.1rem;
|
|
line-height: 1;
|
|
padding: 6px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.emoji-picker-item:hover {
|
|
background: var(--ds-surface-2);
|
|
}
|
|
|
|
/* The picker is positioned absolutely relative to its trigger button, which
|
|
can sit close enough to a narrow viewport's edge that the full 320px
|
|
width runs off-screen (e.g. the composer's emoji trigger, near the left
|
|
edge, overflows the right edge on a 375px-wide phone). Shrinking the
|
|
fixed width -- rather than trying to dynamically reposition based on the
|
|
trigger's actual offset -- is enough margin for every real trigger
|
|
position in this app. */
|
|
@media (max-width: 480px) {
|
|
.emoji-picker {
|
|
width: min(280px, calc(100vw - 32px));
|
|
}
|
|
|
|
.emoji-picker-grid {
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
}
|