Use drawer instead of dropdown menu for mobile settings (#10761)

* Separate settings items so layout is more consistent

* Convert settings on mobile to drawer

* Fix sizing on mobile and make scrollable

* remove padding

* Use dialog instead of popover

* Don't focus on first item

* Simpler tab fix

web/src/components/settings/AccountSettings.tsx

@@ -0,0 +1,22 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { VscAccount } from "react-icons/vsc";
+import { Button } from "../ui/button";
+
+export default function AccountSettings() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size="icon" variant="ghost">
+          <VscAccount />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p>Account</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}