From 50f248df9b5f78f8aae0385cf3bfde9d3b24741c Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Tue, 10 Feb 2026 11:47:07 +0100
Subject: [PATCH] UI polish: update grid-uikit, filter checkbox, and date
 wrapping

- Update @intechstudio/grid-uikit to 1.20260206.1447
- Replace filter toggle button with MeltCheckbox in BrowserLayout
- Fix modified date wrapping in ConfigCardDisplay

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package-lock.json                   |  8 +++----
 package.json                        |  2 +-
 src/routes/BrowserLayout.svelte     | 37 ++++++++++++-----------------
 src/routes/ConfigCardDisplay.svelte |  2 ++
 4 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 609128f..545122e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@intechstudio/grid-protocol": "1.20250305.1735",
-        "@intechstudio/grid-uikit": "1.20251020.1904",
+        "@intechstudio/grid-uikit": "^1.20260206.1447",
         "@melt-ui/svelte": "^0.86.6",
         "firebase": "^12.2.1",
         "marked": "^12.0.2",
@@ -1252,9 +1252,9 @@
       "integrity": "sha512-pAnLVlkiAk8zz+yBc99TdeUiH2wXPuNwWb0ZBgqcqtcIT8bUh7zMY2s7ll0KQsI9HsVP/3IwB2htNHCyNIWCsg=="
     },
     "node_modules/@intechstudio/grid-uikit": {
-      "version": "1.20251020.1904",
-      "resolved": "https://registry.npmjs.org/@intechstudio/grid-uikit/-/grid-uikit-1.20251020.1904.tgz",
-      "integrity": "sha512-5dFv1i3pWSnKFgbyVf/0pWHJ7vBCWdfYe+I+c+N84+a6g5uhc60EJnlr3Y1vh3TwQLjnlvsxJhLp+h4mTvoSyA==",
+      "version": "1.20260206.1447",
+      "resolved": "https://registry.npmjs.org/@intechstudio/grid-uikit/-/grid-uikit-1.20260206.1447.tgz",
+      "integrity": "sha512-nYBE1IvL0ZnlMMsdc5WEtKWX5d0gdS9G64t4bPVqxk90Lv4tMLipPQaJNNeM02MEEYz2U5jQOImzTPpHfsDxJw==",
       "dependencies": {
         "@melt-ui/svelte": "^0.86.6",
         "color-convert": "^2.0.1",
diff --git a/package.json b/package.json
index 510a633..d8bf74a 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
   "type": "module",
   "dependencies": {
     "@intechstudio/grid-protocol": "1.20250305.1735",
-    "@intechstudio/grid-uikit": "1.20251020.1904",
+    "@intechstudio/grid-uikit": "^1.20260206.1447",
     "@melt-ui/svelte": "^0.86.6",
     "firebase": "^12.2.1",
     "marked": "^12.0.2",
diff --git a/src/routes/BrowserLayout.svelte b/src/routes/BrowserLayout.svelte
index 3a68cae..6287051 100644
--- a/src/routes/BrowserLayout.svelte
+++ b/src/routes/BrowserLayout.svelte
@@ -11,7 +11,7 @@
   } from "../lib/configmanager/ConfigManager";
   import { tooltip } from "../lib/actions/tooltip";
   import ConfigCardBrowser from "./ConfigCardBrowser.svelte";
-  import { MoltenPushButton } from "@intechstudio/grid-uikit";
+  import { MeltCheckbox, MoltenPushButton } from "@intechstudio/grid-uikit";
   import configuration from "../../Configuration.json";
 
   let selectedConfigIndex: number | undefined = undefined;
@@ -24,10 +24,6 @@
 
   let isSearchSortingShows = false;
 
-  function filterShowHide() {
-    isSearchSortingShows = !isSearchSortingShows;
-  }
-
   onMount(async () => {
     configManager = createConfigManager({
       next: (newConfigs) => {
@@ -55,22 +51,19 @@
 </script>
 
 <div id="main">
-  <div class="filter-toggle">
-    <button on:click={filterShowHide}>
-      {#if isSearchSortingShows}
-        Hide Filters
-      {:else}
-        Show Filters
-      {/if}
-    </button>
-  </div>
-
-  {#if isSearchSortingShows}
-    <div class="filters-row">
+  <div class="filters-row">
+    <div class="filter-checkbox">
+      <MeltCheckbox
+        bind:target={isSearchSortingShows}
+        title="Show Filters"
+        style="transparent"
+      />
+    </div>
+    {#if isSearchSortingShows}
       <Filter />
       <Sorter />
-    </div>
-  {/if}
+    {/if}
+  </div>
 
   <div class="configs-grid">
     {#each filteredConfigs as config, index (config.id)}
@@ -118,9 +111,9 @@
     overflow: hidden;
   }
 
-  /* Filter toggle button */
-  .filter-toggle {
-    display: flex;
+  .filter-checkbox {
+    flex-shrink: 0;
+    white-space: nowrap;
   }
 
   /* Filters row */
diff --git a/src/routes/ConfigCardDisplay.svelte b/src/routes/ConfigCardDisplay.svelte
index 2736f1b..5bec184 100644
--- a/src/routes/ConfigCardDisplay.svelte
+++ b/src/routes/ConfigCardDisplay.svelte
@@ -212,12 +212,14 @@
   .created-by {
     font-size: 0.75rem;
     display: flex;
+    flex-wrap: wrap;
     flex-grow: 1;
     justify-content: space-between;
   }
 
   .modified-date {
     color: var(--foreground-muted);
+    white-space: nowrap;
   }
 
   .icon-button {