Improve usage of screen estate

Author: sebromero

css/buttons.css

@@ -46,6 +46,11 @@ button.secondary:hover {
     background-color: rgba(0, 92, 95, .2);
 }
 
+button.secondary.small {
+    padding: 2px 12px;
+    font-size: 0.7rem;
+}
+
 button.link {
     color: var(--main-control-color) !important;
     text-decoration: none;

css/main.css

@@ -31,6 +31,11 @@ h1 {
     margin-bottom: 20px;
 }
 
+h2 {
+    font-size: 1.2em;
+    font-weight: 600;
+}
+
 /* Input field styling */
 input[type="text"], input[type="search"] {
     font-family: 'Open Sans', sans-serif;   

css/status-bar.css

@@ -6,7 +6,6 @@
     background-color: rgba(0, 0, 0, 0.75);
     color: white;
     padding: 0px 20px; /* Set initial padding to 0 for smooth slide */
-    margin-top: 10px;
     max-height: 0;
     opacity: 0;
     transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.3s ease;

css/style.css

@@ -52,11 +52,6 @@
     margin: 0 auto;
 }
 
-.section-title {
-    font-size: 1.2em;
-    font-weight: 600;
-}
-
 .divider {
     border: none;
     border-top: 2px solid #C9D2D2;

index.html

@@ -24,14 +24,13 @@ <h1>📦 MicroPython Package Installer</h1>
 
             <!-- Board Selection -->
             <div class="container" id="device-selection">
-                <div class="section-title">Detected Boards</div>
+                <div class="container"><h2>Detected Boards</h2><button id="reload-link" class="secondary small">Reload</button></div>
                 <div class="item-selection-list"></div>
-                <div id="reload-link-container"><a id="reload-link">Reload</a></div>
             </div>
 
             <!-- Search Field -->
             <div class="container" id="search-container">
-                <div class="section-title">Packages</div>
+                <h2>Packages</h2>
                 <div id="search">
                     <span id="search-icon">
                         <!-- Magnifying glass SVG -->