perf: improve responsiveness

src/app.tsx

@@ -17,13 +17,14 @@ import SubplebbitStats from './components/subplebbit-stats';
 import PostForm from './components/post-form';
 
 const App = () => {
-  const [theme] = useTheme();
   const location = useLocation();
   const isInHomeView = isHomeView(location.pathname);
 
   const subplebbitAddresses = useDefaultSubplebbitAddresses();
   const { subplebbits } = useSubplebbits({ subplebbitAddresses });
 
+  // add theme className to body so it can set the correct body background in index.css
+  const [theme] = useTheme();
   useEffect(() => {
     document.body.classList.forEach((className) => document.body.classList.remove(className));
     document.body.classList.add(theme);

src/components/embed/embed.module.css

@@ -3,7 +3,7 @@
   width: 700px !important;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .audioEmbed {
     max-height: 250px !important;
     width: 100% !important;
@@ -15,7 +15,7 @@
   width: 360px !important;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .instagramEmbed {
     max-height: 420px !important;
     width: 100% !important;
@@ -27,7 +27,7 @@
   height: 520px !important;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .redditEmbed {
     width: 100% !important;
     height: 520px !important;
@@ -39,7 +39,7 @@
   height: 780px !important;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .tiktokEmbed {
     width: 100% !important;
     height: 70vh !important;
@@ -51,7 +51,7 @@
   width: 800px !important;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .videoEmbed {
     max-height: 250px !important;
     width: 100% !important;
@@ -62,7 +62,7 @@
   height: 580px !important;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .xEmbed {
     width: 100% !important;
     height: 50vh !important;

src/components/post-form/post-form.module.css

@@ -25,7 +25,7 @@
   }
 }
 
-@media (min-width: 641px) {
+@media (min-width: 640px) {
   .postFormButtonMobile {
     display: none;
   }

src/components/post/post.module.css

@@ -384,7 +384,7 @@
   }
 }
 
-@media (min-width: 641px) {
+@media (min-width: 640px) {
   .postMobile {
     display: none;
   }

src/components/post/post.tsx

@@ -8,6 +8,7 @@ import { getFormattedDate } from '../../lib/utils/time-utils';
 import { isPostPageView } from '../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useReplies from '../../hooks/use-replies';
+import useWindowWidth from '../../hooks/use-window-width';
 import styles from './post.module.css';
 import Markdown from '../markdown';
 import CommentMedia from '../comment-media';
@@ -417,11 +418,15 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
 
 const Post = ({ post, showAllReplies = false }: PostProps) => {
   const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
+  const isMobile = useWindowWidth() < 640;
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
-        <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
-        <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
+        {isMobile ? (
+          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
+        ) : (
+          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} />
+        )}
       </div>
     </div>
   );

src/hooks/use-window-width.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+const useWindowWidth = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowWidth;
+};
+
+export default useWindowWidth;

src/views/subplebbit/subplebbit.module.css

@@ -2,7 +2,7 @@
   padding-top: 10px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .footer {
     padding-left: 5px;
   }