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 (
<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 overflow-hidden rounded-lg border bg-white shadow-sm">
<div className="flex justify-between border-b p-4">

View file

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

View file

@ -48,8 +48,10 @@ export const MobileNavigation = (props: { className?: string }) => {
className={clsx(
"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,
"border-transparent bg-gray-50/0 shadow-none": !isPinned,
"bg-gray-50 shadow-sm sm:bg-gray-50/75 sm:backdrop-blur-md ":
isPinned,
"bg-gray-50 shadow-none sm:border-transparent sm:bg-gray-50/0":
!isPinned,
},
props.className,
)}

View file

@ -35,7 +35,7 @@ export const Profile: React.FunctionComponent = () => {
}
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>
<title>
{t("profileUser", {