zzstoatzz.io
slack status without the slack
status.zzstoatzz.io/
quickslice
fix: reduce whitespace in custom emoji picker
- set fixed dimensions for emoji buttons (2rem x 2rem)
- use auto-fill grid to prevent horizontal overflow
- adjust custom emoji padding for better fit
+13
-3
+13
-3
templates/status.html
+13
-3
templates/status.html
···
598
598
599
599
.emoji-grid {
600
600
display: grid;
601
-
grid-template-columns: repeat(8, 1fr);
601
+
grid-template-columns: repeat(auto-fill, 2rem);
602
602
gap: 0.25rem;
603
+
justify-content: start;
603
604
}
604
605
605
606
.emoji-option {
···
610
611
cursor: pointer;
611
612
border-radius: var(--radius-sm);
612
613
transition: background 0.2s;
614
+
display: flex;
615
+
align-items: center;
616
+
justify-content: center;
617
+
width: 2rem;
618
+
height: 2rem;
613
619
}
614
620
615
621
.emoji-option:hover {
···
617
623
}
618
624
619
625
/* Custom emoji styles */
626
+
.emoji-option.custom-emoji {
627
+
padding: 0.125rem;
628
+
}
629
+
620
630
.emoji-option.custom-emoji img {
621
-
width: 1.5rem;
622
-
height: 1.5rem;
631
+
width: 1.75rem;
632
+
height: 1.75rem;
623
633
object-fit: contain;
624
634
}
625
635