Slightly better ui fixes

src/components/MessageBox.tsx

@@ -19,6 +19,7 @@ import { UserProfile } from "@/hooks/get-user";
 import axios from "axios";
 import ProfilePicture from "./ProfilePicture";
 import App from "@/types/app";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 function MessageContainer({ message, app }: { message: Message; app: App }) {
   useEffect(() => {
@@ -41,14 +42,14 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
           url={app.profiles[message.from]?.avatar_url}
           name={String(
             app.profiles[message.from]
-              ? app.profiles[message.from].display_name
+              ? app.profiles[message.from]?.display_name
               : message.from
           )}
         />
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
             {app.profiles[message.from]
-              ? app.profiles[message.from].display_name
+              ? app.profiles[message.from]?.display_name
               : message.from}
 
             <p className="text-neutral-500 text-xs">
@@ -142,13 +143,14 @@ export default function MessageBox({
   messages: Message[];
 }) {
   const [text, setText] = useState("");
+  const isMobile = useIsMobile();
 
   return (
     <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5">
       {channelName && (
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
           <span
-            onClick={() => app.setSidebarOpen(true)}
+            onClick={() => isMobile && app.setSidebarOpen(true)}
             className="cursor-pointer flex"
           >
             <ChevronLeftIcon className="w-5 h-5" />

src/components/ProfilePicture.tsx

@@ -5,7 +5,7 @@ export default function ProfilePicture({
   url,
 }: {
   name: string;
-  url: string;
+  url: string | undefined;
 }) {
   return (
     <Avatar className="h-8 w-8">

src/components/Sidebar.tsx

@@ -269,7 +269,7 @@ export default function AppSidebar({
           className="w-full h-full overflow-x-hidden"
           onClick={() => app.setSidebarOpen(false)}
         >
-          <div className="overflow-x-hidden min-w-max flex-shrink-0">
+          <div className="overflow-x-hidden min-w-screen flex-shrink-0">
             {children}
           </div>
         </div>

src/hooks/is-mobile.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 767px)");
+    const handleChange = () => setIsMobile(mediaQuery.matches);
+
+    // Set initial value
+    handleChange();
+
+    // Listen for changes
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return isMobile;
+}

src/hooks/use-app.ts

@@ -8,7 +8,7 @@ export default function useApp(): App {
   const node = useRef<WebSocket | null>(null);
   const [profiles, setProfiles] = useState<StringMap<UserProfile | null>>({});
   const { messages, addMessage } = useMessages();
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const profile = useUser();
 
   return {