From 4743c3939f86a7a5ad6da47346c18cab4df795f4 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 6 Jul 2022 15:41:25 +0200
Subject: [PATCH] Switched breakpoint from md to sm

---
 .../sodo-search/src/components/PopupModal.js  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ghost/sodo-search/src/components/PopupModal.js b/ghost/sodo-search/src/components/PopupModal.js
index bedfe15eb2..eda288be4f 100644
--- a/ghost/sodo-search/src/components/PopupModal.js
+++ b/ghost/sodo-search/src/components/PopupModal.js
@@ -131,9 +131,9 @@ function SearchBox() {
         };
     }, [dispatch]);
 
-    let className = 'z-10 relative flex items-center py-5 px-4 md:px-7 mt-10 md:mt-0 bg-white rounded-t-lg shadow';
+    let className = 'z-10 relative flex items-center py-5 px-4 sm:px-7 mt-10 sm:mt-0 bg-white rounded-t-lg shadow';
     if (!searchValue) {
-        className = 'z-10 relative flex items-center py-5 px-4 md:px-7 mt-10 md:mt-0 bg-white rounded-lg';
+        className = 'z-10 relative flex items-center py-5 px-4 sm:px-7 mt-10 sm:mt-0 bg-white rounded-lg';
     }
 
     return (
@@ -151,7 +151,7 @@ function SearchBox() {
                 placeholder='Search posts, tags, authors..'
             />
             <ClearButton />
-            <CloseIcon className='ml-4 text-neutral-300 cursor-pointer w-5 h-5 md:hidden' alt='Close' />
+            <CloseIcon className='ml-4 text-neutral-300 cursor-pointer w-5 h-5 sm:hidden' alt='Close' />
         </div>
     );
 }
@@ -179,7 +179,7 @@ function TagListItem({tag}) {
     const {name, url} = tag;
     return (
         <div
-            className='flex items-center py-3 -mx-4 md:-mx-7 px-4 md:px-7 hover:bg-gray-100 cursor-pointer'
+            className='flex items-center py-3 -mx-4 sm:-mx-7 px-4 sm:px-7 hover:bg-gray-100 cursor-pointer'
             onClick={() => {
                 if (url) {
                     window.location.href = url;
@@ -206,7 +206,7 @@ function TagResults({tags}) {
         );
     });
     return (
-        <div className='border-t border-gray-200 py-3 px-4 md:px-7'>
+        <div className='border-t border-gray-200 py-3 px-4 sm:px-7'>
             <h1 className='uppercase text-xs text-neutral-400 font-semibold mb-1 tracking-wide'>Tags</h1>
             {TagItems}
         </div>
@@ -216,7 +216,7 @@ function TagResults({tags}) {
 function PostListItem({post}) {
     const {title, excerpt, url} = post;
     return (
-        <div className='py-3 -mx-4 md:-mx-7 px-4 md:px-7 hover:bg-neutral-100 cursor-pointer' onClick={() => {
+        <div className='py-3 -mx-4 sm:-mx-7 px-4 sm:px-7 hover:bg-neutral-100 cursor-pointer' onClick={() => {
             if (url) {
                 window.location.href = url;
             }
@@ -249,7 +249,7 @@ function PostResults({posts}) {
         );
     });
     return (
-        <div className='border-t border-neutral-200 py-3 px-4 md:px-7'>
+        <div className='border-t border-neutral-200 py-3 px-4 sm:px-7'>
             <h1 className='uppercase text-xs text-neutral-400 font-semibold mb-1 tracking-wide'>Posts</h1>
             {PostItems}
             <ShowMoreButtom />
@@ -261,7 +261,7 @@ function AuthorListItem({author}) {
     const {name, profile_image: profileImage, url} = author;
     return (
         <div
-            className='py-[1rem] -mx-4 md:-mx-7 px-4 md:px-7 hover:bg-neutral-100 cursor-pointer flex items-center'
+            className='py-[1rem] -mx-4 sm:-mx-7 px-4 sm:px-7 hover:bg-neutral-100 cursor-pointer flex items-center'
             onClick={() => {
                 if (url) {
                     window.location.href = url;
@@ -302,7 +302,7 @@ function AuthorResults({authors}) {
     });
 
     return (
-        <div className='border-t border-neutral-200 py-3 px-4 md:px-7'>
+        <div className='border-t border-neutral-200 py-3 px-4 sm:px-7'>
             <h1 className='uppercase text-xs text-neutral-400 font-semibold mb-1 tracking-wide'>Authors</h1>
             {AuthorItems}
         </div>
@@ -381,7 +381,7 @@ function Search() {
                     }
                 }}
             >
-                <div className='bg-white w-full max-w-[95vw] md:max-w-lg rounded-lg shadow-xl m-auto relative animate-popup'>
+                <div className='bg-white w-full max-w-[95vw] sm:max-w-lg rounded-lg shadow-xl m-auto relative animate-popup'>
                     <SearchBox />
                     <SearchResultBox />
                 </div>