🎨 Tweaking styling of the library table

src/client/components/Library/Library.tsx

@@ -277,9 +277,11 @@ export const Library = (): ReactElement => {
   return (
     <section className="container">
       <div className="section">
-        <div className="sticky"><h1 className="title">Library</h1></div>
-        {/* Search bar */}
-        <SearchBar />
+        <div className="header-area sticky">
+          <h1 className="title">Library</h1>
+          {/* Search bar */}
+          <SearchBar />
+        </div>
         {!isUndefined(searchResults.hits) && (
           <div>
             <div className="library">

src/client/components/Library/SearchBar.tsx

@@ -26,14 +26,14 @@ export const SearchBar = (): ReactElement => {
     );
   }, []);
   return (
-    <div className="sticky">
+    <div className="sticky box column is-half">
       <Form
         onSubmit={handleSubmit}
         initialValues={{}}
         render={({ handleSubmit, form, submitting, pristine, values }) => (
           <form onSubmit={handleSubmit}>
             <div className="field is-grouped">
-              <div className="control search">
+              <div className="control search is-expanded">
                 <Field name="search">
                   {({ input, meta }) => {
                     return (