From e50bc0f1989f056750a747eee53b52fecfa0b76d Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Sun, 11 Sep 2022 11:09:23 +0200
Subject: [PATCH] fixed input size on mobile, fixed settings (#4360)

---
 packages/ui/v2/core/form/fields.tsx                     | 2 +-
 packages/ui/v2/core/layouts/SettingsLayout.tsx          | 6 +++---
 packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx | 4 +---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx
index fa809b5ee4e7ea..9f4e01aa8ddf5f 100644
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/v2/core/form/fields.tsx
@@ -25,7 +25,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
       {...props}
       ref={ref}
       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
       )}
     />
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index af9236065b7a09..c479895d5949d7 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -109,7 +109,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
 
   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 ">
           <Button
             StartIcon={Icon.FiMenu}
@@ -153,7 +153,7 @@ export default function SettingsLayout({
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
       <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 />
           {children}
         </div>
@@ -168,7 +168,7 @@ function ShellHeader() {
   const { meta } = useMeta();
   const { t, isLocaleReady } = useLocale();
   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">
         {meta.title && isLocaleReady ? (
           <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-black">
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
index 5ca5120298ebdd..5e8a2f67512d4a 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
@@ -73,9 +73,7 @@ const VerticalTabItem: FC<VerticalTabItemProps> = ({ name, href, tabName, info,
                 props.className
               )}
               aria-current={isCurrent ? "page" : undefined}>
-              {props.icon && (
-                <props.icon className="mt-2 mr-[10px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" />
-              )}
+              {props.icon && <props.icon className="mr-[10px] h-[16px] w-[16px] self-start stroke-[2px]" />}
               <div>
                 <p>{t(name)}</p>
                 {info && <p className="pt-1 text-xs font-normal">{t(info)}</p>}