Enhancement: auto-hide the search bar on mobile (#12404)

src-ui/src/app/components/app-frame/app-frame.component.spec.ts

@@ -293,6 +293,59 @@ describe('AppFrameComponent', () => {
     expect(component.isMenuCollapsed).toBeTruthy()
   })
 
+  it('should hide mobile search when scrolling down and show it when scrolling up', () => {
+    Object.defineProperty(globalThis, 'innerWidth', {
+      value: 767,
+    })
+
+    component.ngOnInit()
+
+    Object.defineProperty(globalThis, 'scrollY', {
+      configurable: true,
+      value: 40,
+    })
+    component.onWindowScroll()
+    expect(component.mobileSearchHidden).toBe(true)
+
+    Object.defineProperty(globalThis, 'scrollY', {
+      configurable: true,
+      value: 0,
+    })
+    component.onWindowScroll()
+    expect(component.mobileSearchHidden).toBe(false)
+  })
+
+  it('should keep mobile search visible on desktop scroll or resize', () => {
+    Object.defineProperty(globalThis, 'innerWidth', {
+      value: 1024,
+    })
+    component.ngOnInit()
+    component.mobileSearchHidden = true
+
+    component.onWindowScroll()
+
+    expect(component.mobileSearchHidden).toBe(false)
+
+    component.mobileSearchHidden = true
+    component.onWindowResize()
+  })
+
+  it('should keep mobile search visible while the mobile menu is expanded', () => {
+    Object.defineProperty(globalThis, 'innerWidth', {
+      value: 767,
+    })
+    component.ngOnInit()
+    component.isMenuCollapsed = false
+
+    Object.defineProperty(globalThis, 'scrollY', {
+      configurable: true,
+      value: 40,
+    })
+    component.onWindowScroll()
+
+    expect(component.mobileSearchHidden).toBe(false)
+  })
+
   it('should support close document & navigate on close current doc', () => {
     const closeSpy = jest.spyOn(openDocumentsService, 'closeDocument')
     closeSpy.mockReturnValue(of(true))