fix style issue on mobile

Author: tyrelchambers

src/components/ChangelogFilters/ChangelogFilters.tsx

@@ -2,6 +2,8 @@ import styles from "./styles.module.css"
 import type { ChangelogItem } from "~/components/ChangelogSnippet/types.ts"
 import { DesktopFilters } from "./DesktopFilters.tsx"
 import { MobileFilters } from "./MobileFilters.tsx"
+import { useState } from "react"
+import { clsx } from "~/lib/clsx/clsx.ts"
 
 export interface ChangelogFiltersProps {
   products: string[]
@@ -11,13 +13,22 @@ export interface ChangelogFiltersProps {
 }
 
 export const ChangelogFilters = ({ products, networks, types, items }: ChangelogFiltersProps) => {
+  const [searchExpanded, setSearchExpanded] = useState(false)
+
   return (
-    <div className={styles.wrapper}>
+    <div className={clsx(styles.wrapper, searchExpanded && styles.searchExpanded)}>
       <div className={styles.desktopFilters}>
         <DesktopFilters products={products} networks={networks} types={types} items={items} />
       </div>
       <div className={styles.mobileFilters}>
-        <MobileFilters products={products} networks={networks} types={types} items={items} />
+        <MobileFilters
+          products={products}
+          networks={networks}
+          types={types}
+          items={items}
+          searchExpanded={searchExpanded}
+          onSearchExpandedChange={setSearchExpanded}
+        />
       </div>
     </div>
   )

src/components/ChangelogFilters/MobileFilters.tsx

@@ -252,20 +252,27 @@ interface MobileFiltersProps {
   networks: string[]
   types: string[]
   items: ChangelogItem[]
+  searchExpanded: boolean
+  onSearchExpandedChange: (expanded: boolean) => void
 }
 
-export const MobileFilters = ({ products, networks, types, items }: MobileFiltersProps) => {
+export const MobileFilters = ({
+  products,
+  networks,
+  types,
+  items,
+  searchExpanded,
+  onSearchExpandedChange,
+}: MobileFiltersProps) => {
   const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false)
   const [expandedSection, setExpandedSection] = useState<FilterType>(null)
 
   const {
-    searchExpanded,
     searchTerm,
     selectedProducts,
     selectedNetworks,
     selectedTypes,
     handleSearchChange,
-    handleSearchToggle,
     toggleSelection,
     clearProductFilters,
     clearNetworkFilters,
@@ -314,11 +321,11 @@ export const MobileFilters = ({ products, networks, types, items }: MobileFilter
 
   return (
     <>
-      <div className={styles.content}>
+      <div className={clsx(styles.content, searchExpanded && styles.searchExpanded)}>
         <MobileFiltersButton totalCount={totalFilterCount} onClick={() => setIsMobileFiltersOpen(true)} />
         <SearchInput
           isExpanded={searchExpanded}
-          onClick={handleSearchToggle}
+          onClick={onSearchExpandedChange}
           value={searchTerm}
           onChange={handleSearchChange}
         />

src/components/ChangelogFilters/styles.module.css

@@ -376,19 +376,38 @@
 
   .mobileFilters {
     display: block;
+    width: 100%;
   }
 
   .wrapper {
-    min-width: auto;
     max-width: calc(100% - var(--space-4x));
     padding: var(--space-2x);
+    min-width: unset;
+  }
+
+  .wrapper.searchExpanded {
+    width: 100%;
+    max-width: 100%;
   }
 
   .content {
     grid-template-columns: auto 1fr;
     gap: var(--space-2x);
   }
 
+  /* When search is expanded on mobile, keep both elements inline */
+  .content.searchExpanded {
+    grid-template-columns: auto 1fr;
+    gap: var(--space-3x);
+    width: 100%;
+  }
+
+  /* Override desktop expanded behavior for mobile */
+  .searchInputWrapper.expanded {
+    width: auto;
+    grid-column-end: auto;
+  }
+
   .searchInputWrapper {
     padding: var(--space-2x);
   }