From c2dc2611cf6890f5a62dbf95941f7edc5b4b2d17 Mon Sep 17 00:00:00 2001
From: pablo <pagoru@gmail.com>
Date: Thu, 2 Oct 2025 11:47:31 +0200
Subject: [PATCH] feat: Improved background clarity on small devices + headless
 pages improve - fix #130

---
 src/components/layout/main-layout/main-layout.component.tsx | 4 +++-
 src/components/layout/main-layout/main-layout.module.scss   | 2 +-
 src/styles/mixins.module.scss                               | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/main-layout/main-layout.component.tsx b/src/components/layout/main-layout/main-layout.component.tsx
index a6edb92..b57e7a1 100644
--- a/src/components/layout/main-layout/main-layout.component.tsx
+++ b/src/components/layout/main-layout/main-layout.component.tsx
@@ -34,7 +34,9 @@ export const MainLayoutComponent: React.FC<Props> = ({
           <div className={styles.container}>
             <NavigatorComponent children={navigatorChildren} />
             <div className={styles.bigContainer}>
-              <HeaderComponent children={headerChildren} />
+              {headerChildren ? (
+                <HeaderComponent children={headerChildren} />
+              ) : null}
               <MainComponent
                 className={cn(styles.main, {
                   [styles.headless]: !headerChildren,
diff --git a/src/components/layout/main-layout/main-layout.module.scss b/src/components/layout/main-layout/main-layout.module.scss
index 925b845..57ae545 100644
--- a/src/components/layout/main-layout/main-layout.module.scss
+++ b/src/components/layout/main-layout/main-layout.module.scss
@@ -9,7 +9,7 @@
   //margin: $margin auto;
   //width: calc(100% - ($margin * 2));
   //height: calc(100% - ($margin * 2));
-  width: 100%;
+  width: calc(100% - 2rem);
   height: 100%;
   margin: 0 auto;
 
diff --git a/src/styles/mixins.module.scss b/src/styles/mixins.module.scss
index f941964..0525a92 100644
--- a/src/styles/mixins.module.scss
+++ b/src/styles/mixins.module.scss
@@ -75,8 +75,8 @@
 
 @mixin glassBackground() {
   background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(3px);
-  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(1px);
+  -webkit-backdrop-filter: blur(1px);
 
   @media screen and (prefers-color-scheme: dark) {
     background: rgba(55, 55, 55, 0.8);
@@ -84,7 +84,7 @@
 }
 
 @mixin glassBackground() {
-  backdrop-filter: blur(3px);
+  backdrop-filter: blur(1px);
   background-color: rgba(255, 255, 255, 0.35);
   @media screen and (prefers-color-scheme: dark) {
     background-color: rgba(68, 68, 68, 0.2);