Repository: shlinkio/shlink (language: php)

Issue:
Decouple error templates from bootstrap
The templates used for not found routes and invalid short urls when no special redirect is configured, load an old version of bootstrap CSS.

Remove this and include the basic CSS required to keep them looking more or less the same.


Discussion / hints:

Fix patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2807ddc01..6f7911191 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com), and this
 * *Nothing*
 
 ### Changed
-* *Nothing*
+* [#2406](https://github.com/shlinkio/shlink/issues/2406) Remove references to bootstrap from error templates, and instead inline the very minimum required styles.
 
 ### Deprecated
 * [#2408](https://github.com/shlinkio/shlink/issues/2408) Generating QR codes via `/{short-code}/qr-code` is now deprecated and will be removed in Shlink 5.0. Use the equivalent capability from web clients instead.
diff --git a/module/Core/templates/404.html b/module/Core/templates/404.html
index 93e6fb641..d9d972bbe 100644
--- a/module/Core/templates/404.html
+++ b/module/Core/templates/404.html
@@ -5,13 +5,17 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
         <link rel="shortcut icon" href="/favicon.ico">
         <style>
-            html, body {height: 100%}
-            .app {height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column;}
+            *, :before, :after {box-sizing: border-box;}
+            html, body {
+                margin: 0; padding: 0; height: 100%; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            }
             p {margin-bottom: 20px;}
-            body {text-align: center;}
+            hr {margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, .1);}
+            .app {min-height: 100%; display: flex; align-items: center; justify-content: center; flex-flow: column;}
+            .container {width: 100%; max-width: 1140px; padding: 0 20px;}
         </style>
     </head>
     <body>
diff --git a/module/Core/templates/invalid-short-code.html b/module/Core/templates/invalid-short-code.html
index 61c5a804c..094b0db57 100644
--- a/module/Core/templates/invalid-short-code.html
+++ b/module/Core/templates/invalid-short-code.html
@@ -5,13 +5,17 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
         <link rel="shortcut icon" href="/favicon.ico">
         <style>
-            html, body {height: 100%}
-            .app {height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column;}
+            *, :before, :after {box-sizing: border-box;}
+            html, body {
+                margin: 0; padding: 0; height: 100%; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            }
             p {margin-bottom: 20px;}
-            body {text-align: center;}
+            hr {margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, .1);}
+            .app {min-height: 100%; display: flex; align-items: center; justify-content: center; flex-flow: column;}
+            .container {width: 100%; max-width: 1140px; padding: 0 20px;}
         </style>
     </head>
     <body>


Test patch: