fixed input size on mobile, fixed settings (#4360)
parent
63aae60af4
commit
e50bc0f198
|
@ -25,7 +25,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
|
||||||
{...props}
|
{...props}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"mb-[7px] block h-9 w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm",
|
"mb-[7px] block h-9 w-full rounded-md border border-gray-300 py-2 px-3 text-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
|
||||||
props.className
|
props.className
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -109,7 +109,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<nav className="flex items-center justify-between border-b border-gray-100 bg-gray-50 p-4 lg:hidden">
|
<nav className="fixed flex w-full items-center justify-between border-b border-gray-100 bg-gray-50 p-4 sm:relative lg:hidden">
|
||||||
<div className="flex items-center space-x-3 ">
|
<div className="flex items-center space-x-3 ">
|
||||||
<Button
|
<Button
|
||||||
StartIcon={Icon.FiMenu}
|
StartIcon={Icon.FiMenu}
|
||||||
|
@ -153,7 +153,7 @@ export default function SettingsLayout({
|
||||||
<MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
|
<MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
|
||||||
}>
|
}>
|
||||||
<div className="flex flex-1 [&>*]:flex-1">
|
<div className="flex flex-1 [&>*]:flex-1">
|
||||||
<div className="color-black mx-auto mt-8 max-w-4xl justify-center px-4 sm:px-6 md:px-8 ">
|
<div className="mx-auto max-w-4xl justify-center">
|
||||||
<ShellHeader />
|
<ShellHeader />
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
@ -168,7 +168,7 @@ function ShellHeader() {
|
||||||
const { meta } = useMeta();
|
const { meta } = useMeta();
|
||||||
const { t, isLocaleReady } = useLocale();
|
const { t, isLocaleReady } = useLocale();
|
||||||
return (
|
return (
|
||||||
<header className="mx-auto block max-w-4xl justify-between sm:flex md:pt-8">
|
<header className="mx-auto block max-w-4xl justify-between pt-12 sm:flex sm:pt-8">
|
||||||
<div className="mb-8 w-full border-b border-gray-200 pb-8">
|
<div className="mb-8 w-full border-b border-gray-200 pb-8">
|
||||||
{meta.title && isLocaleReady ? (
|
{meta.title && isLocaleReady ? (
|
||||||
<h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-black">
|
<h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-black">
|
||||||
|
|
|
@ -73,9 +73,7 @@ const VerticalTabItem: FC<VerticalTabItemProps> = ({ name, href, tabName, info,
|
||||||
props.className
|
props.className
|
||||||
)}
|
)}
|
||||||
aria-current={isCurrent ? "page" : undefined}>
|
aria-current={isCurrent ? "page" : undefined}>
|
||||||
{props.icon && (
|
{props.icon && <props.icon className="mr-[10px] h-[16px] w-[16px] self-start stroke-[2px]" />}
|
||||||
<props.icon className="mt-2 mr-[10px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" />
|
|
||||||
)}
|
|
||||||
<div>
|
<div>
|
||||||
<p>{t(name)}</p>
|
<p>{t(name)}</p>
|
||||||
{info && <p className="pt-1 text-xs font-normal">{t(info)}</p>}
|
{info && <p className="pt-1 text-xs font-normal">{t(info)}</p>}
|
||||||
|
|
Loading…
Reference in New Issue