Fix styling

docs/_includes/global/customizer.html

@@ -1,4 +1,4 @@
-<div id="bulma-customizer-app"></div>
+<div id="bulma-customizer-app" class="is-hidden-mobile"></div>
 <div id="scope" class="is-hidden">
   <div class="breadcrumb"></div>
   <div class="card"></div>

docs/_layouts/default.html

@@ -19,16 +19,16 @@
 
     {% include global/about.html %}
 
-    <script defer src="{{ site.url }}/assets/vendor/clipboard-2.0.11.min.js"></script>
-    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-    <script defer type="text/javascript"> docsearch({
+    <script src="{{ site.url }}/assets/vendor/clipboard-2.0.11.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script type="text/javascript"> docsearch({
       apiKey: 'cb93c14bebd90678e789c946d95ea94d',
       indexName: 'bulma',
       inputSelector: '#algoliaSearch',
       debug: false // Set debug to true if you want to inspect the dropdown
     });
     </script>
-    <script defer src="{{ site.url }}/assets/javascript/main.js"></script>
+    <script src="{{ site.url }}/assets/javascript/main.js"></script>
     {% include global/customizer.html %}
   </body>
 </html>

docs/_react/bulma-customizer/src/App.jsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
-import "../../../../css/bulma.css";
+// import "../../../../css/bulma.css";
 import "./App.css";
 import cn from "./App.module.css";
 
@@ -515,14 +515,14 @@ function App() {
   const exportClass = classNames({
     [cn.button]: true,
     "is-hidden": !context.isOpen,
-    "button is-primary is-outlined": !context.showExport,
+    button: !context.showExport,
     "button is-primary": context.showExport,
   });
 
   const buttonClass = classNames({
     [cn.button]: true,
     "button is-primary": !context.isOpen,
-    "button is-danger is-outlined": context.isOpen,
+    button: context.isOpen,
   });
 
   return (
@@ -573,11 +573,15 @@ function App() {
 
         <div className={cn.buttons}>
           <button className={exportClass} onClick={handleExport}>
-            Export
+            <i className="fa-solid fa-code"></i>
+            <span>Export</span>
           </button>
 
           <button className={buttonClass} onClick={handleOpening}>
+            <i className="fa-solid fa-palette"></i>
+            <span>
               {context.isOpen ? "Close Customizer" : "Open Customizer"}
+            </span>
           </button>
         </div>
       </div>

docs/_react/bulma-customizer/src/App.module.css

@@ -48,3 +48,7 @@
   right: 1rem;
   position: fixed;
 }
+
+.button {
+  gap: 0.5rem;
+}