fix: mobile styles

showcase.json

@@ -100,5 +100,6 @@
   "revery",
   "hsinyau",
   "rootless",
-  "haydenull"
+  "haydenull",
+  "walk2future"
 ]

src/components/dashboard/DashboardMain.tsx

@@ -15,7 +15,7 @@ export const DashboardMain: React.FC<{
         className={cn(
           fullWidth
             ? "relative"
-            : "max-w-screen-2xl relative px-5 py-5 md:px-10",
+            : "max-w-screen-2xl min-w-[270px] relative px-5 py-5 md:px-10",
           className,
         )}
       >

src/components/site/SiteHeader.tsx

@@ -19,7 +19,7 @@ import { useState, useRef, useEffect, RefObject } from "react"
 import chroma from "chroma-js"
 import { Menu } from "~/components/ui/Menu"
 import { useTranslation } from "next-i18next"
-import { HeartIcon } from "@heroicons/react/24/solid"
+import { useMediaQuery } from "~/hooks/useMediaQuery"
 
 type HeaderLinkType = {
   icon?: React.ReactNode
@@ -55,6 +55,7 @@ export const SiteHeader: React.FC<{
   site?: Profile | undefined | null
 }> = ({ site }) => {
   const { t } = useTranslation("site")
+  const isSm = useMediaQuery("(min-width: 640px)")
   const leftLinks: HeaderLinkType[] = site?.navigation?.find(
     (nav) => nav.url === "/",
   )
@@ -203,17 +204,17 @@ export const SiteHeader: React.FC<{
               <Avatar
                 className="xlog-site-icon"
                 images={[getUserContentsUrl(site?.avatars?.[0])]}
-                size={120}
+                size={isSm ? 120 : 80}
                 name={site?.name}
                 imageRef={avatarRef}
               />
             )}
-            <div className="flex-1">
+            <div className="flex-1 min-w-0">
               <div className="flex items-center justify-between">
-                <div className="xlog-site-name text-3xl font-bold text-zinc-900 leading-snug">
+                <div className="xlog-site-name text-2xl sm:text-3xl font-bold text-zinc-900 leading-snug break-words min-w-0">
                   {site?.name}
                 </div>
-                <div className="ml-8 space-x-6 flex items-center">
+                <div className="ml-4 sm:ml-8 space-x-3 sm:space-x-6 flex items-center">
                   <div className="xlog-site-more-menu relative inline-block align-middle">
                     <Menu
                       target={
@@ -245,7 +246,7 @@ export const SiteHeader: React.FC<{
                       }
                     />
                   </div>
-                  <div className="xlog-site-more-out">
+                  <div className="xlog-site-more-out hidden sm:block">
                     {moreMenuItems.map((item) => {
                       if (item.out) {
                         return (
@@ -273,7 +274,7 @@ export const SiteHeader: React.FC<{
               </div>
               {site?.bio && (
                 <div
-                  className="xlog-site-description text-gray-500 leading-snug my-3"
+                  className="xlog-site-description text-gray-500 leading-snug my-2 sm:my-3 text-sm sm:text-base"
                   dangerouslySetInnerHTML={{ __html: site?.description || "" }}
                 ></div>
               )}

src/hooks/useMediaQuery.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react"
+
+export function useMediaQuery(query: string): boolean {
+  const getMatches = (query: string): boolean => {
+    // Prevents SSR issues
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches
+    }
+    return false
+  }
+
+  const [matches, setMatches] = useState<boolean>(getMatches(query))
+
+  function handleChange() {
+    setMatches(getMatches(query))
+  }
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query)
+
+    // Triggered at the first client-side load and if query changes
+    handleChange()
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange)
+    } else {
+      matchMedia.addEventListener("change", handleChange)
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange)
+      } else {
+        matchMedia.removeEventListener("change", handleChange)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  return matches
+}

src/pages/dashboard/[subdomain]/events.tsx

@@ -79,7 +79,7 @@ export default function EventsPage() {
   return (
     <DashboardMain title="Events">
       <div className="min-w-[270px] flex flex-col xl:flex-row space-y-8 xl:space-y-0">
-        <div className="grid gap-4 grid-cols-2 sm:grid-cols-4">
+        <div className="grid gap-4 grid-cols-1 sm:grid-cols-4">
           {pages.data?.pages[0]?.list.map((item) => {
             let status
             if (item.metadata?.frontMatter?.EndTime < new Date()) {