Only use full width submit on smaller screens

babybuddy/static_src/scss/forms.scss

@@ -0,0 +1,74 @@
+// Baby Buddy form style customizations.
+
+// BB form fields do not follow typical BS4 style that enables this display.
+.invalid-feedback {
+    display: block;
+}
+
+// Disable hover effect on buttons (used for checkbox buttons).
+.btn-no-hover {
+    &:hover {
+        color: inherit;
+        background-color: inherit;
+        border-color: inherit;
+    }
+}
+
+.boolean-label {
+    pointer-events: none;
+}
+
+// Set default text color for datetime picker.
+.bootstrap-datetimepicker-widget {
+    color: $gray-400;
+}
+
+// Datetime picker input styles.
+.input-group {
+    &.datetimepicker {
+
+        // Make calendar icon large and use the primary theme color.
+        .input-group-text {
+            background: none;
+            border: 0;
+            color: theme-color('primary');
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        // Style readonly input to look less like an input element.
+        .datetimepicker-input {
+            &[readonly] {
+                background: none;
+                border: 0;
+                color: $white;
+                cursor: pointer;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+// Use a full width, fixed button on smaller screens.
+.submit-primary {
+    display: block;
+    border-radius: 0;
+    width: 100%;
+    padding: 1rem;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1030;
+}
+
+@include media-breakpoint-up(md) {
+    // Restore regular inline button on larger screens.
+    .submit-primary {
+        display: inline-block;
+        border-radius: $btn-border-radius;
+        width: auto;
+        padding: 0.25rem 0.5rem;
+        position: relative;
+    }
+}

babybuddy/static_src/scss/global.scss

@@ -16,55 +16,6 @@
     left: auto; // Reset the default from `.dropdown-menu`
 }
 
-// BB form fields do not follow typical BS4 style that enables this display.
-.invalid-feedback {
-    display: block;
-}
-
-// Disable hover effect on buttons (used for checkbox buttons).
-.btn-no-hover {
-    &:hover {
-        color: inherit;
-        background-color: inherit;
-        border-color: inherit;
-    }
-}
-
-.boolean-label {
-    pointer-events: none;
-}
-
-// Set default text color for datetime picker.
-.bootstrap-datetimepicker-widget {
-    color: $gray-400;
-}
-
-// Datetime picker input styles.
-.input-group {
-    &.datetimepicker {
-
-        // Make calendar icon large and use the primary theme color.
-        .input-group-text {
-            background: none;
-            border: 0;
-            color: theme-color('primary');
-            padding-left: 0;
-            padding-right: 0;
-        }
-
-        // Style readonly input to look less like an input element.
-        .datetimepicker-input {
-            &[readonly] {
-                background: none;
-                border: 0;
-                color: $white;
-                cursor: pointer;
-                font-weight: bold;
-            }
-        }
-    }
-}
-
 // PullToRefresh elements.
 .ptr--ptr {
     background: theme-color('dark');

babybuddy/templates/babybuddy/form.html

@@ -8,6 +8,6 @@
                 {% include 'babybuddy/form_field.html' %}
             </div>
         {% endfor %}
-        <button type="submit" class="btn btn-primary btn-block btn-lg p-3 fixed-bottom">{% trans "Submit" %}</button>
+        <button type="submit" class="submit-primary btn btn-primary btn-lg">{% trans "Submit" %}</button>
     </form>
 </div>

static/babybuddy/css/app.7b6351aa0d8d.css

@@ -7679,19 +7679,6 @@ body.tempusdominus-bootstrap-datetimepicker-widget-day-click {
 .input-group [data-toggle="datetimepicker"] {
   cursor: pointer; }
 
-.breadcrumb {
-  margin-bottom: 0; }
-
-.btn-xs {
-  padding: 0.2rem 0.12rem;
-  font-size: 0.75rem;
-  line-height: 1;
-  border-radius: 0.2rem; }
-
-.dropdown-menu-right {
-  right: 0;
-  left: auto; }
-
 .invalid-feedback {
   display: block; }
 
@@ -7720,6 +7707,38 @@ body.tempusdominus-bootstrap-datetimepicker-widget-day-click {
   cursor: pointer;
   font-weight: bold; }
 
+.submit-primary {
+  display: block;
+  border-radius: 0;
+  width: 100%;
+  padding: 1rem;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030; }
+
+@media (min-width: 768px) {
+  .submit-primary {
+    display: inline-block;
+    border-radius: 0.25rem;
+    width: auto;
+    padding: 0.25rem 0.5rem;
+    position: relative; } }
+
+.breadcrumb {
+  margin-bottom: 0; }
+
+.btn-xs {
+  padding: 0.2rem 0.12rem;
+  font-size: 0.75rem;
+  line-height: 1;
+  border-radius: 0.2rem; }
+
+.dropdown-menu-right {
+  right: 0;
+  left: auto; }
+
 .ptr--ptr {
   background: #343a40; }
   .ptr--ptr .ptr--text, .ptr--ptr .ptr--icon {

static/babybuddy/css/app.css

@@ -7679,19 +7679,6 @@ body.tempusdominus-bootstrap-datetimepicker-widget-day-click {
 .input-group [data-toggle="datetimepicker"] {
   cursor: pointer; }
 
-.breadcrumb {
-  margin-bottom: 0; }
-
-.btn-xs {
-  padding: 0.2rem 0.12rem;
-  font-size: 0.75rem;
-  line-height: 1;
-  border-radius: 0.2rem; }
-
-.dropdown-menu-right {
-  right: 0;
-  left: auto; }
-
 .invalid-feedback {
   display: block; }
 
@@ -7720,6 +7707,38 @@ body.tempusdominus-bootstrap-datetimepicker-widget-day-click {
   cursor: pointer;
   font-weight: bold; }
 
+.submit-primary {
+  display: block;
+  border-radius: 0;
+  width: 100%;
+  padding: 1rem;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030; }
+
+@media (min-width: 768px) {
+  .submit-primary {
+    display: inline-block;
+    border-radius: 0.25rem;
+    width: auto;
+    padding: 0.25rem 0.5rem;
+    position: relative; } }
+
+.breadcrumb {
+  margin-bottom: 0; }
+
+.btn-xs {
+  padding: 0.2rem 0.12rem;
+  font-size: 0.75rem;
+  line-height: 1;
+  border-radius: 0.2rem; }
+
+.dropdown-menu-right {
+  right: 0;
+  left: auto; }
+
 .ptr--ptr {
   background: #343a40; }
   .ptr--ptr .ptr--text, .ptr--ptr .ptr--icon {