chore: update css, js files

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
 

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"

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;
+  header > * {
+    display: inline-block !important;
+    vertical-align: middle;
+  }
+
+  header .logo {
+    flex: 1 1 auto !important;
     min-width: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+  }
 
-      h2 {
+  header .logo h2 {
     font-size: 14px;
   }
+
+  header nav {
+    display: none !important;
   }
 
-    nav {
-      display: none;
-    }
-
-    nav-menu,
-    channel-menu {
-      flex-shrink: 0;
-    }
+  header nav-menu,
+  header channel-menu {
+    flex: 0 0 auto !important;
   }
 
   /*

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;
   }
 }
 

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');