diff --git a/ui/component/commentCreate/sticker-selector.jsx b/ui/component/commentCreate/sticker-selector.jsx
index c82aa9df8..11513af92 100644
--- a/ui/component/commentCreate/sticker-selector.jsx
+++ b/ui/component/commentCreate/sticker-selector.jsx
@@ -33,6 +33,12 @@ export default function StickerSelector(props: Props) {
}
}
+ const StickerWrapper = (stickerProps: any) => {
+ const { price, children } = stickerProps;
+
+ return price ?
@@ -47,10 +53,12 @@ export default function StickerSelector(props: Props) {
className="button--file-action"
onClick={() => onSelect(sticker)}
>
-
- {sticker.price && sticker.price > 0 && (
-
- )}
+
+
+ {sticker.price && sticker.price > 0 && (
+
+ )}
+
))}
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index e570fa93d..fdf7b76e4 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -481,7 +481,7 @@ $thumbnailWidthSmall: 1rem;
.sticker__comment {
margin-left: var(--spacing-m);
- height: 6rem;
+ height: 7rem;
overflow: hidden;
img {
diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss
index 3c0650a5c..3132d63bd 100644
--- a/ui/scss/component/_livestream.scss
+++ b/ui/scss/component/_livestream.scss
@@ -147,6 +147,7 @@ $recent-msg-button__height: 2rem;
.livestream-comment__info--sticker {
display: flex;
+ flex-direction: column;
margin: var(--spacing-xxs) 0;
}
diff --git a/ui/scss/component/_sticker-selector.scss b/ui/scss/component/_sticker-selector.scss
index 543bbb7d1..629707844 100644
--- a/ui/scss/component/_sticker-selector.scss
+++ b/ui/scss/component/_sticker-selector.scss
@@ -47,35 +47,48 @@
display: flex;
.stickerSelector__listBody {
- display: flex;
- flex-wrap: wrap;
overflow-y: scroll;
overflow-x: hidden;
max-height: 25vh;
padding: var(--spacing-s);
- .button--file-action {
- width: 5rem;
- height: 5.3rem;
- overflow: hidden;
- margin: unset;
- padding: var(--spacing-s);
+ .stickerSelector__listBody-rowItems {
+ display: flex;
+ flex-wrap: wrap;
+ overflow-y: scroll;
+ overflow-x: hidden;
- .button__content {
- display: flex;
- flex-direction: column;
- align-items: center;
+ .button--file-action {
+ width: 5.5rem;
+ height: 6rem;
+ overflow: hidden;
+ margin: unset;
+ padding: var(--spacing-xxs);
- .super-chat--light {
- position: absolute;
- display: inline;
- bottom: 0;
+ .stickerItem--paid {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ img {
+ margin-bottom: var(--spacing-s);
+ }
+
+ .super-chat--light {
+ position: absolute;
+ display: inline;
+ bottom: 0;
+ }
}
- }
- @media (max-width: $breakpoint-xsmall) {
- width: 4rem;
- height: 4.3rem;
+ img {
+ margin: auto;
+ }
+
+ @media (max-width: $breakpoint-xsmall) {
+ width: 3.5rem;
+ height: 4rem;
+ }
}
}
}