From 8478363a23531dbf98936532f6a31db94a912c90 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Wed, 28 Sep 2022 18:56:59 +0100
Subject: [PATCH] minor layout fixes (#4741)

* fixed back button, fixed app store detail on mobile

* fixed settings padding and go back button

* Update packages/ui/v2/core/Shell.tsx

* Update packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
---
 packages/ui/v2/core/Shell.tsx                           | 8 ++++++--
 packages/ui/v2/core/layouts/SettingsLayout.tsx          | 9 ++++-----
 packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx | 2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 1dbc38bda2..6e1682c0dc 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -766,7 +766,7 @@ export function ShellMain(props: LayoutProps) {
             {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
             <div className="w-full ltr:mr-4 rtl:ml-4 sm:block">
               {props.heading && (
-                <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">
                   {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                 </h1>
               )}
@@ -777,7 +777,11 @@ export function ShellMain(props: LayoutProps) {
               )}
             </div>
             {props.CTA && (
-              <div className="cta fixed right-4 bottom-[75px] z-40 mb-4 flex-shrink-0 sm:relative  sm:bottom-auto sm:right-auto sm:z-0">
+              <div
+                className={classNames(
+                  props.backPath ? "relative" : "fixed right-4 bottom-[75px] z-40 ",
+                  "cta mb-4 flex-shrink-0 sm:relative sm:bottom-auto sm:right-auto sm:z-0"
+                )}>
                 {props.CTA}
               </div>
             )}
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index 1f2f2d36c0..8a9eb258ca 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -118,13 +118,12 @@ const SettingsSidebarContainer = ({ className = "" }) => {
       aria-label="Tabs">
       <>
         <div className="desktop-only pt-4" />
-        <div>
+        <div onClick={() => history.back()}>
           <VerticalTabItem
             name="Back"
-            href="/"
+            href="/."
             icon={Icon.FiArrowLeft}
             textClassNames="text-md font-medium leading-none text-black"
-            className="my-6"
           />
         </div>
         {tabsWithPermissions.map((tab) => {
@@ -332,7 +331,7 @@ export default function SettingsLayout({
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
       <div className="flex flex-1 [&>*]:flex-1">
-        <div className="mx-auto max-w-xs justify-center md:max-w-3xl">
+        <div className="mx-auto max-w-3xl justify-center">
           <ShellHeader />
           <ErrorBoundary>{children}</ErrorBoundary>
         </div>
@@ -347,7 +346,7 @@ function ShellHeader() {
   const { meta } = useMeta();
   const { t, isLocaleReady } = useLocale();
   return (
-    <header className="mx-auto block max-w-xs justify-between pt-12 sm:flex sm:pt-8 md:max-w-3xl">
+    <header className="mx-auto block justify-between pt-12 sm:flex sm:pt-8">
       <div className="mb-8 flex w-full items-center border-b border-gray-200 pb-8">
         {meta.backButton && (
           <a href="javascript:history.back()">
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
index 7c5e0b9466..a7253da4ce 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
@@ -47,7 +47,7 @@ const VerticalTabItem = function ({
               target={props.isExternalLink ? "_blank" : "_self"}
               className={classNames(
                 props.textClassNames || "text-sm font-medium leading-none text-gray-600",
-                "group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700  [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
+                "min-h-9 group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
                 props.disabled && "pointer-events-none !opacity-30",
                 (isChild || !props.icon) && "ml-7 mr-5 w-auto",
                 !info ? "h-6" : "h-14",