[#1904] simplified default mail template styles

CHANGELOG.md

@@ -8,14 +8,19 @@
   When changing **from single to multiple** all already inserted single values are converted to an array.
   When changing **from multiple to single** only the last item of the already inserted array items is kept.
 
-- Changed the cost/round factor of the auth records bcrypt hash generation from 13 to 12 since several users complained about the slow authWithPassword responses on lower spec hardware.
+- Changed the cost/round factor of bcrypt hash generation from 13 to 12 since several users complained about the slow authWithPassword responses on lower spec hardware.
-  _The change will affect only new users. Depending on the demand, we may make it configurable from the auth options._
+  _The change will affect only new users. Depending on the demand, we might make it configurable from the auth options._
+
+- Simplified the default mail template styles to allow more control over the template layout ([#1904](https://github.com/pocketbase/pocketbase/issues/1904)).
+
+- **!** Registered the `RemoveTrailingSlash` middleware only for the `/api/*` routes since it is causing issues with subpath file serving endpoints ([#2072](https://github.com/pocketbase/pocketbase/issues/2072)).
 
 - **!** Changed the request logs `method` value to UPPERCASE, eg. "get" => "GET" ([#1956](https://github.com/pocketbase/pocketbase/discussions/1956)).
 
+
 ## v0.13.4
 
-- Removed eager unique collection name check to allow lazy evaluation during bulk import.
+- Removed eager unique collection name check to support lazy validation during bulk import.
 
 
 ## v0.13.3

mails/templates/layout.go

@@ -19,12 +19,7 @@ const Layout = `
             font-family: Source Sans Pro, sans-serif, emoji;
         }
         body {
-            padding: 30px 20px;
+            padding: 20px 30px;
-        }
-        p {
-            display: block;
-            margin: 10px 0;
-            font-family: Source Sans Pro, sans-serif, emoji;
         }
         strong {
             font-weight: bold;
@@ -32,6 +27,11 @@ const Layout = `
         em, i {
             font-style: italic;
         }
+        p {
+            display: block;
+            margin: 10px 0;
+            font-family: inherit;
+        }
         small {
             font-size: 12px;
             line-height: 16px;
@@ -50,6 +50,12 @@ const Layout = `
         .hidden {
             display: none !important;
         }
+        .fallback-link {
+            display: none !important;
+            word-break: break-all;
+            font-size: 11px;
+            color:  #666f75;
+        }
         .btn {
             display: inline-block;
             vertical-align: top;
@@ -58,54 +64,22 @@ const Layout = `
             color: #fff !important;
             background: #16161a !important;
             text-decoration: none !important;
-            line-height: 45px;
+            line-height: 40px;
-            width: 100%;
+            width: auto;
-            max-width: 100%;
+            min-width: 150px;
             text-align: center;
-            padding: 0 30px;
+            padding: 0 20px;
-            margin: 10px 0;
+            margin: 5px 0;
             font-family: Source Sans Pro, sans-serif, emoji;;
             font-size: 14px;
             font-weight: bold;
-            border-radius: 3px;
+            border-radius: 6px;
             box-sizing: border-box;
         }
-        .wrapper {
-            display: block;
-            width: 460px;
-            max-width: 100%;
-            margin: auto;
-            font-family: inherit;
-        }
-        .content {
-            display: block;
-            width: 100%;
-            padding: 10px 20px;
-            font-family: inherit;
-            box-sizing: border-box;
-            background: #fff;
-            border-radius: 10px;
-            -webkit-box-shadow: 0px 2px 30px 0px rgb(0,0,0,0.05);
-            -moz-box-shadow: 0px 2px 30px 0px rgb(0,0,0,0.05);
-            box-shadow: 0px 2px 30px 0px rgb(0,0,0,0.05);
-        }
-        .footer {
-            display: block;
-            width: 100%;
-            text-align: center;
-            margin: 10px 0;
-            color:  #666f75;
-            font-size: 11px;
-            font-family: inherit;
-        }
     </style>
 </head>
 <body>
-    <div class="wrapper">
+    {{template "content" .}}
-        <div class="content">
-            {{template "content" .}}
-        </div>
-    </div>
 </body>
 </html>
 `