fix favicons

searching-front/app/core/components/SearchForm/styles.module.css

@@ -29,6 +29,7 @@
 }
 
 .input {
+  min-width: 10px;
   outline: none;
   border: none;
   flex: 1;

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>
   )

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;
   }
 }