Improve performance slightly

1 files changed, 21 insertions, 12 deletions

diff --git a/examples/device/webusb_serial/website/style.css b/examples/device/webusb_serial/website/style.css
index 038a037c0..ee9dc73ac 100644
--- a/examples/device/webusb_serial/website/style.css
+++ b/examples/device/webusb_serial/website/style.css
@@ -1,8 +1,13 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 /* Reset default margins and make html, body full height */
 html,
 body {
   height: 100%;
-  margin: 0;
   font-family: sans-serif;
   background: #f5f5f5;
   color: #333;
@@ -23,7 +28,8 @@ body {
   flex-shrink: 0;
 }
 
-h1, h2 {
+h1,
+h2 {
   margin: 0;
 }
 
@@ -40,7 +46,8 @@ main {
 }
 
 /* Controls top row in main*/
-.controls-section, .status-section {
+.controls-section,
+.status-section {
   padding: 1rem;
   flex-shrink: 0;
   display: flex;
@@ -62,32 +69,30 @@ main {
 .column {
   flex: 1;
   padding: 1rem;
-  overflow: auto;
   display: flex;
   flex-direction: column;
 }
 
-.sender {
+.heading-with-controls {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .command-history-entry {
-  width: 100%;
+  all: unset;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  gap: 0.5rem;
   background: none;
   border: none;
   border-bottom: 1px solid #ccc;
   /* light gray line */
   padding: 0.5rem 1rem;
   margin: 0;
-  gap: 0;
   text-align: left;
   cursor: pointer;
-  font-size: 1rem;
-  color: inherit;
 }
 
 .command-history-entry:hover {
@@ -122,6 +127,9 @@ main {
   background-color: #fff;
   border-radius: 0.5rem;
   white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }
 
 .send-container {
@@ -131,7 +139,8 @@ main {
 }
 
 .send-mode-command {
-  background-color: light-gray;
+  background-color: lightgray;
+  /* light-gray */
 }
 
 .send-mode-instant {