@zap-wunschlachen/wl-shared-components 1.0.28 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Background/Background.css

@@ -36,4 +36,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+/* Mobile landscape mode - enable scrolling */
+@media (max-height: 500px) and (orientation: landscape) {
+    .background {
+        overflow: auto;
+        align-items: flex-start;
+    }
+
+    .background__content {
+        height: auto;
+        min-height: 100%;
+        padding: 1rem;
+        box-sizing: border-box;
+    }
 }

package/src/components/ErrorPage/ErrorPage.css

@@ -2,7 +2,6 @@
   min-height: 100vh;
   display: flex;
   justify-content: center;
-  background-image: url('../Background/wunschlachen-background.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: auto;
@@ -122,3 +121,52 @@
     height: 340px;
   }
 }
+
+/* Small mobile screens with limited height (e.g. iPhone SE) */
+@media (max-width: 480px) and (max-height: 700px) {
+  .error-page__grid {
+    gap: 1rem;
+  }
+
+  .error-page__content {
+    padding: 1rem;
+  }
+
+  .error-page__header {
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .error-page__icon {
+    width: 80px;
+    height: 109px;
+  }
+
+  .error-page__description {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) and (max-height: 600px) {
+  .error-page__icon {
+    display: none;
+  }
+
+  .error-page__grid {
+    gap: 0.5rem;
+  }
+
+  .error-page__content {
+    padding: 0.5rem;
+  }
+
+  .error-page__header {
+    margin-bottom: 0.5rem;
+  }
+
+  .error-page__description {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}

package/src/components/MaintenanceBanner/MaintenanceBanner.css

@@ -274,6 +274,70 @@
   }
 }
 
+/* Small mobile screens with limited height (e.g. iPhone SE) */
+@media (max-width: 480px) and (max-height: 700px) {
+  .maintenance-banner__content {
+    gap: 24px;
+    padding: 1rem;
+  }
+
+  .maintenance-banner__text-content {
+    gap: 24px;
+  }
+
+  .maintenance-banner__logo-section {
+    gap: 16px;
+  }
+
+  .maintenance-banner__logo-headline {
+    gap: 16px;
+  }
+
+  .maintenance-banner__body-section {
+    gap: 12px;
+  }
+
+  .maintenance-banner__illustration {
+    width: 100px;
+    height: 100px;
+  }
+
+  .maintenance-banner__title {
+    font-size: 24px;
+  }
+
+  .maintenance-banner__description,
+  .maintenance-banner__contact-text {
+    font-size: 14px;
+  }
+
+  .maintenance-banner__button {
+    font-size: 14px;
+    padding: 10px 20px;
+    height: auto;
+    width: auto;
+  }
+}
+
+@media (max-width: 480px) and (max-height: 600px) {
+  .maintenance-banner__illustration {
+    display: none;
+  }
+
+  .maintenance-banner__title {
+    font-size: 22px;
+  }
+
+  .maintenance-banner__content {
+    gap: 16px;
+    padding: 0.5rem;
+  }
+
+  .maintenance-banner__text-content {
+    gap: 16px;
+  }
+}
+
 /* Respect users who prefer reduced motion: disable transitions/animations */
 @media (prefers-reduced-motion: reduce) {
   .maintenance-banner__button,