From 6a7df1065d1c40d2cb444631b52fdd6e13808fa1 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Mon, 22 Apr 2024 23:38:31 +0900
Subject: [PATCH] Fix scrolling issue on emoji picker (#2032)

* Fix scrolling issue in emoji picker

* Fix design on emoji section header
---
 .../Editor/Components/CustomEmojisView.swift  | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/Packages/StatusKit/Sources/StatusKit/Editor/Components/CustomEmojisView.swift b/Packages/StatusKit/Sources/StatusKit/Editor/Components/CustomEmojisView.swift
index 5ac2ee66..4f654b9b 100644
--- a/Packages/StatusKit/Sources/StatusKit/Editor/Components/CustomEmojisView.swift
+++ b/Packages/StatusKit/Sources/StatusKit/Editor/Components/CustomEmojisView.swift
@@ -8,16 +8,16 @@ extension StatusEditor {
   @MainActor
   struct CustomEmojisView: View {
     @Environment(\.dismiss) private var dismiss
-
+    
     @Environment(Theme.self) private var theme
-
+    
     var viewModel: ViewModel
-
+    
     var body: some View {
       NavigationStack {
         ScrollView {
-          ForEach(viewModel.customEmojiContainer) { container in
-            LazyVGrid(columns: [GridItem(.adaptive(minimum: 40, maximum: 40))], spacing: 9) {
+          LazyVGrid(columns: [GridItem(.adaptive(minimum: 40, maximum: 40))], spacing: 9) {
+            ForEach(viewModel.customEmojiContainer) { container in
               Section {
                 ForEach(container.emojis) { emoji in
                   LazyImage(url: emoji.url) { state in
@@ -39,15 +39,16 @@ extension StatusEditor {
                     viewModel.insertStatusText(text: " :\(emoji.shortcode): ")
                   }
                 }
+                .padding(.horizontal, 16)
               } header: {
-                HStack {
-                  Text(container.categoryName)
-                    .font(.scaledFootnote)
-                  Spacer()
-                }
+                Text(container.categoryName)
+                  .font(.scaledHeadline)
+                  .bold()
+                  .foregroundStyle(Color.secondary)
+                  .frame(maxWidth: .infinity, alignment: .leading)
+                  .padding(.horizontal, 16)
               }
             }
-            .padding(.horizontal, 8)
           }
         }
         .toolbar {