From e1497bb6c1c43253c137c4c8a57a723868e8796f Mon Sep 17 00:00:00 2001
From: Urban Sanden <urban.sanden@curity.io>
Date: Tue, 19 May 2026 14:24:07 +0200
Subject: [PATCH 1/4] IS-11318 Make well themable, and make general is-error
 use alert styling etc

---
 .../src/shared/util/css/styles.css            | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/login-web-app/src/shared/util/css/styles.css b/src/login-web-app/src/shared/util/css/styles.css
index 0f9f20e..4531f1e 100644
--- a/src/login-web-app/src/shared/util/css/styles.css
+++ b/src/login-web-app/src/shared/util/css/styles.css
@@ -141,7 +141,7 @@ svg {
 }
 
 .haapi-stepper-form-field-text-input {
-  @extend .field, .w100, .mt2;
+  @extend .field, .w100;
   font-family: var(--type-regular);
 }
 
@@ -161,14 +161,16 @@ svg {
   background: transparent;
   border: none;
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   height: calc(var(--form-field-height) / 2);
   width: calc(var(--form-field-height) / 2);
   padding: unset;
   position: absolute;
   right: var(--space-1);
-  vertical-align: middle;
-  top: calc(50%);
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .haapi-stepper-form-field-password-visibility-toggle:focus-visible {
@@ -208,10 +210,14 @@ svg {
 }
 
 .haapi-stepper-well {
-  @extend .p3, .mx-auto, .bg-white, .br-8;
+  @extend .p3, .mx-auto;
   width: clamp(280px, 90%, 560px);
-  box-shadow: 0 4px 24px var(--color-grey-light);
-  margin: 0 auto;
+  background-color: var(--well-background-color);
+  border-width: var(--well-border-width);
+  border-style: var(--well-border-style);
+  border-color: var(--well-border-color);
+  border-radius: var(--well-border-radius);
+  box-shadow: var(--well-box-shadow);
 }
 
 .haapi-stepper-links {
@@ -329,4 +335,9 @@ svg {
 }
 
 .haapi-validation-error-description {
+    color: var(--color-danger);
+}
+
+.is-error {
+  @extend .alert, .alert-danger, .w100, .mx-auto;
 }

From 785063caf82e49d227c61beaa1b498cd8d56ce57 Mon Sep 17 00:00:00 2001
From: Urban Sanden <urban.sanden@curity.io>
Date: Tue, 19 May 2026 14:24:15 +0200
Subject: [PATCH 2/4] IS-11318 Adjust layout min-height

---
 src/login-web-app/previewer/shared/ui/layout/layout.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/login-web-app/previewer/shared/ui/layout/layout.module.css b/src/login-web-app/previewer/shared/ui/layout/layout.module.css
index f37ac24..98ce436 100644
--- a/src/login-web-app/previewer/shared/ui/layout/layout.module.css
+++ b/src/login-web-app/previewer/shared/ui/layout/layout.module.css
@@ -2,7 +2,7 @@
   --sidebarWidth: 360px;
   display: grid;
   grid-template-columns: var(--sidebarWidth) 1fr;
-  min-height: calc(100vh - 80px);
+  min-height: 100dvh;
   gap: 0;
 }
 

From 6b30d5e9357ee53976831552b18e41d2b78a14cc Mon Sep 17 00:00:00 2001
From: Urban Sanden <urban.sanden@curity.io>
Date: Tue, 19 May 2026 14:24:45 +0200
Subject: [PATCH 3/4] IS-11318 Adjust header slightly, to look better also on
 mobile when scrolling down

---
 src/login-web-app/src/shared/ui/header/Header.tsx      | 10 ++++++----
 .../src/shared/ui/header/header.module.css             | 10 +++++++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/login-web-app/src/shared/ui/header/Header.tsx b/src/login-web-app/src/shared/ui/header/Header.tsx
index 7a33a0a..99c8507 100644
--- a/src/login-web-app/src/shared/ui/header/Header.tsx
+++ b/src/login-web-app/src/shared/ui/header/Header.tsx
@@ -15,10 +15,12 @@ import classes from './header.module.css';
 export const Header = () => {
   return (
     <header className={`${classes.header} px2 flex flex-center flex-gap-1 w100`}>
-      <a href="/" className="button button-tiny button-link">
-        <IconVciCredentialHome width={32} height={32} />
-        Return to app
-      </a>
+      <div>
+        <a href="/" className="button button-tiny button-link">
+          <IconVciCredentialHome width={24} height={24} />
+          Return to app
+        </a>
+      </div>
     </header>
   );
 };
diff --git a/src/login-web-app/src/shared/ui/header/header.module.css b/src/login-web-app/src/shared/ui/header/header.module.css
index d9c82c4..f3512bf 100644
--- a/src/login-web-app/src/shared/ui/header/header.module.css
+++ b/src/login-web-app/src/shared/ui/header/header.module.css
@@ -3,5 +3,13 @@
   top: 0;
   left: 0;
   position: fixed;
-  z-index: 2;
+  z-index: 10;
+}
+
+@media (max-width: 60em) {
+  .header {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+  }
 }

From 5feef0022d8fc12879e14e33b07b9d18d3c2475c Mon Sep 17 00:00:00 2001
From: Urban Sanden <urban.sanden@curity.io>
Date: Tue, 19 May 2026 14:34:54 +0200
Subject: [PATCH 4/4] IS-11318 Adjust indentation

---
 src/login-web-app/src/shared/util/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/login-web-app/src/shared/util/css/styles.css b/src/login-web-app/src/shared/util/css/styles.css
index 4531f1e..6ce1ced 100644
--- a/src/login-web-app/src/shared/util/css/styles.css
+++ b/src/login-web-app/src/shared/util/css/styles.css
@@ -335,7 +335,7 @@ svg {
 }
 
 .haapi-validation-error-description {
-    color: var(--color-danger);
+  color: var(--color-danger);
 }
 
 .is-error {