style: center and enlarge modals to overlay navbar

src/styles.js

@@ -400,20 +400,23 @@ export const styles = StyleSheet.create({
   modalBackdrop: {
     flex: 1,
     backgroundColor: 'rgba(2,6,23,0.72)',
-    justifyContent: 'flex-end',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 12,
   },
   modalKeyboardWrap: {
     width: '100%',
+    alignItems: 'center',
   },
   modalCard: {
-    maxHeight: '87%',
+    width: '96%',
+    maxHeight: '92%',
     backgroundColor: '#0f172a',
-    borderTopLeftRadius: 18,
-    borderTopRightRadius: 18,
+    borderRadius: 20,
     borderWidth: 1,
     borderColor: '#1e293b',
-    padding: 14,
-    gap: 8,
+    padding: 16,
+    gap: 10,
   },
   closeText: {
     color: '#93c5fd',