Tweak responsiveness

Signed-off-by: Andrés Vidal <andres@wyeworks.com>
wyeworks · Jun 5, 2024 · ec8b66f · ec8b66f
1 parent 0342d45
commit ec8b66f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/frontend/components/Layout.tsx b/frontend/components/Layout.tsx
@@ -32,36 +32,40 @@ const Layout: FC<Props> = ({
           <title>{title}</title>
         </Head>
       )}
-      <div className="flex flex-col h-full px-1 sm:px-8 overflow-x-clip">
-        <header className="sticky top-0 z-20 bg-gray-100 sm:pb-6">
+      <div className="flex flex-col h-full px-1 md:px-8 overflow-x-clip">
+        <header className="sticky top-0 z-20 bg-gray-100 md:pb-6">
           <h1 className="select-none py-1.5 -mx-8 text-center text-white bg-indigo-600 flex items-center justify-center">
-            <div className="flex flex-col items-center justify-center flex-shrink transition-colors sm:flex-row sm:gap-4 shadow-white">
+            <div className="flex flex-col items-center justify-center flex-shrink transition-colors md:flex-row md:gap-4 shadow-white">
               <Link
                 href="/"
                 className="px-3 py-0.5 rounded hover:bg-indigo-500"
               >
-                <span className="inline-flex items-center gap-3 py-1 pr-5 text-lg font-medium sm:pr-0">
+                <span className="inline-flex items-center gap-3 py-1 pr-5 text-lg font-medium md:pr-0">
                   <Logo className="h-8" />
                   {HEADING_TEXT}
                 </span>
               </Link>
-              <hr className="w-0.5 mr-2 h-8 bg-current border-none hidden sm:block" />
+              <hr className="w-0.5 mr-2 h-8 bg-current border-none hidden md:block" />
               <div className="inline text-base">{SUBHEADING_TEXT}</div>
-              <hr className="w-0.5 h-8 mx-2 bg-current border-none hidden sm:block" />
-              <Anchor query={`${LEARN_MORE_MODAL_KEY}=true`}>Learn More</Anchor>
-              <Dot className="size-1" />
-              <Anchor query={`${CONTACT_MODAL_KEY}=true`}>Contact Us</Anchor>
+              <hr className="w-0.5 h-8 mx-2 bg-current border-none hidden md:block" />
+              <div className="flex items-center gap-2 mt-2 md:contents md:mt-0">
+                <Anchor query={`${LEARN_MORE_MODAL_KEY}=true`}>
+                  Learn More
+                </Anchor>
+                <Dot className="size-1" />
+                <Anchor query={`${CONTACT_MODAL_KEY}=true`}>Contact Us</Anchor>
+              </div>
             </div>
           </h1>
           {subheader}
         </header>
-        <div className="flex flex-col h-full gap-2 sm:flex-row overflow-clip">
+        <div className="flex flex-col h-full gap-2 md:flex-row overflow-clip">
           {leftAside && <aside>{leftAside}</aside>}
           <main className="relative pb-4 overflow-y-auto overflow-x-clip grow scrollbar-thin scrollbar-thumb-indigo-600">
             {content}
           </main>
         </div>
-        <footer className="sticky bottom-0 py-1 bg-gray-100 sm:py-4">
+        <footer className="sticky bottom-0 py-1 bg-gray-100 md:py-4">
           {footer}
         </footer>
       </div>

diff --git a/frontend/components/PublicationIndexList.tsx b/frontend/components/PublicationIndexList.tsx
@@ -8,7 +8,7 @@ const PublicationItem: FC<{ id: number }> = ({ id }) => {
 
   return (
     publication && (
-      <div className="flex justify-between mr-1 rounded-lg shadow overflow-clip">
+      <div className="flex justify-between mr-1 border border-gray-200 rounded-lg overflow-clip">
         <div className="p-2 space-y-4">
           <div>
             <span className="font-normal">{publication.title}</span>

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -71,7 +71,9 @@ const Home: NextPage = () => {
             </span>
             <span className="border-b grow h-fit" />
           </div>
-          <PublicationSearch />
+          <div className="pr-3 md:pr-0">
+            <PublicationSearch />
+          </div>
         </div>
       }
       footer={