Core: Fix the overlapping search icon and spacing in the course card view (#2087)

* Core: Stop the search icon from overlapping the course search placeholder

Every remote injects its own full Tailwind build through style-loader, and
those styles land after the core styles. The remotes never use pl-9, so their
.px-3 wins over it and the placeholder falls back under the icon.

* Core: Align the course card view with the surrounding page layout

The card view wrapped itself in a centered container with its own vertical
padding, which pushed the search field away from the page header and kept the
grid narrower than the table view of the same page.

Author: rappm

clients/core/src/managementConsole/shared/components/CourseCard/CourseCards.tsx

@@ -21,16 +21,17 @@ export const CourseCards = ({ courses }: CourseCardsProps) => {
   }, [courses, query])
 
   return (
-    <div className='container mx-auto px-4 py-8'>
-      <div className='relative mb-8 max-w-md'>
+    <div className='flex flex-col gap-6'>
+      <div className='relative max-w-md'>
         <Search className='pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground' />
+        {/* Remotes ship their own Tailwind build, so an unprefixed pl-9 loses to their .px-3 */}
         <Input
           type='search'
           aria-label='Search courses'
           placeholder='Search courses...'
           value={search}
           onChange={(event) => setSearch(event.target.value)}
-          className='pl-9'
+          className='pl-9!'
         />
       </div>