fix: increase hide-on-mobile width breakpoint

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/App.css

@@ -73,7 +73,7 @@
   animation-name: bounce;
 }
 
-@media (max-width: 480px) {
+@media (max-width: 550px) {
   .hide-on-mobile {
     display: none;
   }

src/components/Home.jsx

@@ -173,16 +173,20 @@ function Home() {
             direction={{ xs: 'column', md: 'row' }}
             sx={{ width: '100%', paddingTop: '1rem' }}
           >
-            <Typography variant="h4" align="left" className={classes.sectionTitle}>
-              Recently updated images
-            </Typography>
-            <Typography
-              variant="body2"
-              className={classes.viewAll}
-              onClick={() => handleClickViewAll(sortByCriteria.updateTime.value)}
-            >
-              View all
-            </Typography>
+            <div>
+              <Typography variant="h4" align="left" className={classes.sectionTitle}>
+                Recently updated images
+              </Typography>
+            </div>
+            <div>
+              <Typography
+                variant="body2"
+                className={classes.viewAll}
+                onClick={() => handleClickViewAll(sortByCriteria.updateTime.value)}
+              >
+                View all
+              </Typography>
+            </div>
           </Stack>
           {renderRecentlyUpdated()}
         </Stack>

src/components/SearchSuggestion.jsx

@@ -42,8 +42,8 @@ const useStyles = makeStyles(() => ({
   },
   resultsWrapper: {
     margin: '0',
-    marginTop: '-2%',
-    paddingTop: '3%',
+    marginTop: '-5%',
+    paddingTop: '5%',
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',