From 401776bf57e921f7daa79eb992e6793e6564af2e Mon Sep 17 00:00:00 2001
From: matthew <matthew@matthews-MacBook-Pro.local>
Date: Sat, 15 Oct 2022 19:15:55 +0400
Subject: [PATCH] fix favicons

---
 .../core/components/SearchForm/styles.module.css  |  1 +
 .../core/components/WebsiteCard/WebsiteCard.tsx   | 15 +++++++++------
 .../core/components/WebsiteCard/styles.module.css | 11 ++++++++++-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/searching-front/app/core/components/SearchForm/styles.module.css b/searching-front/app/core/components/SearchForm/styles.module.css
index 9e0a180..23863ae 100644
--- a/searching-front/app/core/components/SearchForm/styles.module.css
+++ b/searching-front/app/core/components/SearchForm/styles.module.css
@@ -29,6 +29,7 @@
 }
 
 .input {
+  min-width: 10px;
   outline: none;
   border: none;
   flex: 1;
diff --git a/searching-front/app/core/components/WebsiteCard/WebsiteCard.tsx b/searching-front/app/core/components/WebsiteCard/WebsiteCard.tsx
index 9c818c1..0e6487c 100644
--- a/searching-front/app/core/components/WebsiteCard/WebsiteCard.tsx
+++ b/searching-front/app/core/components/WebsiteCard/WebsiteCard.tsx
@@ -9,12 +9,13 @@ interface Props {
   faviconUrl?: string
 }
 const WebsiteCard = (props: Props) => {
-  const faviconUrl = props.faviconUrl;
+  const faviconUrl = props.faviconUrl
+
   const [faviconLoaded, setFaviconLoaded] = useState(false)
   useEffect(() => {
     if (faviconUrl) {
       const faviconNode = document.createElement("img")
-      faviconNode.src = faviconUrl;
+      faviconNode.src = faviconUrl
       faviconNode.onload = () => {
         setFaviconLoaded(true)
       }
@@ -27,13 +28,15 @@ const WebsiteCard = (props: Props) => {
 
   return (
     <div className={s.root}>
-      {faviconLoaded &&<img className={(s.favicon)} src={faviconUrl} />}
       <a target="_blank" className={s.titleLink} href={url}>
         {props.title}
       </a>
-      <a target="_blank" className={s.miniLink} href={url}>
-        {cleanUrlForUi(props.url)}
-      </a>
+      <div className={s.faviconAndUrlWrapper}>
+        {faviconLoaded && <img className={s.favicon} src={faviconUrl} />}
+        <a target="_blank" className={s.miniLink} href={url}>
+          {cleanUrlForUi(props.url)}
+        </a>
+      </div>
       <div className={s.description}>{props.description}</div>
     </div>
   )
diff --git a/searching-front/app/core/components/WebsiteCard/styles.module.css b/searching-front/app/core/components/WebsiteCard/styles.module.css
index 1467026..834ef24 100644
--- a/searching-front/app/core/components/WebsiteCard/styles.module.css
+++ b/searching-front/app/core/components/WebsiteCard/styles.module.css
@@ -45,8 +45,17 @@
   top: 16px;
 }
 
+.faviconAndUrlWrapper {
+  display: flex;
+  align-items: center;
+}
+
 @media only screen and (max-width: 700px) {
   .favicon {
-    left: -16px;
+    position: static;
+    margin-right: 5px;
+  }
+  .faviconAndUrlWrapper{
+    margin-bottom: 2px;
   }
 }