header layout

packages/app/src/Pages/Layout/Header.tsx

@@ -73,12 +73,11 @@ export function Header() {
         { "md:hidden": pageName === "messages" },
         "flex justify-between items-center self-stretch gap-6 sticky top-0 z-10 bg-bg-color md:bg-header md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg",
       )}>
-      {showBackButton ? (
-        <span onClick={handleBackButtonClick} className="p-3 cursor-pointer">
-          <Icon name="arrowBack" />
-        </span>
-      ) : (
-        <div className="md:hidden p-3">
+      <div onClick={handleBackButtonClick} className={classNames({"hidden": !showBackButton}, "p-2 md:p-3 cursor-pointer")}>
+        <Icon name="arrowBack" />
+      </div>
+      {!showBackButton && (
+        <div className="p-2 md:p-0 md:invisible">
           <LogoHeader showText={false} />
         </div>
       )}