From 8d88cfcd68ba5b78b9a63dc2c585c83c7b9abeac Mon Sep 17 00:00:00 2001
From: shortcutme <tamas@zeronet.io>
Date: Wed, 30 Oct 2019 02:28:37 +0100
Subject: [PATCH] Fix notification width calculation

---
 src/Ui/media/Notifications.coffee |  4 ++--
 src/Ui/media/Wrapper.css          | 10 +++++-----
 src/Ui/media/all.css              | 10 +++++-----
 src/Ui/media/all.js               |  4 ++--
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Ui/media/Notifications.coffee b/src/Ui/media/Notifications.coffee
index 7264bb2d..8898b645 100644
--- a/src/Ui/media/Notifications.coffee
+++ b/src/Ui/media/Notifications.coffee
@@ -51,13 +51,13 @@ class Notifications
 			), timeout
 
 		# Animate
-		width = Math.min(elem.outerWidth(), 580)
+		width = Math.min(elem.outerWidth() + 50, 580)
 		if not timeout then width += 20 # Add space for close button
 		if elem.outerHeight() > 55 then elem.addClass("long")
 		elem.css({"width": "50px", "transform": "scale(0.01)"})
 		elem.animate({"scale": 1}, 800, "easeOutElastic")
 		elem.animate({"width": width}, 700, "easeInOutCubic")
-		$(".body", elem).css("width": (width - 80))
+		$(".body", elem).css("width": (width - 50))
 		$(".body", elem).cssLater("box-shadow", "0px 0px 5px rgba(0,0,0,0.1)", 1000)
 
 		# Close button or Confirm button
diff --git a/src/Ui/media/Wrapper.css b/src/Ui/media/Wrapper.css
index 50598467..ecc9c935 100644
--- a/src/Ui/media/Wrapper.css
+++ b/src/Ui/media/Wrapper.css
@@ -56,11 +56,11 @@ a { color: black }
 	text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
 }
 .notification .body {
-	padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
+	padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; box-sizing: border-box;
 	background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
 }
 .notification .message-outer { display: table-row }
-.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; }
+.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; padding-right: 20px; text-align: right; }
 .notification.long .body { padding-top: 10px; padding-bottom: 10px }
 .notification .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; }
 
@@ -221,8 +221,8 @@ a { color: black }
 /* Small screen */
 @media screen and (max-width: 600px) {
     .notification .message { white-space: normal; }
-    .notification .buttons { padding-right: 22px; }
+    .notification .buttons { padding-right: 22px; padding-right: 40px; }
     .notification .button { white-space: nowrap; }
-    .notification { margin: 0px }
-    .notifications { right: 0px }
+    .notification { margin: 0px; }
+    .notifications { right: 0px; max-width: 80%; }
 }
diff --git a/src/Ui/media/all.css b/src/Ui/media/all.css
index bb7c0782..897a6e12 100644
--- a/src/Ui/media/all.css
+++ b/src/Ui/media/all.css
@@ -60,11 +60,11 @@ a { color: black }
 	text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
 }
 .notification .body {
-	padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
+	padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ;
 	background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
 }
 .notification .message-outer { display: table-row }
-.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; }
+.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; padding-right: 20px; text-align: right; }
 .notification.long .body { padding-top: 10px; padding-bottom: 10px }
 .notification .message { display: table-cell; vertical-align: middle; max-width: 500px; white-space: normal; }
 
@@ -260,8 +260,8 @@ a { color: black }
 /* Small screen */
 @media screen and (max-width: 600px) {
     .notification .message { white-space: normal; }
-    .notification .buttons { padding-right: 22px; }
+    .notification .buttons { padding-right: 22px; padding-right: 40px; }
     .notification .button { white-space: nowrap; }
-    .notification { margin: 0px }
-    .notifications { right: 0px }
+    .notification { margin: 0px; }
+    .notifications { right: 0px; max-width: 80%; }
 }
diff --git a/src/Ui/media/all.js b/src/Ui/media/all.js
index 1186c7e1..b94be436 100644
--- a/src/Ui/media/all.js
+++ b/src/Ui/media/all.js
@@ -835,7 +835,7 @@ $.extend( $.easing,
           };
         })(this)), timeout);
       }
-      width = Math.min(elem.outerWidth(), 580);
+      width = Math.min(elem.outerWidth() + 50, 580);
       if (!timeout) {
         width += 20;
       }
@@ -901,6 +901,7 @@ $.extend( $.easing,
 
 }).call(this);
 
+
 /* ---- Wrapper.coffee ---- */
 
 
@@ -1983,7 +1984,6 @@ $.extend( $.easing,
 
 }).call(this);
 
-
 /* ---- WrapperZeroFrame.coffee ---- */