emoji: Fix bottom padding of emoji picker

[PIG208]

Previously, the body of the bottom sheet was wrapped in SafeArea. This pads the bottom unconditionally, shifting the bottom of the list view above the device bottom inset.

This is undesirable, because the area beneath the bottom inset is still visible, and the list view should extend to the bottom regardless of the bottom inset.

By just removing the SafeArea, the list view extends to the bottom. However, if the bottom inset is more than 8px, we can't scroll past the last item in the list view. Essentially, we want the behavior of SafeArea.minimum with a ListView — the bottom of the list should always be padded by at least 8px, so that we can scroll past the shadow; and if the bottom inset is more than 8px, use that as the padding instead — which is achieved through the use ListView.padding and MediaQuery.

[PIG208]

Comparisons

The bottom bar represents the device padding.

before (SafeArea + 8px bottom padding)	after max(8px, bottom inset) bottom padding
partially scrolled to the bottom, with shadow visible
fully scrolled to the bottom
with keyboard open, unscrolled

The following patch was used to make the builds in the screenshots:

diff --git a/lib/widgets/app.dart b/lib/widgets/app.dart
index 75fec7bc8..ea1e3726a 100644
--- a/lib/widgets/app.dart
+++ b/lib/widgets/app.dart
@@ -175,6 +175,7 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
   @override
   Widget build(BuildContext context) {
     final themeData = zulipThemeData(context);
+    final mediaQuery = MediaQuery.maybeOf(context);
     return GlobalStoreWidget(
       child: Builder(builder: (context) {
         final globalStore = GlobalStoreWidget.of(context);
@@ -194,7 +195,21 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
                 (_) => widget._declareReady());
             }
             GlobalLocalizations.zulipLocalizations = ZulipLocalizations.of(context);
-            return child!;
+            return Center(
+              child: Stack(
+                children: [
+                  MediaQuery(
+                    data: mediaQuery!.copyWith(
+                      viewPadding: mediaQuery.viewPadding.copyWith(bottom: 30),
+                      padding: mediaQuery.padding.copyWith(bottom: 30)),
+                    child: child!),
+                  Positioned(
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    child: Container(height: 30, decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.5)))),
+                ]),
+            );
           },
 
           // We use onGenerateInitialRoutes for the real work of specifying the