🎨 Tweaking styling of the library table

src/client/assets/scss/App.scss

@@ -413,17 +413,21 @@ pre {
 .sticky {
   background: #fffffc;
   position: sticky;
-  top: 107px;
+  top: 40px;
   z-index: 5;
 
   .title {
     background: #fffffc;
     position: relative;
-    top: -56px;
+    top: 0px;
     z-index: 99999;
     padding-top: 20px;
   }
 }
+.header-area {
+  width: 100%;
+  padding: 10px 0 15px 0;
+}
 
 .library {
   table {
@@ -431,7 +435,7 @@ pre {
     width: 100%;
     thead {
       position: sticky;
-      top: 176px;
+      top: 216px;
       z-index: 1;
       background: #fffffc;
       min-height: 130px;

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>
+        <div className="header-area sticky">
-        {/* Search bar */}
+          <h1 className="title">Library</h1>
-        <SearchBar />
+          {/* 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 (