From 4fb0852505bba321844688be587e936f0d6af428 Mon Sep 17 00:00:00 2001
From: Levent Deniz <32421538+leventdeniz@users.noreply.github.com>
Date: Fri, 24 Feb 2023 01:19:52 +0100
Subject: [PATCH] [CAL-1125] Fix app detail page heading size (#7257)

* [CAL-1125] Fix app detail page heading size

* [CAL-1125] Fix margin on back button in shell

* [CAL-1125] Fix shell-margin for mobile

---------

Co-authored-by: Levent Deniz <levent.deniz@check24.de>
---
 apps/web/components/apps/App.tsx  | 9 ++++++---
 packages/features/shell/Shell.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index 529836ea8d..faa13acbf3 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -303,6 +303,11 @@ const Component = ({
   );
 };
 
+const ShellHeading = () => {
+  const { t } = useLocale();
+  return <span className="block py-2">{t("app_store")}</span>;
+};
+
 export default function App(props: {
   name: string;
   description: AppType["description"];
@@ -328,10 +333,8 @@ export default function App(props: {
   images?: string[];
   isTemplate?: boolean;
 }) {
-  const { t } = useLocale();
-
   return (
-    <Shell smallHeading isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index d77507738b..8c0bb43702 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -780,7 +780,11 @@ export function ShellMain(props: LayoutProps) {
 
   return (
     <>
-      <div className={classNames("mb-4 flex sm:mt-0 md:mb-6", props.smallHeading ? "lg:mb-7" : "lg:mb-8")}>
+      <div
+        className={classNames(
+          "my-4 flex items-center md:mt-0 md:mb-6",
+          props.smallHeading ? "lg:mb-7" : "lg:mb-8"
+        )}>
         {!!props.backPath && (
           <Button
             variant="icon"
@@ -791,7 +795,7 @@ export function ShellMain(props: LayoutProps) {
             }
             StartIcon={FiArrowLeft}
             aria-label="Go Back"
-            className="mt-2 rounded-md ltr:mr-2 rtl:ml-2"
+            className="rounded-md ltr:mr-2 rtl:ml-2"
           />
         )}
         {props.heading && (