Merge pull request #54 from phillipthelen/smaller-screens

Improve support for smaller screens

src/lib/components/StatsBar.svelte

@@ -452,5 +452,6 @@
   .stat-panel:nth-child(4),
   .stat-panel:nth-child(5) {
     flex: 0.8; /* Storage, System, and Network: less space */
+    min-width: 125px;
   }
 </style>

src/lib/components/ThemeSwitcher.svelte

@@ -64,7 +64,6 @@
           style:background={$themeStore.colors.green}
         ></div>
       </div>
-      {$themeStore.label}
     </div>
     <span class="icon">{showMenu ? "▼" : "▶"}</span>
   </button>

src/lib/components/ToolBar.svelte

@@ -46,20 +46,11 @@
     <div class="search-box">
       <div class="search-input-wrapper">
         <input
-          type="text"
+          type="search"
           placeholder="Search processes"
           bind:value={searchTerm}
           class="search-input"
         />
-        {#if searchTerm}
-          <button
-            class="btn-clear"
-            on:click={() => (searchTerm = "")}
-            title="Clear search"
-          >
-            Clear
-          </button>
-        {/if}
       </div>
     </div>
     <div class="toolbar-group">
@@ -98,10 +89,10 @@
         >
           «
         </button>
-        <span class="page-info">
+        <div class="page-info">
-          Page {currentPage} of {totalPages}
+          <span>Page {currentPage} of {totalPages}</span>
           <span class="results-info">({totalResults} processes)</span>
-        </span>
+        </div>
         <button
           class="btn-page"
           disabled={currentPage === totalPages}
@@ -118,6 +109,7 @@
         </button>
       </div>
     </div>
+    <div class="toolbar-spacer"></div>
 
     <div class="column-toggle">
       <button
@@ -306,8 +298,13 @@
     font-size: 12px;
     color: var(--subtext0);
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .page-info span {
+    display: block;
   }
 
   .results-info {