test fixes

Author: isstuev

toolkit/theme/recipes/drawer.recipe.ts

@@ -54,12 +54,12 @@ export const recipe = defineSlotRecipe({
     },
     header: {
       flex: 0,
-      px: '5',
-      pt: '5',
-      pb: '3',
+      px: '6',
+      pt: '6',
+      pb: '4',
     },
     body: {
-      p: '5',
+      p: '6',
       flex: '1',
       overflow: 'auto',
     },
@@ -68,7 +68,7 @@ export const recipe = defineSlotRecipe({
       alignItems: 'center',
       justifyContent: 'flex-end',
       gap: '3',
-      px: '5',
+      px: '6',
       pt: '2',
       pb: '4',
     },
@@ -147,6 +147,17 @@ export const recipe = defineSlotRecipe({
         positioner: {
           alignItems: 'flex-end',
         },
+        header: {
+          px: '5',
+          pt: '5',
+          pb: '3',
+        },
+        body: {
+          p: '5',
+        },
+        footer: {
+          px: '5',
+        },
         content: {
           maxW: '100%',
           _open: { animationName: 'slide-from-bottom-full, fade-in' },

ui/pages/SearchResults.pw.tsx

@@ -9,8 +9,42 @@ import { test, expect } from 'playwright/lib';
 import SearchResults from './SearchResults';
 
 async function resetScroll(page: Page) {
-  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+  // Scroll to top and ensure we stay there
   await page.evaluate(() => window.scrollTo(0, 0));
+
+  // Wait for sticky headers to be in their default (hidden) state
+  // Check for ActionBar - it should not be visible when at top
+  await page.waitForFunction(() => {
+    const actionBar = document.querySelector('[data-testid="action-bar"]') ||
+                     document.querySelector('[class*="ActionBar"]') ||
+                     document.querySelector('[class*="action-bar"]');
+    if (actionBar) {
+      const rect = actionBar.getBoundingClientRect();
+      // ActionBar should be in its default position (not sticky) when at top
+      return rect.top > 0;
+    }
+    return true; // If no ActionBar found, consider it "hidden"
+  }, { timeout: 500 });
+
+  // Check for TableHeaderSticky - it should not be stuck when at top
+  await page.waitForFunction(() => {
+    const stickyHeaders = document.querySelectorAll('[class*="TableHeaderSticky"]');
+    if (stickyHeaders.length > 0) {
+      return Array.from(stickyHeaders).every(header => {
+        const rect = header.getBoundingClientRect();
+        // Sticky headers should be in their default position when at top
+        return rect.top > 0;
+      });
+    }
+    return true; // If no sticky headers found, consider them "hidden"
+  }, { timeout: 500 });
+
+  // Double-check we're at the top
+  await page.evaluate(() => {
+    if (window.scrollY !== 0) {
+      window.scrollTo(0, 0);
+    }
+  });
 }
 
 test.describe('search by name', () => {

ui/pages/SearchResults.tsx

@@ -246,7 +246,7 @@ const SearchResultsPageContent = () => {
 
   return (
     <>
-      <HeaderMobile/>
+      <HeaderMobile hideSearchButton/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn>

ui/snippets/searchBar/SearchBarInput.tsx

@@ -113,7 +113,7 @@ const SearchBarInput = (
       onBlur={ onBlur }
       onClick={ onFormClick }
       w="100%"
-      backgroundColor={ isHeroBanner ? { _light: 'white', _dark: 'black' } : 'transparent' }
+      backgroundColor={{ base: isHeroBanner ? { _light: 'white', _dark: 'black' } : 'transparent', lg: { _light: 'white', _dark: 'black' } }}
       borderRadius="base"
       position="relative"
       zIndex={ isSuggestOpen ? 'modal' : 'auto' }