Improve details pane of the sidebar (#106)

Author: whimboo

src/content/sidebar.css

@@ -240,10 +240,14 @@ td:last-child {
 }
 
 .tab {
-  overflow: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .tab button {
+  flex-shrink: 0;
   margin: 5px;
   min-width: 79px;
   background-color: inherit;
@@ -254,6 +258,7 @@ td:last-child {
   border: 1px solid transparent;
   border-radius: 4px;
   color: var(--text-primary);
+  white-space: nowrap;
 }
 
 .tab button:hover {
@@ -281,15 +286,33 @@ td:last-child {
   font-weight: normal;
 }
 
-#details-left p {
-  width: calc(50% - 1em);
+#details-grid {
+  display: grid;
+  grid-template-columns: 10em auto;
+  gap: 5px 10px;
+  align-items: center;
+  margin-top: 1em;
+  width: 95%;
+}
+
+#details-grid .label {
+  font-weight: bold;
+  text-align: left;
+  white-space: nowrap;
 }
 
-#details-left p span {
-  float: right;
+#details-grid div:not(.label):not(hr) {
   text-align: right;
 }
 
+#details-grid hr {
+  grid-column: 1 / -1;
+  width: 100%;
+  margin: 5px 0;
+  border-style: solid none none none;
+  border-color: var(--border-primary);
+}
+
 #details #cpu-kernel {
   color: var(--color-cpu-kernel);
 }

src/content/sidebar.html

@@ -40,13 +40,18 @@ <h1>cpu load (#: <span id="cpu-count"></span>)</h1>
         </div>
 
         <div id="details" class="tabcontent" active="true">
-          <div id="details-left">
-            <p>CPU:<span id="cpu-total"></span></p>
-            <p>Idle: <span id="cpu-idle"></span></p>
+          <div id="details-grid">
+            <div class="label">CPU:</div>
+            <div id="cpu-total"></div>
+            <div class="label">Idle:</div>
+            <div id="cpu-idle"></div>
             <hr />
-            <p># Processes: <span id="process-count"></span></p>
-            <p># Threads: <span id="thread-count"></span></p>
-            <p># Pages: <span id="page-count"></span></p>
+            <div class="label"># Processes:</div>
+            <div id="process-count"></div>
+            <div class="label"># Threads:</div>
+            <div id="thread-count"></div>
+            <div class="label"># Pages:</div>
+            <div id="page-count"></div>
           </div>
         </div>