Design compatibility with smaller window sizes

front/index.html

@@ -17,6 +17,7 @@
       }
       .connection-management {
         display: flex;
+        flex-direction: row;
         gap: 5px;
         margin-bottom: 5px;
       }
@@ -39,6 +40,24 @@
         flex-grow: 1;
       }
 
+      .actionbuttons {
+        display: flex;
+        gap: 5px;
+        flex-grow: 1
+      }
+
+      #port-select {
+        min-width: 0px;
+      }
+
+      #sender {
+        min-width: 0px;
+      }
+
+      #console-input {
+        min-width: 0px;
+      }
+
       .p-console {
         width: 100%;
       }
@@ -92,6 +111,11 @@
         background-color: blue;
         color: white;
       }
+      @media screen and (max-width: 380px) {
+        .connection-management {
+          flex-direction: column;
+        }
+      }
     </style>
   </head>
 
@@ -100,6 +124,7 @@
       <select id="port-select">
         <option value="" disabled>No ports found</option>
       </select>
+      <div class="actionbuttons">
       <button id="rescan" onclick="listSerialPorts()">Rescan</button>
       <button id="open-button" onclick="openConnection()">Open</button>
       <button
@@ -109,7 +134,9 @@
       >
         Close
       </button>
+      <div style="flex-grow: 1;"></div>
       <button id="clear-button" onclick="clearConsole()">Clear console</button>
+      </div>
     </div>
     <div id="inner-console"></div>
     <div class="console-management">