From 7ac4960686733facca96405139688746f2e6f337 Mon Sep 17 00:00:00 2001
From: Alain Bourgeois <alain@bourgeoa.fr>
Date: Fri, 24 Apr 2026 10:27:49 +0200
Subject: [PATCH] browse.html ui

---
 static/browse-test.html | 374 +++++++++++++++++++++-------------------
 static/browse.html      | 374 +++++++++++++++++++++-------------------
 2 files changed, 390 insertions(+), 358 deletions(-)
diff --git a/static/browse-test.html b/static/browse-test.html
index 7573cc14..c1c3ba68 100644
--- a/static/browse-test.html
+++ b/static/browse-test.html
@@ -1,179 +1,195 @@
-<!DOCTYPE html>
-<html id="docHTML">
-<head>
-  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-  <script>
-    // Suppress harmless ResizeObserver loop errors that block the UI
-    window.addEventListener('error', function(e) {
-      if (e.message && e.message.includes('ResizeObserver loop')) {
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-        return false;
-      }
-    }, true);
-  </script>
-  <link type="text/css" rel="stylesheet" href="mash.css" />
-  <script type="text/javascript" src="mashlib.js"></script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const authn = SolidLogic.authn
-    const authSession = SolidLogic.authSession
-    const store = SolidLogic.store
-    const dom = document
-    // Disable cross-site proxy - modern Solid servers support CORS
-    // $rdf.Fetcher.crossSiteProxyTemplate = self.origin + '/xss?uri={uri}'
-    const uri = window.location.href
-    window.document.title = 'SolidOS Web App: ' + uri
-    const outliner = panes.getOutliner(dom) //function from solid-panes
-
-    function go (event) {
-      let uri = $rdf.uri.join(uriField.value, window.location.href)
-
-      const params = new URLSearchParams(location.search)
-      params.set('uri', uri);
-      window.history.replaceState({}, '', `${location.origin}${location.pathname}?${params}`);
-
-      var subject = $rdf.sym(uri);
-      outliner.GotoSubject(subject, true, undefined, true, undefined);
-      mungeLoginArea();
-    }
-
-    const uriField = dom.getElementById('uriField')
-    const goButton = dom.getElementById('goButton')
-    const loginButtonArea = document.getElementById("loginButtonArea");
-    const webIdArea = dom.getElementById('webId')
-    const banner = dom.getElementById('inputArea')
- 
-    uriField.addEventListener('keyup', function (e) {
-      if (e.keyCode === 13) {
-        go(e)
-      }
-    }, false)
-
-    goButton.addEventListener('click', go, false);
-    let initial = new URLSearchParams(self.location.search).get("uri")
-    if (initial) {
-      uriField.value = initial
-      go()
-    }
-    async function mungeLoginArea(){
-      loginButtonArea.innerHTML="";
-      if(uriField.value) {
-        loginButtonArea.appendChild(UI.login.loginStatusBox(document, null, {}))
-      }
-      const me = authn.currentUser()
-      if (me) {       
-        const logoutButton = loginButtonArea.querySelector('input');         
-        logoutButton.value = "Logout";           
-        let displayId = `&lt;${me.value}>`;
-        webIdArea.innerHTML = displayId;
-        banner.style.backgroundColor="#bbccbb";                                                                           
-      } else {                                                                  
-        banner.style.backgroundColor="#ccbbbb";                              
-      }                                                                
-      loginButtonArea.style.display="inline-block";                           
-    }      
-
-    if (authSession) {
-      authSession.events.on("login", () => {
-        mungeLoginArea();
-        go()
-      })
-      authSession.events.on("logout", () => {
-        mungeLoginArea();
-        webIdArea.innerHTML = "public user";
-        go()
-      })
-      authSession.events.on("sessionRestore", (url) => {
-        mungeLoginArea();
-        go()
-      })
-    }
-    mungeLoginArea();
-});
-</script>
-</head>
-<body>
-  <header id="PageHeader" role="banner" class="header-mash">
-    SolidOS Databrowser
-    <div class="input-row" id="inputArea">
-        Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
-    </div>
-  </header>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
-    <div class="user-row">
-      As user <span id="webId">&lt;public user></span> 
-      <span id="loginButtonArea"></span>
-    </div>
-
-    <section
-          id="OutlineView"
-          class="outline-view"
-          aria-label="Resource browser"
-    >
-      <table id="outline" style="width: 100%"></table>
-    </section>
-
-    <section
-        id="GlobalDashboard"
-        class="global-dashboard"
-        aria-label="Dashboard"
-        hidden
-    >
-    </section>
-
-  </main>
-
-  <footer id="PageFooter" role="contentinfo"></footer>
-  <style>
-    .header-mash {
-      padding:1em !important;
-      background-color:#ccbbbb !important;
-    }
-    .input-row {
-    }
-    .browser-main {
-      margin-top: 5.5rem !important;
-    }
-    .user-row {
-      padding-top: 1.5em;
-      margin-left:1em;
-    }
-    #loginButtonArea input {
-      display:inline-block;
-      margin:0.25em !important;
-      padding:0.25em !important;
-    }
-    #webId {
-      display:inline-block;
-      padding-top:0.6em;
-      padding-bottom:0.6em;
-    }
-    #uriField, .uri-field {
-      font-size:100%;
-      min-width:25em;
-      padding:0.5em;
-      width:70%;
-      margin-top:0.6em !important;
-    }
-
-    /* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
-    div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
-    div[style*="min-width: 400px"][style*="box-shadow"],
-    div[style*="z-index : 10"],
-    div[style*="z-index: 10"] {
-      z-index: 2147483647 !important;
-      top: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
-      bottom: 0 !important;
-      justify-content: center !important;
-      align-items: center !important;
-    }
-
-  </style>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html id="docHTML">
+<head>
+  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+  <script>
+    // Suppress harmless ResizeObserver loop errors that block the UI
+    window.addEventListener('error', function(e) {
+      if (e.message && e.message.includes('ResizeObserver loop')) {
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+    }, true);
+  </script>
+  <link type="text/css" rel="stylesheet" href="mash.css" />
+  <script type="text/javascript" src="mashlib.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const authn = SolidLogic.authn
+    const authSession = SolidLogic.authSession
+    const store = SolidLogic.store
+    const dom = document
+    // Disable cross-site proxy - modern Solid servers support CORS
+    // $rdf.Fetcher.crossSiteProxyTemplate = self.origin + '/xss?uri={uri}'
+    const uri = window.location.href
+    window.document.title = 'SolidOS Web App: ' + uri
+    const outliner = panes.getOutliner(dom) //function from solid-panes
+
+    function go (event) {
+      let uri = $rdf.uri.join(uriField.value, window.location.href)
+
+      const params = new URLSearchParams(location.search)
+      params.set('uri', uri);
+      window.history.replaceState({}, '', `${location.origin}${location.pathname}?${params}`);
+
+      var subject = $rdf.sym(uri);
+      outliner.GotoSubject(subject, true, undefined, true, undefined);
+      mungeLoginArea();
+    }
+
+    const uriField = dom.getElementById('uriField')
+    const goButton = dom.getElementById('goButton')
+    const loginButtonArea = document.getElementById("loginButtonArea");
+    const webIdArea = dom.getElementById('webId')
+    const banner = dom.getElementById('inputArea')
+    const pageHeader = dom.getElementById('PageHeader')
+
+    function updateHeaderOffset () {
+      if (!pageHeader) return
+      const headerHeight = Math.ceil(pageHeader.getBoundingClientRect().height)
+      document.documentElement.style.setProperty('--browse-header-offset', `${headerHeight}px`)
+    }
+
+    window.addEventListener('resize', updateHeaderOffset)
+    updateHeaderOffset()
+ 
+    uriField.addEventListener('keyup', function (e) {
+      if (e.keyCode === 13) {
+        go(e)
+      }
+    }, false)
+
+    goButton.addEventListener('click', go, false);
+    let initial = new URLSearchParams(self.location.search).get("uri")
+    if (initial) {
+      uriField.value = initial
+      go()
+    }
+    async function mungeLoginArea(){
+      loginButtonArea.innerHTML="";
+      if(uriField.value) {
+        loginButtonArea.appendChild(UI.login.loginStatusBox(document, null, {}))
+      }
+      const me = authn.currentUser()
+      if (me) {       
+        const logoutButton = loginButtonArea.querySelector('input');         
+        logoutButton.value = "Logout";           
+        let displayId = `&lt;${me.value}>`;
+        webIdArea.innerHTML = displayId;
+        banner.style.backgroundColor="#bbccbb";                                                                           
+      } else {                                                                  
+        banner.style.backgroundColor="#ccbbbb";                              
+      }                                                                
+      loginButtonArea.style.display="inline-block";                           
+      updateHeaderOffset()
+    }      
+
+    if (authSession) {
+      authSession.events.on("login", () => {
+        mungeLoginArea();
+        go()
+      })
+      authSession.events.on("logout", () => {
+        mungeLoginArea();
+        webIdArea.innerHTML = "public user";
+        go()
+      })
+      authSession.events.on("sessionRestore", (url) => {
+        mungeLoginArea();
+        go()
+      })
+    }
+    mungeLoginArea();
+});
+</script>
+</head>
+<body>
+  <header id="PageHeader" role="banner" class="header-mash">
+    SolidOS Databrowser
+    <div class="input-row" id="inputArea">
+        Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
+    </div>
+  </header>
+  <div class="user-row">
+    As user <span id="webId">&lt;public user></span> 
+    <span id="loginButtonArea"></span>
+  </div>
+  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+
+    <section
+          id="OutlineView"
+          class="outline-view"
+          aria-label="Resource browser"
+    >
+      <table id="outline" style="width: 100%"></table>
+    </section>
+
+    <section
+        id="GlobalDashboard"
+        class="global-dashboard"
+        aria-label="Dashboard"
+        hidden
+    >
+    </section>
+
+  </main>
+
+  <footer id="PageFooter" role="contentinfo"></footer>
+  <style>
+    body {
+      padding-top: calc(var(--browse-header-offset, var(--app-header-height, 3.8rem)) + 0.35rem);
+    }
+    .header-mash {
+      padding:1em !important;
+      background-color:#ccbbbb !important;
+    }
+    .input-row {
+    }
+    .browser-main {
+      margin-top: 0 !important;
+    }
+    .user-row {
+      margin-top: 0;
+      padding-top: 0.35em;
+      padding-bottom: 0.5em;
+      margin-left:1em;
+    }
+    #loginButtonArea input {
+      display:inline-block;
+      margin:0.25em !important;
+      padding:0.25em !important;
+    }
+    #webId {
+      display:inline-block;
+      padding-top:0.6em;
+      padding-bottom:0.6em;
+    }
+    #uriField, .uri-field {
+      font-size:100%;
+      min-width:25em;
+      padding:0.5em;
+      width:70%;
+      margin-top:0.6em !important;
+    }
+
+    /* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
+    div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
+    div[style*="min-width: 400px"][style*="box-shadow"],
+    div[style*="z-index : 10"],
+    div[style*="z-index: 10"] {
+      z-index: 2147483647 !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      justify-content: center !important;
+      align-items: center !important;
+    }
+
+  </style>
+
+</body>
+</html>
diff --git a/static/browse.html b/static/browse.html
index 7573cc14..c1c3ba68 100644
--- a/static/browse.html
+++ b/static/browse.html
@@ -1,179 +1,195 @@
-<!DOCTYPE html>
-<html id="docHTML">
-<head>
-  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-  <script>
-    // Suppress harmless ResizeObserver loop errors that block the UI
-    window.addEventListener('error', function(e) {
-      if (e.message && e.message.includes('ResizeObserver loop')) {
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        e.preventDefault();
-        return false;
-      }
-    }, true);
-  </script>
-  <link type="text/css" rel="stylesheet" href="mash.css" />
-  <script type="text/javascript" src="mashlib.js"></script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const authn = SolidLogic.authn
-    const authSession = SolidLogic.authSession
-    const store = SolidLogic.store
-    const dom = document
-    // Disable cross-site proxy - modern Solid servers support CORS
-    // $rdf.Fetcher.crossSiteProxyTemplate = self.origin + '/xss?uri={uri}'
-    const uri = window.location.href
-    window.document.title = 'SolidOS Web App: ' + uri
-    const outliner = panes.getOutliner(dom) //function from solid-panes
-
-    function go (event) {
-      let uri = $rdf.uri.join(uriField.value, window.location.href)
-
-      const params = new URLSearchParams(location.search)
-      params.set('uri', uri);
-      window.history.replaceState({}, '', `${location.origin}${location.pathname}?${params}`);
-
-      var subject = $rdf.sym(uri);
-      outliner.GotoSubject(subject, true, undefined, true, undefined);
-      mungeLoginArea();
-    }
-
-    const uriField = dom.getElementById('uriField')
-    const goButton = dom.getElementById('goButton')
-    const loginButtonArea = document.getElementById("loginButtonArea");
-    const webIdArea = dom.getElementById('webId')
-    const banner = dom.getElementById('inputArea')
- 
-    uriField.addEventListener('keyup', function (e) {
-      if (e.keyCode === 13) {
-        go(e)
-      }
-    }, false)
-
-    goButton.addEventListener('click', go, false);
-    let initial = new URLSearchParams(self.location.search).get("uri")
-    if (initial) {
-      uriField.value = initial
-      go()
-    }
-    async function mungeLoginArea(){
-      loginButtonArea.innerHTML="";
-      if(uriField.value) {
-        loginButtonArea.appendChild(UI.login.loginStatusBox(document, null, {}))
-      }
-      const me = authn.currentUser()
-      if (me) {       
-        const logoutButton = loginButtonArea.querySelector('input');         
-        logoutButton.value = "Logout";           
-        let displayId = `&lt;${me.value}>`;
-        webIdArea.innerHTML = displayId;
-        banner.style.backgroundColor="#bbccbb";                                                                           
-      } else {                                                                  
-        banner.style.backgroundColor="#ccbbbb";                              
-      }                                                                
-      loginButtonArea.style.display="inline-block";                           
-    }      
-
-    if (authSession) {
-      authSession.events.on("login", () => {
-        mungeLoginArea();
-        go()
-      })
-      authSession.events.on("logout", () => {
-        mungeLoginArea();
-        webIdArea.innerHTML = "public user";
-        go()
-      })
-      authSession.events.on("sessionRestore", (url) => {
-        mungeLoginArea();
-        go()
-      })
-    }
-    mungeLoginArea();
-});
-</script>
-</head>
-<body>
-  <header id="PageHeader" role="banner" class="header-mash">
-    SolidOS Databrowser
-    <div class="input-row" id="inputArea">
-        Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
-    </div>
-  </header>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
-    <div class="user-row">
-      As user <span id="webId">&lt;public user></span> 
-      <span id="loginButtonArea"></span>
-    </div>
-
-    <section
-          id="OutlineView"
-          class="outline-view"
-          aria-label="Resource browser"
-    >
-      <table id="outline" style="width: 100%"></table>
-    </section>
-
-    <section
-        id="GlobalDashboard"
-        class="global-dashboard"
-        aria-label="Dashboard"
-        hidden
-    >
-    </section>
-
-  </main>
-
-  <footer id="PageFooter" role="contentinfo"></footer>
-  <style>
-    .header-mash {
-      padding:1em !important;
-      background-color:#ccbbbb !important;
-    }
-    .input-row {
-    }
-    .browser-main {
-      margin-top: 5.5rem !important;
-    }
-    .user-row {
-      padding-top: 1.5em;
-      margin-left:1em;
-    }
-    #loginButtonArea input {
-      display:inline-block;
-      margin:0.25em !important;
-      padding:0.25em !important;
-    }
-    #webId {
-      display:inline-block;
-      padding-top:0.6em;
-      padding-bottom:0.6em;
-    }
-    #uriField, .uri-field {
-      font-size:100%;
-      min-width:25em;
-      padding:0.5em;
-      width:70%;
-      margin-top:0.6em !important;
-    }
-
-    /* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
-    div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
-    div[style*="min-width: 400px"][style*="box-shadow"],
-    div[style*="z-index : 10"],
-    div[style*="z-index: 10"] {
-      z-index: 2147483647 !important;
-      top: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
-      bottom: 0 !important;
-      justify-content: center !important;
-      align-items: center !important;
-    }
-
-  </style>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html id="docHTML">
+<head>
+  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+  <script>
+    // Suppress harmless ResizeObserver loop errors that block the UI
+    window.addEventListener('error', function(e) {
+      if (e.message && e.message.includes('ResizeObserver loop')) {
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+    }, true);
+  </script>
+  <link type="text/css" rel="stylesheet" href="mash.css" />
+  <script type="text/javascript" src="mashlib.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const authn = SolidLogic.authn
+    const authSession = SolidLogic.authSession
+    const store = SolidLogic.store
+    const dom = document
+    // Disable cross-site proxy - modern Solid servers support CORS
+    // $rdf.Fetcher.crossSiteProxyTemplate = self.origin + '/xss?uri={uri}'
+    const uri = window.location.href
+    window.document.title = 'SolidOS Web App: ' + uri
+    const outliner = panes.getOutliner(dom) //function from solid-panes
+
+    function go (event) {
+      let uri = $rdf.uri.join(uriField.value, window.location.href)
+
+      const params = new URLSearchParams(location.search)
+      params.set('uri', uri);
+      window.history.replaceState({}, '', `${location.origin}${location.pathname}?${params}`);
+
+      var subject = $rdf.sym(uri);
+      outliner.GotoSubject(subject, true, undefined, true, undefined);
+      mungeLoginArea();
+    }
+
+    const uriField = dom.getElementById('uriField')
+    const goButton = dom.getElementById('goButton')
+    const loginButtonArea = document.getElementById("loginButtonArea");
+    const webIdArea = dom.getElementById('webId')
+    const banner = dom.getElementById('inputArea')
+    const pageHeader = dom.getElementById('PageHeader')
+
+    function updateHeaderOffset () {
+      if (!pageHeader) return
+      const headerHeight = Math.ceil(pageHeader.getBoundingClientRect().height)
+      document.documentElement.style.setProperty('--browse-header-offset', `${headerHeight}px`)
+    }
+
+    window.addEventListener('resize', updateHeaderOffset)
+    updateHeaderOffset()
+ 
+    uriField.addEventListener('keyup', function (e) {
+      if (e.keyCode === 13) {
+        go(e)
+      }
+    }, false)
+
+    goButton.addEventListener('click', go, false);
+    let initial = new URLSearchParams(self.location.search).get("uri")
+    if (initial) {
+      uriField.value = initial
+      go()
+    }
+    async function mungeLoginArea(){
+      loginButtonArea.innerHTML="";
+      if(uriField.value) {
+        loginButtonArea.appendChild(UI.login.loginStatusBox(document, null, {}))
+      }
+      const me = authn.currentUser()
+      if (me) {       
+        const logoutButton = loginButtonArea.querySelector('input');         
+        logoutButton.value = "Logout";           
+        let displayId = `&lt;${me.value}>`;
+        webIdArea.innerHTML = displayId;
+        banner.style.backgroundColor="#bbccbb";                                                                           
+      } else {                                                                  
+        banner.style.backgroundColor="#ccbbbb";                              
+      }                                                                
+      loginButtonArea.style.display="inline-block";                           
+      updateHeaderOffset()
+    }      
+
+    if (authSession) {
+      authSession.events.on("login", () => {
+        mungeLoginArea();
+        go()
+      })
+      authSession.events.on("logout", () => {
+        mungeLoginArea();
+        webIdArea.innerHTML = "public user";
+        go()
+      })
+      authSession.events.on("sessionRestore", (url) => {
+        mungeLoginArea();
+        go()
+      })
+    }
+    mungeLoginArea();
+});
+</script>
+</head>
+<body>
+  <header id="PageHeader" role="banner" class="header-mash">
+    SolidOS Databrowser
+    <div class="input-row" id="inputArea">
+        Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
+    </div>
+  </header>
+  <div class="user-row">
+    As user <span id="webId">&lt;public user></span> 
+    <span id="loginButtonArea"></span>
+  </div>
+  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+
+    <section
+          id="OutlineView"
+          class="outline-view"
+          aria-label="Resource browser"
+    >
+      <table id="outline" style="width: 100%"></table>
+    </section>
+
+    <section
+        id="GlobalDashboard"
+        class="global-dashboard"
+        aria-label="Dashboard"
+        hidden
+    >
+    </section>
+
+  </main>
+
+  <footer id="PageFooter" role="contentinfo"></footer>
+  <style>
+    body {
+      padding-top: calc(var(--browse-header-offset, var(--app-header-height, 3.8rem)) + 0.35rem);
+    }
+    .header-mash {
+      padding:1em !important;
+      background-color:#ccbbbb !important;
+    }
+    .input-row {
+    }
+    .browser-main {
+      margin-top: 0 !important;
+    }
+    .user-row {
+      margin-top: 0;
+      padding-top: 0.35em;
+      padding-bottom: 0.5em;
+      margin-left:1em;
+    }
+    #loginButtonArea input {
+      display:inline-block;
+      margin:0.25em !important;
+      padding:0.25em !important;
+    }
+    #webId {
+      display:inline-block;
+      padding-top:0.6em;
+      padding-bottom:0.6em;
+    }
+    #uriField, .uri-field {
+      font-size:100%;
+      min-width:25em;
+      padding:0.5em;
+      width:70%;
+      margin-top:0.6em !important;
+    }
+
+    /* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
+    div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
+    div[style*="min-width: 400px"][style*="box-shadow"],
+    div[style*="z-index : 10"],
+    div[style*="z-index: 10"] {
+      z-index: 2147483647 !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      justify-content: center !important;
+      align-items: center !important;
+    }
+
+  </style>
+
+</body>
+</html>
