From b1259a83f4c54a92cf9af9c22f5b909f1b1fa955 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Thu, 1 Sep 2022 12:09:59 +0200
Subject: [PATCH] fix(StatusEmojiPopup): 'Flags' section is cut off in the
 emoji modal

account for top/bottom padding in the scroll view to fix the overall
height calculation

plus some smaller, mostly correct margins, cleanup

Fixes #7174
---
 ui/imports/shared/status/StatusEmojiPopup.qml | 23 +++++--------------
 .../shared/status/StatusEmojiSection.qml      |  3 +--
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/ui/imports/shared/status/StatusEmojiPopup.qml b/ui/imports/shared/status/StatusEmojiPopup.qml
index 20038ff557..f758fc9905 100644
--- a/ui/imports/shared/status/StatusEmojiPopup.qml
+++ b/ui/imports/shared/status/StatusEmojiPopup.qml
@@ -202,10 +202,10 @@ Popup {
 
     contentItem: ColumnLayout {
         anchors.fill: parent
-        spacing: 0
+        spacing: Style.current.smallPadding
 
         Item {
-            property int headerMargin: 8
+            readonly property int headerMargin: 8
 
             id: emojiHeader
             Layout.fillWidth: true
@@ -278,13 +278,9 @@ Popup {
             property int activeCategory: 0
 
             id: scrollView
-            leftPadding: Style.current.smallPadding
-            rightPadding: Style.current.smallPadding / 2
+            padding: Style.current.smallPadding
             Layout.fillWidth: true
-            Layout.rightMargin: Style.current.smallPadding / 2
-            Layout.topMargin: Style.current.smallPadding
-            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
-            Layout.preferredHeight: 400 - Style.current.smallPadding - emojiHeader.height
+            Layout.fillHeight: true
             ScrollBar.vertical.policy: ScrollBar.AlwaysOn
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
@@ -316,7 +312,7 @@ Popup {
                 })
 
                 categrorySectionHeightRatios = ratios
-                return totalHeight
+                return totalHeight - scrollView.topPadding - scrollView.bottomPadding
             }
 
             Repeater {
@@ -334,12 +330,10 @@ Popup {
         Row {
             Layout.fillWidth: true
             height: 40
-            leftPadding: Style.current.smallPadding / 2
-            rightPadding: Style.current.smallPadding / 2
             spacing: 0
 
             Repeater {
-                model: EmojiJSON.emojiCategories
+                model: StatusQUtils.Emoji.emojiJSON.emojiCategories
 
                 StatusTabBarIconButton {
                     icon.name: modelData
@@ -353,8 +347,3 @@ Popup {
         }
     }
 }
-/*##^##
-Designer {
-    D{i:0;formeditorColor:"#ffffff";height:440;width:360}
-}
-##^##*/
diff --git a/ui/imports/shared/status/StatusEmojiSection.qml b/ui/imports/shared/status/StatusEmojiSection.qml
index 79b01fe842..a8d848a318 100644
--- a/ui/imports/shared/status/StatusEmojiSection.qml
+++ b/ui/imports/shared/status/StatusEmojiSection.qml
@@ -23,8 +23,7 @@ Item {
     anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
     anchors.topMargin: 0
 
-    // childrenRect caused a binding loop here
-    height: this.visible ? emojiGrid.height + categoryText.height + noRecentText.height + Style.current.padding : 0
+    implicitHeight: visible ? childrenRect.height + Style.current.padding : 0
 
     StyledText {
         id: categoryText