From ea00c81e0d0c371f923354ca22bb9ea7ecd90c32 Mon Sep 17 00:00:00 2001
From: Federico Capoano <f.capoano@openwisp.io>
Date: Thu, 5 Feb 2026 13:49:52 -0300
Subject: [PATCH] [chores:ui] Fixed spacing of deploy buttons

---
 content/pages/index.html  |  6 +++---
 css/theme.scss            | 11 ++++++++++-
 theme/templates/base.html |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/content/pages/index.html b/content/pages/index.html
index 32a00e2..3a67011 100644
--- a/content/pages/index.html
+++ b/content/pages/index.html
@@ -43,17 +43,17 @@ <h1 class="title is-spaced is-size-3-mobile">
           </p>
           <p class="button-container">
             <a
-              class="button with-text is-orange"
+              class="button with-text is-orange is-block-mobile"
               href="{filename}features.html"
             >
               <span class="fas fa-bolt"></span>
               <span>Features</span>
             </a>
-            <a class="button with-text is-white" href="{filename}demo.html">
+            <a class="button with-text is-white is-block-mobile" href="{filename}demo.html">
               <i class="fas fa-regular fa-circle-play"></i>
               <span>Try the Demo</span>
             </a>
-            <a class="button with-text is-inverted" href="{filename}deploy.html">
+            <a class="button with-text is-inverted is-block-mobile" href="{filename}deploy.html">
               <i class="fas fa-cloud-arrow-up"></i>
               <span>Deploy</span>
             </a>
diff --git a/css/theme.scss b/css/theme.scss
index d15a898..68d0d26 100644
--- a/css/theme.scss
+++ b/css/theme.scss
@@ -69,13 +69,14 @@ $weight-semibold: 600;
   $control-border-width: 1px,
   $input-shadow: none,
   $navbar-breakpoint: 800px,
-  $tablet: 450px,
   $footer-padding: 1.5rem,
   $media-spacing: 0.7rem,
   $media-spacing-large: 1.1rem
 );
 
 @use "sass:color";
+@use "bulma/sass/utilities/mixins" as bulma-mixins;
+@use "bulma/sass/utilities/initial-variables" as bulma-vars;
 @use "@fortawesome/fontawesome-free/scss/variables" with (
   $font-path: "../webfonts",
   $font-display: swap
@@ -466,6 +467,14 @@ body {
 p.button-container .button {
   margin: 5px;
 }
+// Adjustment for the main call to action buttons in
+// home page which look terrible on mobile
+p.button-container .button.is-block-mobile {
+  @include bulma-mixins.until(bulma-vars.$tablet) {
+    margin: 1rem auto;
+    max-width: 55%;
+  }
+}
 #top-feature-container {
   min-height: var(--km);
 }
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 10b3b3c..5c5310a 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -161,7 +161,7 @@
                     <span>Demo</span>
                   </a>
                   <a
-                    class="button is-inverted with-text"
+                    class="button is-inverted with-text ml-1"
                     href="{{ SITEURL }}/deploy/"
                   >
                     <span class="fas fa-cloud-arrow-up"></span>