smaller header in mobile size

packages/app/src/Pages/Layout/Layout.css

@@ -15,15 +15,6 @@
   text-decoration: none;
 }
 
-header {
-  display: flex;
-  padding: var(--header-padding-tb) 16px;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  gap: 24px;
-}
-
 .header-actions .avatar {
   width: 40px;
   height: 40px;

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

@@ -82,7 +82,7 @@ export default function Index() {
 
 function Header() {
   return (
-    <header className="sticky top-0 md:hidden z-10 backdrop-blur-lg">
+    <header className="flex justify-between items-center self-stretch px-4 gap-6 sticky top-0 md:hidden z-10 bg-bg-color py-1">
       <LogoHeader />
       <AccountHeader />
     </header>

packages/app/src/index.css

@@ -49,7 +49,6 @@
   );
   --expired-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, var(--gray), var(--gray-superdark));
   --sub-bg: #111;
-  --header-padding-tb: 10px;
   --btn-color: #fff;
   --primary-gradient: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
   --cashu-gradient: linear-gradient(90deg, #40b039, #adff2a);

packages/app/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
         "nearly-bg-color": "var(--nearly-bg-color)",
         "border-color": "var(--border-color)",
         highlight: "var(--highlight)",
+        "bg-color": "var(--bg-color)",
       },
       textColor: {
         "nostr-blue": "var(--repost)",