From af62d24868e0097547006d5d719b0533d5b68db8 Mon Sep 17 00:00:00 2001
From: retoor <retoor@molodetz.nl>
Date: Sat, 3 Jan 2026 18:03:13 +0100
Subject: [PATCH] chore: update css, js files

---
 CHANGELOG.md                     |  8 +++++++
 pyproject.toml                   |  2 +-
 src/snek/static/base.css         | 41 ++++++++++++++++++--------------
 src/snek/static/channel-menu.css |  3 ++-
 src/snek/static/nav-menu.js      | 16 ++++++++++++-
 5 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a6fc40..46b3ca0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,14 @@
 
 
 
+
+
+## Version 1.24.0 - 2026-01-03
+
+update css, js files
+
+**Changes:** 3 files, 60 lines
+**Languages:** CSS (44 lines), JavaScript (16 lines)
 
 ## Version 1.23.0 - 2026-01-03
 
diff --git a/pyproject.toml b/pyproject.toml
index 6e3a78d..657ad78 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "Snek"
-version = "1.23.0"
+version = "1.24.0"
 readme = "README.md"
 #license = { file = "LICENSE", content-type="text/markdown" }
 description = "Snek Chat Application by Molodetz"
diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index 58fe7c8..6eeae81 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -502,30 +502,35 @@ a {
     flex-direction: row !important;
     flex-wrap: nowrap !important;
     align-items: center !important;
-    justify-content: space-between;
+    justify-content: space-between !important;
     gap: 8px;
     padding: 10px 12px;
+  }
 
-    .logo {
-      flex: 1;
-      min-width: 0;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
+  header > * {
+    display: inline-block !important;
+    vertical-align: middle;
+  }
 
-      h2 {
-        font-size: 14px;
-      }
-    }
+  header .logo {
+    flex: 1 1 auto !important;
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 
-    nav {
-      display: none;
-    }
+  header .logo h2 {
+    font-size: 14px;
+  }
 
-    nav-menu,
-    channel-menu {
-      flex-shrink: 0;
-    }
+  header nav {
+    display: none !important;
+  }
+
+  header nav-menu,
+  header channel-menu {
+    flex: 0 0 auto !important;
   }
 
   /*
diff --git a/src/snek/static/channel-menu.css b/src/snek/static/channel-menu.css
index d653394..52f9e70 100644
--- a/src/snek/static/channel-menu.css
+++ b/src/snek/static/channel-menu.css
@@ -7,7 +7,8 @@ channel-menu {
 
 @media (max-width: 768px) {
   channel-menu {
-    display: inline-block;
+    display: inline-flex !important;
+    align-items: center;
   }
 }
 
diff --git a/src/snek/static/nav-menu.js b/src/snek/static/nav-menu.js
index 535d11d..4c89ab6 100644
--- a/src/snek/static/nav-menu.js
+++ b/src/snek/static/nav-menu.js
@@ -10,7 +10,8 @@ class NavMenu extends HTMLElement {
     const style = document.createElement('style');
     style.textContent = `
       :host {
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         position: relative;
       }
 
@@ -118,6 +119,19 @@ class NavMenu extends HTMLElement {
       .menu-item.hidden {
         display: none;
       }
+
+      @media (max-width: 768px) {
+        .menu-panel {
+          position: fixed;
+          top: 50px;
+          right: 8px;
+          left: 8px;
+          margin-top: 0;
+          min-width: unset;
+          max-height: calc(100vh - 70px);
+          overflow-y: auto;
+        }
+      }
     `;
 
     const container = document.createElement('div');