Improve stories controls geometry constraints.

Telegram/SourceFiles/chat_helpers/chat_helpers.style

@@ -172,6 +172,8 @@ ComposeControls {
 	emoji: EmojiButton;
 	suggestions: EmojiSuggestions;
 	tabbed: EmojiPan;
+	tabbedHeightMin: pixels;
+	tabbedHeightMax: pixels;
 	record: RecordBar;
 }
 
@@ -982,5 +984,7 @@ defaultComposeControls: ComposeControls {
 	emoji: historyAttachEmoji;
 	suggestions: defaultEmojiSuggestions;
 	tabbed: defaultEmojiPan;
+	tabbedHeightMin: emojiPanMinHeight;
+	tabbedHeightMax: emojiPanMaxHeight;
 	record: defaultRecordBar;
 }

Telegram/SourceFiles/chat_helpers/emoji_suggestions_widget.cpp

@@ -866,6 +866,7 @@ void SuggestionsController::showWithQuery(SuggestionsQuery query) {
 	const auto force = base::take(_keywordsRefreshed);
 	_lastShownQuery = query;
 	_suggestions->showWithQuery(_lastShownQuery, force);
+	_container->resizeToContent();
 }
 
 SuggestionsQuery SuggestionsController::getEmojiQuery() {

Telegram/SourceFiles/chat_helpers/field_autocomplete.cpp

@@ -693,9 +693,14 @@ void FieldAutocomplete::recount(bool resetScroll) {
 	if (h > _boundings.height()) h = _boundings.height();
 	if (h > maxh) h = maxh;
 	if (width() != _boundings.width() || height() != h) {
-		setGeometry(_boundings.x(), _boundings.y() + _boundings.height() - h, _boundings.width(), h);
+		setGeometry(
+			_boundings.x(),
+			_boundings.y() + _boundings.height() - h,
+			_boundings.width(),
+			h);
 		_scroll->resize(_boundings.width(), h);
-	} else if (y() != _boundings.y() + _boundings.height() - h) {
+	} else if (x() != _boundings.x()
+		|| y() != _boundings.y() + _boundings.height() - h) {
 		move(_boundings.x(), _boundings.y() + _boundings.height() - h);
 	}
 	if (resetScroll) st = 0;

Telegram/SourceFiles/history/view/controls/history_view_compose_controls.cpp

@@ -2596,6 +2596,10 @@ void ComposeControls::createTabbedPanel() {
 	setTabbedPanel(std::make_unique<TabbedPanel>(
 		_parent,
 		std::move(descriptor)));
+	_tabbedPanel->setDesiredHeightValues(
+		st::emojiPanHeightRatio,
+		_st.tabbedHeightMin,
+		_st.tabbedHeightMax);
 }
 
 void ComposeControls::setTabbedPanel(

Telegram/SourceFiles/media/stories/media_stories_controller.cpp

@@ -31,7 +31,8 @@ namespace {
 constexpr auto kPhotoProgressInterval = crl::time(100);
 constexpr auto kPhotoDuration = 5 * crl::time(1000);
 constexpr auto kFullContentFade = 0.35;
-constexpr auto kSiblingMultiplier = 0.448;
+constexpr auto kSiblingMultiplierDefault = 0.448;
+constexpr auto kSiblingMultiplierMax = 0.72;
 constexpr auto kSiblingOutsidePart = 0.24;
 constexpr auto kSiblingUserpicSize = 0.3;
 constexpr auto kInnerHeightMultiplier = 1.6;
@@ -217,12 +218,30 @@ void Controller::initLayout() {
 			layout.controlsWidth,
 			layout.controlsBottomPosition.y());
 
-		const auto siblingSize = layout.content.size() * kSiblingMultiplier;
+		const auto sidesAvailable = size.width() - layout.content.width();
+		const auto widthForSiblings = sidesAvailable
+			- 2 * st::storiesFieldMargin.bottom();
+		const auto siblingWidthMax = widthForSiblings
+			/ (2 * (1. - kSiblingOutsidePart));
+		const auto siblingMultiplierMax = std::max(
+			kSiblingMultiplierDefault,
+			st::storiesSiblingWidthMin / float64(layout.content.width()));
+		const auto siblingMultiplier = std::min({
+			siblingMultiplierMax,
+			kSiblingMultiplierMax,
+			siblingWidthMax / layout.content.width(),
+		});
+		const auto siblingSize = layout.content.size() * siblingMultiplier;
 		const auto siblingTop = (size.height() - siblingSize.height()) / 2;
-		const auto outside = int(base::SafeRound(
+		const auto outsideMax = int(base::SafeRound(
 			siblingSize.width() * kSiblingOutsidePart));
-		const auto xLeft = -outside;
+		const auto leftAvailable = layout.content.x() - siblingSize.width();
-		const auto xRight = size.width() - siblingSize.width() + outside;
+		const auto xDesired = leftAvailable / 3;
+		const auto xPossible = std::min(
+			xDesired,
+			(leftAvailable - st::storiesControlSize));
+		const auto xLeft = std::max(xPossible, -outsideMax);
+		const auto xRight = size.width() - siblingSize.width() - xLeft;
 		const auto userpicSize = int(base::SafeRound(
 			siblingSize.width() * kSiblingUserpicSize));
 		const auto innerHeight = userpicSize * kInnerHeightMultiplier;
@@ -234,11 +253,13 @@ void Controller::initLayout() {
 				userpicSize
 			).translated(geometry.topLeft());
 		};
-		const auto nameFontSize = st::storiesMaxNameFontSize * contentHeight
+		const auto nameFontSize = std::max(
-			/ st::storiesMaxSize.height();
+			(st::storiesMaxNameFontSize * contentHeight
+				/ st::storiesMaxSize.height()),
+			st::fsize);
 		const auto nameBoundingRect = [&](QRect geometry, bool left) {
 			const auto skipSmall = nameFontSize;
-			const auto skipBig = skipSmall + outside;
+			const auto skipBig = skipSmall - std::min(xLeft, 0);
 			const auto top = userpic(geometry).y() + innerHeight;
 			return QRect(
 				left ? skipBig : skipSmall,

Telegram/SourceFiles/media/stories/media_stories_reply.cpp

@@ -65,16 +65,16 @@ void ReplyArea::initGeometry() {
 		_controls->height()
 	) | rpl::start_with_next([=](const Layout &layout, int height) {
 		const auto content = layout.content;
-		_controls->resizeToWidth(content.width());
+		_controls->resizeToWidth(layout.controlsWidth);
 		if (_controls->heightCurrent() == height) {
 			const auto position = layout.controlsBottomPosition
 				- QPoint(0, height);
 			_controls->move(position.x(), position.y());
 			const auto &tabbed = st::storiesComposeControls.tabbed;
 			const auto upper = QRect(
-				content.x(),
+				position.x(),
 				content.y(),
-				content.width(),
+				layout.controlsWidth,
 				(position.y()
 					+ tabbed.autocompleteBottomSkip
 					- content.y()));

Telegram/SourceFiles/media/stories/media_stories_sibling.cpp

@@ -338,18 +338,16 @@ QPoint Sibling::namePosition(
 		const QImage &image) const {
 	const auto size = image.size() / image.devicePixelRatio();
 	const auto width = size.width();
+	const auto bounding = layout.nameBoundingRect;
 	const auto left = layout.geometry.x()
 		+ (layout.geometry.width() - width) / 2;
-	if (left < layout.nameBoundingRect.x()) {
+	const auto top = bounding.y() + bounding.height() - size.height();
-		return layout.nameBoundingRect.topLeft();
+	if (left < bounding.x()) {
-	} else if (left + width > layout.nameBoundingRect.x() + layout.nameBoundingRect.width()) {
+		return { bounding.x(), top };
-		return layout.nameBoundingRect.topLeft()
+	} else if (left + width > bounding.x() + bounding.width()) {
-			+ QPoint(layout.nameBoundingRect.width() - width, 0);
+		return { bounding.x() + bounding.width() - width, top };
 	}
-	const auto top = layout.nameBoundingRect.y()
+	return { left, top };
-		+ layout.nameBoundingRect.height()
-		- size.height();
-	return QPoint(left, top);
 }
 
 void Sibling::check() {

Telegram/SourceFiles/media/view/media_view.style

@@ -408,6 +408,7 @@ pipVolumeIcon2Over: icon {{ "player/player_volume_on", mediaviewPipControlsFgOve
 speedSliderDividerSize: size(2px, 8px);
 
 storiesMaxSize: size(540px, 960px);
+storiesSiblingWidthMin: 200px; // Try making sibling not less than this.
 storiesMaxNameFontSize: 17px;
 storiesRadius: 8px;
 storiesControlSize: 64px;
@@ -433,7 +434,7 @@ storiesHeaderDate: FlatLabel(defaultFlatLabel) {
 storiesHeaderDatePosition: point(50px, 17px);
 storiesShadowTop: icon{{ "mediaview/shadow_bottom-flip_vertical", windowShadowFg }};
 storiesShadowBottom: mediaviewShadowBottom;
-storiesControlsMinWidth: 200px;
+storiesControlsMinWidth: 280px;
 storiesFieldMargin: margins(0px, 14px, 0px, 16px);
 storiesSideSkip: 145px;
 storiesCaptionFull: FlatLabel(defaultFlatLabel) {
@@ -640,6 +641,8 @@ storiesComposeControls: ComposeControls(defaultComposeControls) {
 		}
 		autocompleteBottomSkip: 10px;
 	}
+	tabbedHeightMin: 220px;
+	tabbedHeightMax: 480px;
 	record: RecordBar(defaultRecordBar) {
 		bg: storiesComposeBg;
 		durationFg: storiesComposeWhiteText;

Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp

@@ -5025,6 +5025,7 @@ void OverlayWidget::setStoriesUser(UserData *user) {
 			updateControlsGeometry();
 		}, _stories->lifetime());
 		_storiesChanged.fire({});
+		_dropdown->raise();
 	}
 }