Fix the search bar

frontend/src/pages/chat/css/left-panel.module.scss

@@ -108,6 +108,7 @@
             padding: 32px;
             color: $color-dark-on-surface-variant;
             text-align: center;
+            overflow: hidden;
         }
 
         // Custom styling for search result images

frontend/src/pages/chat/ui/left/ChatHeader.tsx

@@ -7,7 +7,7 @@ import { MinimizedCallBar } from "@/pages/chat/ui/right/calls/MinimizedCallBar";
 import styles from "@/pages/chat/css/left-panel.module.scss";
 import logoIcon from "@/images/logo.svg";
 
-export function ChatHeader() {
+export function ChatHeader({ headerRef }: { headerRef?: React.RefObject<HTMLElement | null> }) {
     const { profileData } = useProfile();
     const { setProfileDialog, user } = useAppState();
     const [profilePictureUrl, setProfilePictureUrl] = useState(profileData?.profile_picture || defaultAvatar);
@@ -27,7 +27,7 @@ export function ChatHeader() {
 
     return (
         <>
-            <header className={styles.chatHeaderLeft}>
+            <header className={styles.chatHeaderLeft} ref={headerRef}>
                 <img src={logoIcon} alt="Logo" className={styles.logo} />
                 <div className={styles.productName}>{PRODUCT_NAME}</div>
                 <div className={styles.profile}>

frontend/src/pages/chat/ui/left/LeftPanel.tsx

@@ -1,19 +1,19 @@
 import { useAppState } from "@/pages/chat/state";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { SettingsDialog } from "./settings/SettingsDialog";
 import { UsernameSearch } from "./UsernameSearch";
 import { UnifiedChatsList } from "./UnifiedChatsList";
 import { ChatHeader } from "./ChatHeader";
-import { MaterialBottomAppBar, MaterialFab, MaterialIconButton } from "@/utils/material";
+import { MaterialBottomAppBar, MaterialFab, MaterialIconButton, type MDUIBottomAppBar } from "@/utils/material";
 import styles from "@/pages/chat/css/left-panel.module.scss";
 
-function BottomAppBar() {
+function BottomAppBar({ bottomAppBarRef }: { bottomAppBarRef?: React.RefObject<MDUIBottomAppBar | null> }) {
     const [settingsOpen, onSettingsOpenChange] = useState(false);
     const { logout } = useAppState();
 
     return (
         <>
-            <MaterialBottomAppBar>
+            <MaterialBottomAppBar ref={bottomAppBarRef}>
                 <MaterialIconButton icon="settings--filled" id="settings-open" onClick={() => onSettingsOpenChange(true)} />
                 <div style={{ flexGrow: 1 }} />
                 <MaterialIconButton
@@ -29,14 +29,18 @@ function BottomAppBar() {
 }
 
 export function LeftPanel() {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const headerRef = useRef<HTMLElement>(null);
+    const bottomAppBarRef = useRef<MDUIBottomAppBar>(null);
+    
     return (
-        <div className={styles.chatList}>
-            <ChatHeader />
+        <div className={styles.chatList} ref={containerRef}>
+            <ChatHeader headerRef={headerRef} />
             <div className={styles.searchContainer}>
-                <UsernameSearch />
+                <UsernameSearch containerRef={containerRef} headerRef={headerRef} bottomAppBarRef={bottomAppBarRef} />
             </div>
             <UnifiedChatsList />
-            <BottomAppBar />
+            <BottomAppBar bottomAppBarRef={bottomAppBarRef} />
         </div>
     );
 }

frontend/src/pages/chat/ui/left/UsernameSearch.tsx

@@ -8,7 +8,7 @@ import { OnlineIndicator } from "@/pages/chat/ui/right/OnlineIndicator";
 import { OnlineStatus } from "@/pages/chat/ui/right/OnlineStatus";
 import defaultAvatar from "@/images/default-avatar.png";
 import SearchBar from "@/core/components/SearchBar";
-import { MaterialCircularProgress, MaterialIconButton, MaterialList, MaterialListItem } from "@/utils/material";
+import { MaterialCircularProgress, MaterialIconButton, MaterialList, MaterialListItem, type MDUIBottomAppBar } from "@/utils/material";
 import styles from "@/pages/chat/css/left-panel.module.scss";
 
 interface SearchUser extends User {
@@ -16,7 +16,13 @@ interface SearchUser extends User {
     verified?: boolean;
 }
 
-export function UsernameSearch() {
+export interface UsernameSearchProps {
+    containerRef: React.RefObject<HTMLElement | null>;
+    headerRef?: React.RefObject<HTMLElement | null>;
+    bottomAppBarRef?: React.RefObject<MDUIBottomAppBar | null>;
+}
+
+export function UsernameSearch({ containerRef, headerRef, bottomAppBarRef }: UsernameSearchProps) {
     const { user, switchToDM, chat } = useAppState();
     const [searchQuery, setSearchQuery] = useState("");
     const [searchResults, setSearchResults] = useState<SearchUser[]>([]);
@@ -165,6 +171,9 @@ export function UsernameSearch() {
                     icon="arrow_back--outlined"
                 />
             ) : "search--outlined"}
+            containerRef={containerRef}
+            headerRef={headerRef}
+            bottomAppBarRef={bottomAppBarRef}
         >
             {isSearching && (
                 <div className={styles.searchLoading}>