🌈 style(settings): css footer

octoprint_klipper/static/css/klipper.css

@@ -110,12 +110,13 @@ ul#klipper-settings {
 
 #settings_plugin_klipper {
    height: 100%;
+   height: -webkit-fill-available;
 }
 
 /* UIcustomizer fix */
 
 body.UICResponsiveMode #settings_dialog_content {
-	height: calc(100% - 40px);
+	height: calc(100% - 60px);
 	margin-right: -18px;
 	margin-top: 50px;
 	width: calc(100% - 15px);
@@ -126,22 +127,23 @@ div#settings_plugin_klipper form {
    height: 100%;
 }
 
-div#settings_plugin_klipper form .tab-content {
-   height: calc(100% - 60px);
+div#settings_plugin_klipper div.tab-content {
+   height: calc(100% - 58px);
    overflow: auto;
 }
 
-div#settings_plugin_klipper form .tab-footer {
+div#settings_plugin_klipper div.tab-footer {
    height: 20px;
    width: 100%;
    top: 10px;
    position: relative;
    border-top: 1px solid #eee;
-   padding-top: 5px;
+   padding-top: 3px;
 }
 
 div#settings_plugin_klipper div.tab-content div#conf.tab-pane {
    height: 100%;
+   width: 100%;
 }
 
 div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group {
@@ -161,7 +163,7 @@ div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group
    height: calc(100% - 28px);
    width: 99%;
    width: calc(100% - 4px);
-   padding-top: 2px;
+   margin-top: 5px;
    flex: 1 1;
    overflow: auto;
 }

octoprint_klipper/static/js/klipper_settings.js

@@ -194,7 +194,7 @@ $(function() {
             vScrollBarAlwaysVisible: false,
             autoScrollEditorIntoView: true,
             showPrintMargin: false,
-            maxLines: "Infinity"
+            //maxLines: "Infinity"
         })
 
         editor.session.on('change', function(delta) {

octoprint_klipper/templates/klipper_settings.jinja2

@@ -230,7 +230,7 @@
 </div>
 <div class="tab-footer">
   <a href="https://www.paypal.com/donate/?business=7P63W664NF8LA&item_name=OctoKlipper" class="btn btn-mini" target="_blank">
-    <i class="fab fa-paypal">{{ _('Donate') }}</i>
+    <i class="fab fa-paypal"> {{ _('Donate') }}</i>
   </a>
 </div>
 </form>