Fix layout with a single available reaction.

Telegram/SourceFiles/chat_helpers/chat_helpers.style

@@ -327,6 +327,7 @@ stickersPremiumLock: icon{{ "emoji/premium_lock", premiumButtonFg }};
 reactStripExtend: margins(21px, 49px, 39px, 0px);
 reactStripHeight: 40px;
 reactStripSize: 32px;
+reactStripMinWidth: 60px;
 reactStripImage: 26px;
 reactStripSkip: 7px;
 reactStripBubble: icon{

Telegram/SourceFiles/chat_helpers/emoji_list_widget.cpp

@@ -397,6 +397,10 @@ EmojiListWidget::EmojiListWidget(
 	setMouseTracking(true);
 	setAttribute(Qt::WA_OpaquePaintEvent);
 
+	_customSingleSize = Data::FrameSizeFromTag(
+		Data::CustomEmojiManager::SizeTag::Large
+	) / style::DevicePixelRatio();
+
 	_picker->hide();
 
 	for (auto i = 1; i != _staticCount; ++i) {
@@ -962,6 +966,7 @@ void EmojiListWidget::drawRecent(
 		position += _innerPosition + _customPosition;
 		_recent[index].custom->paint(p, {
 			.preview = st::windowBgRipple->c,
+			.size = QSize(_customSingleSize, _customSingleSize),
 			.now = now,
 			.scale = context.progress,
 			.position = position,
@@ -997,6 +1002,7 @@ void EmojiListWidget::drawCustom(
 	_custom[set].painted = true;
 	_custom[set].list[index].custom->paint(p, {
 		.preview = st::windowBgRipple->c,
+		.size = QSize(_customSingleSize, _customSingleSize),
 		.now = now,
 		.scale = context.progress,
 		.position = position,
@@ -1619,9 +1625,7 @@ std::vector<StickerIcon> EmojiListWidget::fillIcons() {
 	} else {
 		result.emplace_back(AllEmojiSectionSetId());
 	}
-	const auto esize = Data::FrameSizeFromTag(
+	const auto esize = _customSingleSize;
-		Data::CustomEmojiManager::SizeTag::Large
-	) / style::DevicePixelRatio();
 	for (const auto &custom : _custom) {
 		const auto set = custom.set;
 		result.emplace_back(set, custom.thumbnailDocument, esize, esize);

Telegram/SourceFiles/chat_helpers/emoji_list_widget.h

@@ -329,6 +329,7 @@ private:
 	QVector<EmojiPtr> _emoji[kEmojiSectionCount];
 	std::vector<CustomSet> _custom;
 	base::flat_map<DocumentId, CustomEmojiInstance> _customEmoji;
+	int _customSingleSize = 0;
 	bool _allowWithoutPremium = false;
 	Ui::RoundRect _overBg;
 

Telegram/SourceFiles/history/view/reactions/history_view_reactions_selector.cpp

@@ -85,7 +85,7 @@ Selector::Selector(
 , _parentController(parentController.get())
 , _reactions(std::move(reactions))
 , _cachedRound(
-	QSize(st::reactStripSkip * 2 + st::reactStripSize, st::reactStripHeight),
+	QSize(2 * st::reactStripSkip + st::reactStripSize, st::reactStripHeight),
 	st::reactionCornerShadow,
 	st::reactStripHeight)
 , _strip(
@@ -94,12 +94,22 @@ Selector::Selector(
 	crl::guard(this, [=] { update(_inner); }),
 	std::move(iconFactory))
 , _size(st::reactStripSize)
-, _skipx(st::reactStripSkip)
+, _skipx(countSkipLeft())
 , _skipy((st::reactStripHeight - st::reactStripSize) / 2)
 , _skipBottom(st::reactStripHeight - st::reactStripSize - _skipy) {
 	setMouseTracking(true);
 }
 
+int Selector::countSkipLeft() const {
+	const auto addedToMax = _reactions.customAllowed
+		|| _reactions.morePremiumAvailable;
+	const auto max = int(_reactions.recent.size()) + (addedToMax ? 1 : 0);
+	const auto width = max * _size;
+	return std::max(
+		(st::reactStripMinWidth - (max * _size)) / 2,
+		st::reactStripSkip);
+}
+
 int Selector::countWidth(int desiredWidth, int maxWidth) {
 	const auto addedToMax = _reactions.customAllowed
 		|| _reactions.morePremiumAvailable;
@@ -267,7 +277,6 @@ void Selector::paintExpanding(Painter &p, float64 progress) {
 	const auto rects = paintExpandingBg(p, progress);
 	//paintStripWithoutExpand(p);
 	progress /= kFullDuration;
-	paintFadingExpandIcon(p, progress);
 	if (_footer) {
 		_footer->paintExpanding(
 			p,
@@ -281,6 +290,7 @@ void Selector::paintExpanding(Painter &p, float64 progress) {
 		rects.finalBottom,
 		progress,
 		RectPart::TopRight);
+	paintFadingExpandIcon(p, progress);
 }
 
 auto Selector::paintExpandingBg(QPainter &p, float64 progress)
@@ -409,7 +419,7 @@ void Selector::mouseMoveEvent(QMouseEvent *e) {
 }
 
 int Selector::lookupSelectedIndex(QPoint position) const {
-	const auto p = position - _inner.topLeft();
+	const auto p = position - _inner.topLeft() - QPoint(_skipx, _skipy);
 	const auto max = _strip.count();
 	const auto index = p.x() / _size;
 	if (p.x() >= 0 && p.y() >= 0 && p.y() < _inner.height() && index < max) {

Telegram/SourceFiles/history/view/reactions/history_view_reactions_selector.h

@@ -89,6 +89,7 @@ private:
 	void paintBubble(QPainter &p, int innerWidth);
 	void paintBackgroundToBuffer();
 
+	[[nodiscard]] int countSkipLeft() const;
 	[[nodiscard]] int lookupSelectedIndex(QPoint position) const;
 	void setSelected(int index);