From c6a3be968a199ad4d8f73a6d3d08e4c00d92d141 Mon Sep 17 00:00:00 2001
From: rishighan <rishi.ghan@gmail.com>
Date: Fri, 28 Oct 2022 21:46:16 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Tweaking=20styling=20of=20the=20?=
 =?UTF-8?q?library=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss             | 10 +++++++---
 src/client/components/Library/Library.tsx   |  8 +++++---
 src/client/components/Library/SearchBar.tsx |  4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 2713a11..5719a76 100644
--- a/src/client/assets/scss/App.scss
+++ b/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;
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index fcea57a..7e540df 100644
--- a/src/client/components/Library/Library.tsx
+++ b/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">
diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx
index 0e3d277..3e75712 100644
--- a/src/client/components/Library/SearchBar.tsx
+++ b/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 (