1 files changed, 70 insertions, 30 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index cf52cb0f3..e75a5c1d0 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -126,14 +126,6 @@ export function BankFrame({
         </nav>
       </div>
       <section id="main" class="content">
-        {pageState.error && (
-          <ErrorBanner
-            error={pageState.error}
-            onClear={() => {
-              pageStateSetter((prev) => ({ ...prev, error: undefined }));
-            }}
-          />
-        )}
         <StatusBanner />
         {backend.state.status === "loggedIn" ? (
           <div class="top-right">
@@ -191,20 +183,48 @@ function maybeDemoContent(content: VNode): VNode {
   return <Fragment />;
 }
 
-export function ErrorBanner({
+export function ErrorBannerFloat({
   error,
   onClear,
 }: {
   error: ErrorMessage;
   onClear?: () => void;
-}): VNode | null {
+}): VNode {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        zIndex: 200,
+        width: "90%",
+      }}
+    >
+      <ErrorBanner error={error} onClear={onClear} />
+    </div>
+  );
+}
+
+function ErrorBanner({
+  error,
+  onClear,
+}: {
+  error: ErrorMessage;
+  onClear?: () => void;
+}): VNode {
   return (
-    <div class="informational informational-fail" style={{ marginTop: 8 }}>
+    <div
+      class="informational informational-fail"
+      style={{
+        marginTop: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+      }}
+    >
       <div style={{ display: "flex", justifyContent: "space-between" }}>
         <p>
           <b>{error.title}</b>
         </p>
-        <div>
+        <div style={{ marginTop: "auto", marginBottom: "auto" }}>
           {onClear && (
             <input
               type="button"
@@ -225,26 +245,46 @@ export function ErrorBanner({
 
 function StatusBanner(): VNode | null {
   const { pageState, pageStateSetter } = usePageContext();
-  if (!pageState.info) return null;
 
-  const rval = (
-    <div class="informational informational-ok" style={{ marginTop: 8 }}>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
-        <p>
-          <b>{pageState.info}</b>
-        </p>
-        <div>
-          <input
-            type="button"
-            class="pure-button"
-            value="Clear"
-            onClick={async () => {
-              pageStateSetter((prev) => ({ ...prev, info: undefined }));
-            }}
-          />
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        zIndex: 200,
+        width: "90%",
+      }}
+    >
+      {!pageState.info ? undefined : (
+        <div
+          class="informational informational-ok"
+          style={{ marginTop: 8, paddingLeft: 16, paddingRight: 16 }}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <p>
+              <b>{pageState.info}</b>
+            </p>
+            <div>
+              <input
+                type="button"
+                class="pure-button"
+                value="Clear"
+                onClick={async () => {
+                  pageStateSetter((prev) => ({ ...prev, info: undefined }));
+                }}
+              />
+            </div>
+          </div>
         </div>
-      </div>
+      )}
+      {!pageState.error ? undefined : (
+        <ErrorBanner
+          error={pageState.error}
+          onClear={() => {
+            pageStateSetter((prev) => ({ ...prev, error: undefined }));
+          }}
+        />
+      )}
     </div>
   );
-  return rval;
 }