From 82a76ad12466cec3f4d901f0a30477462345679a Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@thelen.space>
Date: Fri, 8 Nov 2024 12:19:22 +0100
Subject: [PATCH 1/4] give stat-panel a min width

---
 src/lib/components/StatsBar.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/StatsBar.svelte b/src/lib/components/StatsBar.svelte
index ed765d8..326a5f8 100644
--- a/src/lib/components/StatsBar.svelte
+++ b/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>

From 15d5084aafa82b1feb632b6c4ee7c23f6263e18a Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@thelen.space>
Date: Fri, 8 Nov 2024 12:19:42 +0100
Subject: [PATCH 2/4] Hide theme name in theme switcher button

---
 src/lib/components/ThemeSwitcher.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
index 04521e7..4a51259 100644
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/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>

From 9acd2963f7bed67ce050be1f892df741edb79cd7 Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@thelen.space>
Date: Fri, 8 Nov 2024 12:20:56 +0100
Subject: [PATCH 3/4] use system search bar cancel instead of dedicated button

---
 src/lib/components/ToolBar.svelte | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/lib/components/ToolBar.svelte b/src/lib/components/ToolBar.svelte
index 797e262..1816410 100644
--- a/src/lib/components/ToolBar.svelte
+++ b/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">

From 8490e6d45cf44ce8c6a987cfecc3714aae193a7c Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@thelen.space>
Date: Fri, 8 Nov 2024 12:21:44 +0100
Subject: [PATCH 4/4] make pagination more compact and centered

---
 src/lib/components/ToolBar.svelte | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ToolBar.svelte b/src/lib/components/ToolBar.svelte
index 1816410..70c5f7c 100644
--- a/src/lib/components/ToolBar.svelte
+++ b/src/lib/components/ToolBar.svelte
@@ -89,10 +89,10 @@
         >
           «
         </button>
-        <span class="page-info">
-          Page {currentPage} of {totalPages}
+        <div class="page-info">
+          <span>Page {currentPage} of {totalPages}</span>
           <span class="results-info">({totalResults} processes)</span>
-        </span>
+        </div>
         <button
           class="btn-page"
           disabled={currentPage === totalPages}
@@ -109,6 +109,7 @@
         </button>
       </div>
     </div>
+    <div class="toolbar-spacer"></div>
 
     <div class="column-toggle">
       <button
@@ -297,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 {