From e21f5ab6c7b131e260383310ae1a4ffd7879c99f Mon Sep 17 00:00:00 2001
From: cpq <sergey.lyubka@cesanta.com>
Date: Sun, 26 Apr 2026 09:16:05 +0100
Subject: [PATCH] style nits

---
 .../device-dashboard/web_root/index.html      |   8 +-
 tutorials/device-dashboard/web_root/style.css | 131 ++++--------------
 2 files changed, 32 insertions(+), 107 deletions(-)

diff --git a/tutorials/device-dashboard/web_root/index.html b/tutorials/device-dashboard/web_root/index.html
index d9f45ad9..b05ef373 100644
--- a/tutorials/device-dashboard/web_root/index.html
+++ b/tutorials/device-dashboard/web_root/index.html
@@ -132,7 +132,7 @@
               <span class="metric-status metric-status-good">ok</span>
             </div>
           </article>
-          <article class="metric-tile note">
+          <article class="metric-tile note" style="min-width: 15rem;">
             <div>
             To tailor this dashboard to your firmware, follow
               <a target="_blank" href="https://mongoose.ws/docs/guides/web-dashboard-guide/#dashboard-example">this guide</a>
@@ -187,7 +187,7 @@
       <section id="settings" class="tab-panel" role="tabpanel" aria-labelledby="tab-settings" hidden>
         <div class="row">
 
-          <div class="panel" style="width: 22rem;">
+          <div class="panel">
             <div class="panel-title">Device settings</div>
             <div class="panel-body">
               <div class="field">
@@ -250,7 +250,7 @@
       <section id="firmware" class="tab-panel" role="tabpanel" aria-labelledby="tab-firmware" hidden></section>
       <section id="files" class="tab-panel" role="tabpanel" aria-labelledby="tab-files" hidden>
         <div class="row">
-          <div class="panel" style="width: 40rem;">
+          <div class="panel">
             <div class="panel-title">
               <span>
                 <span>File Manager</span>
@@ -304,7 +304,7 @@
             </div>
           </div>
 
-          <div class="note" style="max-width: 40em;">
+          <div class="note">
             <p>The two default files are fake - you can delete them</p>
             <p>However the manager works - you can upload new files. They
               are uploaded to /tmp/ directory on the device.
diff --git a/tutorials/device-dashboard/web_root/style.css b/tutorials/device-dashboard/web_root/style.css
index 05d28b03..c75bf533 100644
--- a/tutorials/device-dashboard/web_root/style.css
+++ b/tutorials/device-dashboard/web_root/style.css
@@ -139,9 +139,6 @@ a, a:visited, a:link { text-decoration: none; }
   border: 1px solid rgb(186, 230, 253);
 }
 
-.nav-link:hover {
-}
-
 .nav-icon {
   height: 1rem;
   width: 1rem;
@@ -252,12 +249,6 @@ a, a:visited, a:link { text-decoration: none; }
   border-color: #fca5a5;
 }
 
-.metric-status-info {
-  color: #075985;
-  background: #e0f2fe;
-  border-color: #7dd3fc;
-}
-
 .tab-panel[hidden] {
   display: none;
 }
@@ -312,12 +303,12 @@ a, a:visited, a:link { text-decoration: none; }
   transition: border-color 0.15s ease;
 }
 
-.field-input.edited, .select.edited, .slider.edited>* {
+.field-input.edited {
   border-color: #00500040 !important;
   background: #00ff0020;
 }
 
-.field-input.error, .select.error, .slider.error>* {
+.field-input.error {
   border-color: #50000040;
   background: #ff000020;
 }
@@ -341,14 +332,6 @@ a, a:visited, a:link { text-decoration: none; }
   pointer-events: none;
 }
 
-.select:disabled,
-.select.disabled {
-  color: #cbd5e1;
-  border-color: #e2e8f0;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
 /* ── Buttons ─────────────────────────────────────── */
 
 .btn {
@@ -427,6 +410,21 @@ a, a:visited, a:link { text-decoration: none; }
   gap: 1rem;
 }
 
+#files .row {
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+
+#files .panel {
+  flex: 0 0 40rem;
+  width: 40rem;
+}
+
+#files .note {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
 .detail-row {
   display: grid;
   grid-template-columns: 1fr 300px;
@@ -461,35 +459,6 @@ a, a:visited, a:link { text-decoration: none; }
   flex-shrink: 0;
 }
 
-.file-content {
-  width: 100%;
-  min-height: calc(100vh - 7rem);
-  margin-top: 0.5rem;
-  padding: 1rem 1.15rem;
-  overflow: auto;
-  color: #dbeafe;
-  background:
-    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98)),
-    #0f172a;
-  border: 1px solid rgba(51, 65, 85, 0.9);
-  border-radius: 1rem;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    0 2px 6px rgba(15, 23, 42, 0.1),
-    0 12px 32px rgba(15, 23, 42, 0.14);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.82rem;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  word-break: break-word;
-  tab-size: 2;
-}
-
-.file-content:empty::before {
-  content: "Waiting for events...";
-  color: #64748b;
-}
-
 /* File manager */
 
 .file-list {
@@ -566,31 +535,11 @@ a, a:visited, a:link { text-decoration: none; }
 
 /* Chart */
 
-.chart-panel {
-  /* column flex already set by .panel */
-}
-
-.chart-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 180px;
-}
-
 #chart {
   width: 100%;
   height: 12rem;
 }
 
-.chart-x-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 0.6rem;
-  color: #94a3b8;
-  font-size: 0.72rem;
-  font-weight: 500;
-}
-
 .chart-legend {
   display: flex;
   align-items: center;
@@ -617,41 +566,6 @@ a, a:visited, a:link { text-decoration: none; }
 .legend-dot-color2 { background: rgba(237, 126, 23, 1); }
 .legend-dot-color1 { background: rgba(5, 141, 199, 1) }
 
-.controls-panel {
-  /* column flex already set by .panel */
-}
-
-.controls-list {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.control-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 0;
-  border-bottom: 1px solid #e8eef5;
-}
-
-.control-row:last-child {
-  border-bottom: none;
-}
-
-.control-name {
-  font-size: 0.88rem;
-  font-weight: 700;
-  color: #18314f;
-  margin-bottom: 0.15rem;
-}
-
-.control-desc {
-  font-size: 0.75rem;
-  color: #7d94ac;
-}
-
 .toggle {
   position: relative;
   width: 2.75rem;
@@ -697,6 +611,17 @@ a, a:visited, a:link { text-decoration: none; }
   .detail-row {
     grid-template-columns: 1fr;
   }
+
+  #files .row {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  #files .panel,
+  #files .note {
+    flex: 1 1 auto;
+    width: 100%;
+  }
 }
 
 @media (max-width: 900px) {