From 2a5221e481fb354828285c66cdc7481605073cb2 Mon Sep 17 00:00:00 2001
From: Mukund Sanjay Bharani <116060621+MuKuNdSaNjAy@users.noreply.github.com>
Date: Wed, 7 Oct 2026 14:29:31 -0500
Subject: [PATCH 1/2] fix(keycloak): move background banner styles to class

fix/905-register-banner-overlap
---
 .../treetracker/login/resources/js/treetracker.js    | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/keycloak/lib/docker/themes/treetracker/login/resources/js/treetracker.js b/keycloak/lib/docker/themes/treetracker/login/resources/js/treetracker.js
index b25b3e54..7aee47c7 100644
--- a/keycloak/lib/docker/themes/treetracker/login/resources/js/treetracker.js
+++ b/keycloak/lib/docker/themes/treetracker/login/resources/js/treetracker.js
@@ -1,18 +1,10 @@
 // javascript to append a new div to body
 var newDiv = document.createElement("div");
 newDiv.innerHTML = `
-<div style="
-    position: fixed;
-    bottom: 0px;
-    margin: 10px 20px;
-    background-color: #09090980;
-    color: white;
-    font-size: 16px;
-    padding: 5px;
-">Find <a href="https://map.treetracker.org/planters/17356/trees/6282936" target="_blank" >the tree on the background</a> on our web map.</div>
+<div class="tt-bg-credit">Find <a href="https://map.treetracker.org/planters/17356/trees/6282936" target="_blank" rel="noopener noreferrer">the tree on the background</a> on our web map.</div>
 `;
 
 // Append new div to body when the DOM is loaded
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener("DOMContentLoaded", function (event) {
   document.body.appendChild(newDiv);
 });

From c9a48b1403cf544a6d516087d947b1929b0903f3 Mon Sep 17 00:00:00 2001
From: Mukund Sanjay Bharani <116060621+MuKuNdSaNjAy@users.noreply.github.com>
Date: Wed, 7 Oct 2026 14:31:48 -0500
Subject: [PATCH 2/2] fix(keycloak): flow background banner below form on small
 screens (#905)

---
 .../login/resources/css/treetracker.css       | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/keycloak/lib/docker/themes/treetracker/login/resources/css/treetracker.css b/keycloak/lib/docker/themes/treetracker/login/resources/css/treetracker.css
index 9647e603..7864b772 100644
--- a/keycloak/lib/docker/themes/treetracker/login/resources/css/treetracker.css
+++ b/keycloak/lib/docker/themes/treetracker/login/resources/css/treetracker.css
@@ -33,3 +33,24 @@ div.kc-logo-text {
         margin-right: 20px;
     }
 }
+
+/* Background photo credit banner (injected by js/treetracker.js) */
+.tt-bg-credit {
+  position: fixed;
+  bottom: 0;
+  margin: 10px 20px;
+  background-color: #09090980;
+  color: white;
+  font-size: 16px;
+  padding: 5px;
+}
+
+/* On small or short screens, let the banner flow below the form instead of covering it (#905) */
+@media (max-width: 767px), (max-height: 800px) {
+  .tt-bg-credit {
+    position: static;
+    margin: 16px auto;
+    width: fit-content;
+    max-width: calc(100% - 40px);
+  }
+}