Add safe-area-top to sticky headers

- Update STICKY_HEADER_CLASS constant to include safe-area-top
- Fixes sticky tabs in Search and Settings pages on mobile
- Ensures sticky headers respect device notches and status bars
- Feed and NotificationsPage already use top-mobile-bar which includes safe area

android/app/capacitor.build.gradle

@@ -9,7 +9,8 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
+    implementation project(':capacitor-app')
+    implementation project(':capacitor-status-bar')
 
 }
 

android/capacitor.settings.gradle

@@ -1,3 +1,9 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

src/lib/utils.ts

@@ -8,5 +8,6 @@ export function cn(...inputs: ClassValue[]) {
 /**
  * Sticky header class for pages inside MainLayout.
  * Headers stick to the top of the viewport on all screen sizes.
+ * Includes safe-area-top for mobile devices with notches/status bars.
  */
-export const STICKY_HEADER_CLASS = 'sticky top-0';
+export const STICKY_HEADER_CLASS = 'sticky top-0 safe-area-top';