responsive header hotfix

frontend-v2/src/components/layouts.tsx

@@ -41,12 +41,14 @@ export const Layout = () => {
               <ResourceTypeDropdown />
               {type && <ResourcesDropdown />}
             </div>
-            <div className="flex">
+            <div className="flex md:gap-4">
               <Omnibar />
-              <WsStatusIndicator />
-              <HeaderUpdates />
-              <ThemeToggle />
-              <Logout />
+              <div className="flex">
+                <WsStatusIndicator />
+                <HeaderUpdates />
+                <ThemeToggle />
+                <Logout />
+              </div>
             </div>
           </div>
         </div>

frontend-v2/src/components/updates/header.tsx

@@ -79,7 +79,7 @@ export const HeaderUpdates = () => {
           />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[500px] h-[500px] overflow-auto">
+      <DropdownMenuContent className="w-[100vw] md:w-[500px] h-[500px] overflow-auto">
         <DropdownMenuGroup>
           {updates?.updates.map((update) => (
             <SingleUpdate update={update} key={update.id} />

frontend-v2/src/components/util.tsx

@@ -35,6 +35,7 @@ import {
   DropdownMenuTrigger,
 } from "@ui/dropdown-menu";
 import { ResourceComponents } from "./resources";
+import { WsStatusIndicator } from "@lib/socket";
 
 export const WithLoading = ({
   children,
@@ -371,3 +372,19 @@ export const Logout = () => (
     <LogOut className="w-4 h-4" />
   </Button>
 );
+
+export const UserDropdown = () => {
+  const user = useRead("GetUser", {}).data;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="gap-2" variant="outline">
+          <WsStatusIndicator />
+          {user?.username}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent></DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

frontend-v2/src/lib/socket.tsx

@@ -119,7 +119,12 @@ export const WsStatusIndicator = () => {
     toast({ title: "surprise", description: "motherfucker" });
 
   return (
-    <Button variant="ghost" onClick={onclick} size="icon" className="ml-4">
+    <Button
+      variant="ghost"
+      onClick={onclick}
+      size="icon"
+      className="hidden md:inline-flex"
+    >
       <Circle
         className={cn(
           "w-4 h-4 stroke-none",