unbreak mobile

Author: R-Sandor

frontend/components/Bookmark/BookmarkCard.tsx

@@ -235,22 +235,40 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
 
   function Content(): ReactNode {
     return bookmark.screenshotUrl ? (
-      <OverlayCard
-        url={imgApi}
-        changeEditMode={changeEditMode}
-        bookmark={bookmark}
-        currentBookmark={currentBookmark}
-        inEditMode={inEditMode}
-        edit={edit}
-      />
+      <div>
+        <OverlayCard
+          url={imgApi}
+          changeEditMode={changeEditMode}
+          bookmark={bookmark}
+          currentBookmark={currentBookmark}
+          inEditMode={inEditMode}
+          edit={edit}
+        />
+        <div
+          style={{
+            marginBottom: "2px",
+            marginLeft: "15px",
+            marginTop: "0px",
+            textAlign: "justify",
+          }}
+        >
+          {window.innerWidth < 768 ? (
+            <a target="_blank" href={bookmark.url}>
+              {bookmark.url}
+            </a>
+          ) : null}
+        </div>
+      </div>
     ) : (
-      <PlainCard
-        changeEditMode={changeEditMode}
-        bookmark={bookmark}
-        currentBookmark={currentBookmark}
-        inEditMode={inEditMode}
-        edit={edit}
-      ></PlainCard>
+      <div>
+        <PlainCard
+          changeEditMode={changeEditMode}
+          bookmark={bookmark}
+          currentBookmark={currentBookmark}
+          inEditMode={inEditMode}
+          edit={edit}
+        ></PlainCard>
+      </div>
     );
   }
 

frontend/components/Bookmark/CardBody.tsx

@@ -23,15 +23,9 @@ export default function CardBody({
 }: Readonly<CardBodyProp>) {
   const [isScrapable, setIsScrapable] = useState(bookmark.scrapable);
 
-  const handleClick = () => {
-    const isMobile = window.innerWidth < 768;
-    if (isMobile) {
-      window.open(bookmark.url);
-    }
-  };
   return (
     <Card.Body className={``}>
-      <Card.Title className={`${style.cTitle}`} onClick={handleClick}>
+      <Card.Title className={`${style.cTitle}`}>
         {inEditMode ? (
           <EditableField
             fieldValue={bookmark.title}
@@ -68,13 +62,11 @@ export default function CardBody({
             />
           </div>
         </div>
-      ) : (
-        <ScreenSizeProvider>
-          <Card.Link target="_blank" href={bookmark.url}>
-            {bookmark.url}
-          </Card.Link>
-        </ScreenSizeProvider>
-      )}
+      ) : bookmark.screenshotUrl == null ? (
+        <Card.Link target="_blank" href={bookmark.url}>
+          {bookmark.url}
+        </Card.Link>
+      ) : null}
       {highlight ? (
         <div>
           <hr />

frontend/components/Logo.js

@@ -71,7 +71,7 @@ const GlobalNavbar: React.FC = () => {
             width="38"
             height="30"
             className="d-inline-block align-top"
-            alt="Find First logo"
+            alt="findFirst logo"
           />
           FindFirst
         </Navbar.Brand>

frontend/components/Navbar/Navbar.tsx

@@ -96,12 +96,6 @@
         -0.2em 0em 0.2em #29b5bf;
     }
 
-    .searchBar:active {
-      position: fixed;
-      background: red !important;
-      bottom: 50%;
-    }
-
     .navBtns {
       order: 3;
       margin-left: 0 !important;