Fix mobile styles (#550)

This commit is contained in:
Luke Vella 2023-03-11 10:21:04 +00:00 committed by GitHub
parent 1d31a42bb9
commit cb1fb23b19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 5 deletions

View file

@ -142,7 +142,7 @@ const Page: React.FunctionComponent<CreatePollPageProps> = ({
}; };
return ( return (
<div className="max-w-full px-3 pb-3 sm:p-4"> <div className="max-w-full p-3 sm:p-4">
<div className="max-w-full"> <div className="max-w-full">
<div className="max-w-full overflow-hidden rounded-lg border bg-white shadow-sm"> <div className="max-w-full overflow-hidden rounded-lg border bg-white shadow-sm">
<div className="flex justify-between border-b p-4"> <div className="flex justify-between border-b p-4">

View file

@ -16,7 +16,7 @@ const StandardLayout: React.FunctionComponent<{
<UserProvider> <UserProvider>
<DayjsProvider> <DayjsProvider>
<ModalProvider> <ModalProvider>
<div className={"bg-pattern relative min-h-full"} {...rest}> <div className="bg-pattern relative min-h-full" {...rest}>
<MobileNavigation /> <MobileNavigation />
<div className="mx-auto max-w-4xl">{children}</div> <div className="mx-auto max-w-4xl">{children}</div>
</div> </div>

View file

@ -48,8 +48,10 @@ export const MobileNavigation = (props: { className?: string }) => {
className={clsx( className={clsx(
"sticky top-0 z-40 flex w-full shrink-0 items-center justify-between border-b p-2 transition-all", "sticky top-0 z-40 flex w-full shrink-0 items-center justify-between border-b p-2 transition-all",
{ {
"bg-gray-50/75 shadow-sm backdrop-blur-md ": isPinned, "bg-gray-50 shadow-sm sm:bg-gray-50/75 sm:backdrop-blur-md ":
"border-transparent bg-gray-50/0 shadow-none": !isPinned, isPinned,
"bg-gray-50 shadow-none sm:border-transparent sm:bg-gray-50/0":
!isPinned,
}, },
props.className, props.className,
)} )}

View file

@ -35,7 +35,7 @@ export const Profile: React.FunctionComponent = () => {
} }
return ( return (
<div className="-mt-3 space-y-3 p-3 sm:space-y-4 sm:p-4"> <div className="space-y-3 p-3 sm:space-y-4 sm:p-4">
<Head> <Head>
<title> <title>
{t("profileUser", { {t("profileUser", {