Merge remote-tracking branch 'origin/master' into mathiash98/clone-monitor

.stylelintrc

@@ -10,5 +10,6 @@
         "color-function-notation": "legacy",
         "shorthand-property-no-redundant-values": null,
         "color-hex-length": null,
+        "declaration-block-no-redundant-longhand-properties": null
     }
 }

src/pages/EditMonitor.vue

@@ -615,10 +615,10 @@
                                 </template>
                             </template>
                         </div>
+                    </div>
 
-                        <div class="col-md-12 mt-5 mb-1">
+                    <div class="fixed-bottom-bar p-3">
-                            <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
+                        <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
-                        </div>
                     </div>
                 </div>
             </form>
@@ -1057,11 +1057,33 @@ message HealthCheckResponse {
 </script>
 
 <style lang="scss" scoped>
+    @import "../assets/vars.scss";
+
+    $padding: 20px;
+
     .shadow-box {
-        padding: 20px;
+        padding-top: $padding;
+        padding-bottom: 0;
+        padding-right: $padding;
+        padding-left: $padding;
     }
 
     textarea {
         min-height: 200px;
     }
+
+    .fixed-bottom-bar {
+        position: sticky;
+        bottom: 0;
+        margin-left: -$padding;
+        margin-right: -$padding;
+        z-index: 100;
+        background-color: rgba(white, 0.2);
+        backdrop-filter: blur(2px);
+        border-radius: 0 0 10px 10px;
+
+        .dark & {
+            background-color: rgba($dark-header-bg, 0.9);
+        }
+    }
 </style>