diff --git a/floethereum/index.html b/floethereum/index.html
index ee4653a..44a909a 100644
--- a/floethereum/index.html
+++ b/floethereum/index.html
@@ -11,7 +11,7 @@
-
+
@@ -92,66 +92,65 @@
-
+
@@ -178,7 +177,7 @@
expirationDays: 60,
}
-
+
@@ -259,7 +258,7 @@
if (mode === 'error') {
console.error(message)
}
-
+
// Ensure notification drawer element exists and is fully initialized
const notificationDrawer = getRef("notification_drawer");
if (!notificationDrawer || typeof notificationDrawer.push !== 'function') {
@@ -271,7 +270,7 @@
window._pendingNotifications.push({ message, mode, options, icon });
return null;
}
-
+
return notificationDrawer.push(message, { icon, ...options });
}
// displays a popup for asking permission. Use this instead of JS confirm
@@ -440,8 +439,8 @@
else
page = path
this.state = { page, wildcards, lastPage: this.lastPage, params }
-
-
+
+
if (queryString) {
params = new URLSearchParams(queryString)
this.state.params = Object.fromEntries(params)
@@ -460,37 +459,37 @@
}
}
-//Moving notification draw so that it does not overlap the menu item
-(function placeToasts() {
- const drawer = document.getElementById('notification_drawer');
- const panel = drawer?.shadowRoot?.querySelector('.notification-panel');
- if (!panel) return;
+ //Moving notification draw so that it does not overlap the menu item
+ (function placeToasts() {
+ const drawer = document.getElementById('notification_drawer');
+ const panel = drawer?.shadowRoot?.querySelector('.notification-panel');
+ if (!panel) return;
- const apply = () => {
- if (window.matchMedia('(min-width: 640px)').matches) {
- // Desktop: offset from left navbar
- Object.assign(panel.style, {
- left: 'calc(10rem + 1rem)',
- bottom: '1rem',
- top: 'auto',
- right: '1rem', // optional, lets long toasts wrap before content edge
- zIndex: '1000'
- });
- } else {
- // Mobile: keep top-right or top-left as you prefer
- Object.assign(panel.style, {
- left: '0.5rem',
- top: '0.5rem',
- right: '0.5rem',
- bottom: 'auto',
- zIndex: '1000'
- });
- }
- };
+ const apply = () => {
+ if (window.matchMedia('(min-width: 640px)').matches) {
+ // Desktop: top-right corner
+ Object.assign(panel.style, {
+ left: 'auto',
+ top: '1rem',
+ right: '1rem',
+ bottom: 'auto',
+ zIndex: '1000'
+ });
+ } else {
+ // Mobile: top-center
+ Object.assign(panel.style, {
+ left: '0.5rem',
+ top: '0.5rem',
+ right: '0.5rem',
+ bottom: 'auto',
+ zIndex: '1000'
+ });
+ }
+ };
- apply();
- window.addEventListener('resize', apply);
-})();
+ apply();
+ window.addEventListener('resize', apply);
+ })();
-