switch to bottom absolute vs top

Author: R-Sandor

frontend/components/Bookmark/BookmarkCard.tsx

@@ -64,14 +64,14 @@ function OverlayCard({
   return (
     <Card className={style.bookmarkCard}>
       <div className="row g-0">
-        <div className="col-12">
+        <div className="col-6 col-sm-12">
           <Card.Img
             className={`${style.cImg}`}
             src={url + bookmark.screenshotUrl}
             alt="screenshot preview"
           ></Card.Img>
         </div>
-        <div className="col-12">
+        <div className="col-6 col-sm-12">
           <PlainCard
             changeEditMode={changeEditMode}
             bookmark={bookmark}

frontend/components/Bookmark/bookmarkCard.module.scss

@@ -142,6 +142,11 @@
 .cImg {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
+
+  @media screen and (max-width: 700px) {
+    margin-top: 20px;
+    max-height: 150px;
+  }
 }
 
 .bookmarkCard {

frontend/styles/navbar.module.scss

@@ -85,7 +85,7 @@
 
     .searchBar {
       position: absolute;
-      top: calc(100vh - 90px);
+      bottom: -90vh;
       right: 10%;
       width: 80vw;
       z-index: 1;