fix broken header layout on mobile

This commit is contained in:
miloschwartz 2025-03-23 12:37:57 -04:00
parent aabdcea3c0
commit 013f342ff6
No known key found for this signature in database
3 changed files with 98 additions and 97 deletions

View file

@ -43,14 +43,8 @@ export function Header({ orgId, orgs }: HeaderProps) {
return (
<>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<ProfileIcon />
<div className="hidden md:block">
<SupporterStatus />
</div>
</div>
<div className="flex items-center">
<div className="hidden md:block">
<div className="flex items-center gap-4 mr-4">

View file

@ -13,7 +13,7 @@ import {
} from "@app/components/ui/dropdown-menu";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";;
import { formatAxiosError } from "@app/lib/api";
import { Laptop, LogOut, Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { useRouter } from "next/navigation";
@ -21,6 +21,7 @@ import { useState } from "react";
import { useUserContext } from "@app/hooks/useUserContext";
import Disable2FaForm from "./Disable2FaForm";
import Enable2FaForm from "./Enable2FaForm";
import SupporterStatus from "./SupporterStatus";
export default function ProfileIcon() {
const { setTheme, theme } = useTheme();
@ -152,6 +153,9 @@ export default function ProfileIcon() {
<span className="truncate max-w-full font-medium min-w-0 mr-1">
{user.email}
</span>
<div className="hidden md:block">
<SupporterStatus />
</div>
</div>
</>
);

View file

@ -176,8 +176,8 @@ export default function SupporterStatus() {
</Link>
</p>
<p>Please select the option that best suits you.</p>
<div className="py-6">
<p className="mb-3 text-center">Please select the option that best suits you.</p>
<div className="grid md:grid-cols-2 grid-cols-1 gap-8">
<Card>
<CardHeader>
@ -213,7 +213,9 @@ export default function SupporterStatus() {
rel="noopener noreferrer"
className="w-full"
>
<Button className="w-full">Buy</Button>
<Button className="w-full">
Buy
</Button>
</Link>
</CardFooter>
</Card>
@ -274,8 +276,9 @@ export default function SupporterStatus() {
</CardFooter>
</Card>
</div>
</div>
<div className="w-full pt-6 space-y-2">
<div className="w-full space-y-2">
<Button
className="w-full"
variant="outlinePrimary"