fix: Fix mobile responsiveness

Author: tjtanjin

src/components/Themes/ThemeCard.tsx

@@ -1,3 +1,4 @@
+import useIsDesktop from "@/hooks/useIsDesktop";
 import {
   Box,
   Card,
@@ -38,6 +39,8 @@ const ThemeCard: React.FC<{
   // lazy loads translations
   const { t } = useTranslation("components/themes");
 
+  const isDesktop = useIsDesktop();
+
   const handleCheckboxChange = () => {
     onPreview(theme);
   };
@@ -53,7 +56,8 @@ const ThemeCard: React.FC<{
   return (
     <Card
       sx={{
-        height: 500,
+        height: isDesktop ? 500 : 460,
+        width: isDesktop ? "100%" : "85vw",
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
@@ -68,7 +72,7 @@ const ThemeCard: React.FC<{
         image={theme.themeImg}
         alt={theme.name}
         sx={{
-          height: 280,
+          height: isDesktop ? 280 : 240,
           width: "100%",
           objectFit: "cover",
           borderRadius: 5,

src/components/Themes/ThemePreview.tsx

@@ -1,4 +1,5 @@
 import GalleryTooltip from "@/components/GalleryTooltip/GalleryTooltip";
+import useIsDesktop from "@/hooks/useIsDesktop";
 import { Box, Button, Typography } from "@mui/material";
 import { Download, Paintbrush, Trash } from "lucide-react";
 import React, { Dispatch, SetStateAction } from "react";
@@ -23,6 +24,8 @@ const ThemePreview: React.FC<{
   // lazy loads translations
   const { t } = useTranslation("components/themes");
 
+  const isDesktop = useIsDesktop();
+
   const navigate = useNavigate();
 
   const flow = {
@@ -175,7 +178,7 @@ const ThemePreview: React.FC<{
           flow={flow}
           themes={previewIds.map((themeId) => ({ id: themeId }))}
           settings={{ general: { embedded: true } }}
-          styles={{ chatWindowStyle: { height: "54vh", width: "24vw" } }}
+          styles={{ chatWindowStyle: { height: "54vh", width: isDesktop ? "24vw" : "80vw" } }}
         />
       </Box>
 

src/pages/Themes.tsx

@@ -12,6 +12,7 @@ import ThemePreview from "@/components/Themes/ThemePreview";
 import { useAuth } from "@/context/AuthContext";
 import { useGlobalModal } from "@/context/GlobalModalContext";
 import useActionQueue from "@/hooks/useActionQueue";
+import useIsDesktop from "@/hooks/useIsDesktop";
 import { useNotify } from "@/hooks/useNotify";
 import { Theme } from "@/interfaces/Theme";
 import { addThemeToFavorites, fetchThemesFromApi, removeThemeFromFavorites } from "@/services/themes/apiService";
@@ -28,6 +29,7 @@ const Themes: React.FC = () => {
   // lazy load translations
   const { t } = useTranslation("pages/themes");
   const { isLoggedIn } = useAuth();
+  const isDesktop = useIsDesktop();
   const { setPromptLogin, setPromptError } = useGlobalModal();
   const [searchParams, setSearchParams] = useSearchParams();
   const { fetchThemes, isLoading, error } = useFetchThemes();
@@ -273,16 +275,17 @@ const Themes: React.FC = () => {
       {/* Pinned Preview Section (Sticky) */}
       <Box
         sx={{
-          position: "sticky",
+          position: isDesktop ? "sticky" : "fixed",
           top: 0,
-          mt: -72,
+          right: isDesktop ? "auto": 0,
+          mt: isDesktop ? -72 : 0,
           height: "100vh",
           borderLeft: "2px solid",
           borderColor: "divider",
           backgroundColor: "background.paper",
           transition: "width 0.3s ease",
           zIndex: 1000,
-          width: isPreviewVisible ? "30%" : "40px",
+          width: isPreviewVisible ? (isDesktop ? "30%" : "100%") : (isDesktop ? "40px": "0px"),
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-start",
@@ -312,7 +315,7 @@ const Themes: React.FC = () => {
               sx={{
                 position: "absolute",
                 mt: 11,
-                left: "-110px",
+                left: isDesktop ? "-110px" : (isPreviewVisible ? "-20px" : "-130px"),
                 backgroundColor: "background.secondaryBtn",
                 color: "text.primary",
                 borderRadius: "8px",