humanode-network · Cyber-preacher · Feb 11, 2026 · Feb 11, 2026
diff --git a/src/app/AppShell.css b/src/app/AppShell.css
@@ -118,35 +118,20 @@
   .app-shell > .sidebar {
     width: 100%;
   }
-}
 
-@media (max-width: 720px) {
-  .sidebar {
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
+  .workspace {
+    padding: 1.25rem 1rem 2.25rem;
     gap: 1rem;
-    padding: 1.25rem 1.25rem;
-  }
-
-  .sidebar__brand {
-    justify-content: space-between;
-    padding: 0.65rem 0.9rem;
-  }
-
-  .sidebar__nav {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
   }
 }
 
 @media (max-width: 600px) {
   .workspace {
-    padding: 2rem 1.25rem 3rem;
+    padding: 1rem 0.75rem 2rem;
   }
 
   .app-page {
-    padding: 1.5rem;
+    padding: 1.1rem;
+    border-radius: 14px;
   }
 }
diff --git a/src/app/AppSidebar.css b/src/app/AppSidebar.css
@@ -19,6 +19,7 @@
   padding: 0.65rem 0.9rem;
   border-radius: 12px;
   width: 100%;
+  position: relative;
 }
 
 .sidebar__auth {
@@ -137,6 +138,33 @@
   gap: 0.5rem;
 }
 
+.sidebar__mobilePanel {
+  display: contents;
+}
+
+.sidebar__mobileToggle {
+  display: none;
+  border: 1px solid var(--sidebar-border);
+  background: transparent;
+  color: var(--sidebar-text);
+  border-radius: 10px;
+  width: 2.25rem;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.sidebar__mobileToggle:hover {
+  border-color: var(--sidebar-primary-dim);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.sidebar__mobileToggleIcon {
+  width: 18px;
+  height: 18px;
+}
+
 .sidebar__link {
   background: transparent;
   border: 1px solid transparent;
@@ -202,3 +230,49 @@
     animation: none;
   }
 }
+
+@media (max-width: 960px) {
+  .sidebar {
+    gap: 0.75rem;
+    padding: 0.95rem 1rem;
+    border-right: 0;
+    border-bottom: 1px solid var(--sidebar-border);
+  }
+
+  .sidebar__brand {
+    justify-content: flex-start;
+    gap: 0.5rem;
+    padding: 0.35rem 0;
+  }
+
+  .sidebar__logo {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+  }
+
+  .sidebar__mobileToggle {
+    display: inline-flex;
+    margin-left: auto;
+  }
+
+  .sidebar__mobilePanel,
+  .sidebar__nav {
+    display: none;
+  }
+
+  .sidebar.sidebar--mobileOpen .sidebar__mobilePanel {
+    display: block;
+  }
+
+  .sidebar.sidebar--mobileOpen .sidebar__nav {
+    display: flex;
+    margin-top: 0.25rem;
+    padding-bottom: 0.35rem;
+    border-bottom: 1px solid var(--sidebar-border);
+  }
+
+  .sidebar__link > span {
+    white-space: normal;
+  }
+}
diff --git a/src/app/AppSidebar.tsx b/src/app/AppSidebar.tsx
@@ -1,5 +1,5 @@
-import { NavLink } from "react-router";
-import { useState } from "react";
+import { NavLink, useLocation } from "react-router";
+import { useEffect, useState } from "react";
 import "./AppSidebar.css";
 import clsx from "clsx";
 import {
@@ -17,6 +17,8 @@ import {
   User,
   Users,
   FileText,
+  Menu,
+  X,
 } from "lucide-react";
 import { AuthSidebarPanel } from "@/app/auth/AuthContext";
 
@@ -36,6 +38,12 @@ type NavItem = {
 
 const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [location.pathname]);
 
   const navItems: NavItem[] = [
     { to: "/app/feed", label: "Feed", Icon: Activity },
@@ -52,15 +60,38 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
   ];
 
   return (
-    <aside className="sidebar">
+    <aside className={clsx("sidebar", mobileNavOpen && "sidebar--mobileOpen")}>
       <div className="sidebar__brand">
         <span>Vortex</span>
         <span className="sidebar__logo" aria-hidden="true"></span>
+        <button
+          type="button"
+          className="sidebar__mobileToggle"
+          onClick={() => setMobileNavOpen((open) => !open)}
+          aria-expanded={mobileNavOpen}
+          aria-controls="sidebar-nav"
+          aria-label={
+            mobileNavOpen ? "Close navigation menu" : "Open navigation menu"
+          }
+        >
+          {mobileNavOpen ? (
+            <X className="sidebar__mobileToggleIcon" aria-hidden="true" />
+          ) : (
+            <Menu className="sidebar__mobileToggleIcon" aria-hidden="true" />
+          )}
+        </button>
+      </div>
+      <div className="sidebar__mobilePanel">
+        <AuthSidebarPanel />
       </div>
-      <AuthSidebarPanel />
-      <nav className="sidebar__nav" aria-label="Primary">
+      <nav id="sidebar-nav" className="sidebar__nav" aria-label="Primary">
         {navItems.map(({ to, label, Icon }) => (
-          <NavLink key={to} className={navClass} to={to}>
+          <NavLink
+            key={to}
+            className={navClass}
+            to={to}
+            onClick={() => setMobileNavOpen(false)}
+          >
             <Icon className="sidebar__icon" aria-hidden="true" />
             <span>{label}</span>
           </NavLink>
@@ -78,11 +109,19 @@ const AppSidebar: React.FC<React.PropsWithChildren> = ({ children }) => {
         </button>
         {settingsOpen && (
           <div className="pt-1 pl-4">
-            <NavLink className={nestedNavClass} to="/app/settings">
+            <NavLink
+              className={nestedNavClass}
+              to="/app/settings"
+              onClick={() => setMobileNavOpen(false)}
+            >
               <SlidersHorizontal className="sidebar__icon" aria-hidden="true" />
               <span>General</span>
             </NavLink>
-            <NavLink className={nestedNavClass} to="/app/profile">
+            <NavLink
+              className={nestedNavClass}
+              to="/app/profile"
+              onClick={() => setMobileNavOpen(false)}
+            >
               <User className="sidebar__icon" aria-hidden="true" />
               <span>My profile</span>
             </NavLink>

diff --git a/src/components/StatGrid.tsx b/src/components/StatGrid.tsx
@@ -37,7 +37,7 @@ export const StatGrid: React.FC<StatGridProps> = ({ items }) => {
           <Kicker
             as="dt"
             align="center"
-            className="text-[0.65rem] leading-tight whitespace-nowrap"
+            className="text-[0.65rem] leading-tight sm:whitespace-nowrap"
           >
             {item.label}
           </Kicker>

diff --git a/src/pages/MyGovernance.tsx b/src/pages/MyGovernance.tsx
@@ -387,7 +387,7 @@ const MyGovernance: React.FC = () => {
             </Surface>
             <div className="flex flex-col items-center justify-center gap-3 px-2">
               <Kicker align="center">Progress</Kicker>
-              <div className="relative h-2 w-48 overflow-hidden rounded-full bg-muted/30">
+              <div className="relative h-2 w-full max-w-48 overflow-hidden rounded-full bg-muted/30">
                 <div
                   className="h-full rounded-full bg-primary"
                   style={{ width: `${overallPercent}%` }}
@@ -565,7 +565,7 @@ const MyGovernance: React.FC = () => {
                 badge={
                   <Badge
                     size="md"
-                    className="border-none bg-(--primary-dim) px-4 py-1 text-center text-sm font-bold tracking-wide whitespace-nowrap text-primary uppercase"
+                    className="border-none bg-(--primary-dim) px-4 py-1 text-center text-sm font-bold tracking-wide text-primary uppercase"
                   >
                     M × {chamber.multiplier}
                   </Badge>
@@ -576,7 +576,7 @@ const MyGovernance: React.FC = () => {
                       asChild
                       size="md"
                       variant="primary"
-                      className="w-56"
+                      className="w-full sm:w-56"
                     >
                       <Link to={`/app/chambers/${chamber.id}`}>Enter</Link>
                     </Button>

diff --git a/src/pages/chambers/Chamber.tsx b/src/pages/chambers/Chamber.tsx
@@ -663,7 +663,7 @@ const Chamber: React.FC = () => {
           <CardContent className="space-y-4">
             {cmData ? (
               <>
-                <div className="grid gap-3 sm:grid-cols-4">
+                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                   {[
                     { label: "LCM", value: cmData.totals.lcm },
                     { label: "MCM", value: cmData.totals.mcm },
@@ -710,7 +710,7 @@ const Chamber: React.FC = () => {
                         {cmData.topContributors.slice(0, 5).map((entry) => (
                           <li
                             key={entry.address}
-                            className="flex items-center justify-between"
+                            className="flex flex-wrap items-center justify-between gap-2"
                           >
                             <span className="truncate">{entry.address}</span>
                             <span className="text-xs text-muted">
@@ -919,15 +919,15 @@ const Chamber: React.FC = () => {
               onChange={(event) => setGovernorSearch(event.target.value)}
               placeholder="Search governors"
             />
-            <ul className="max-h-[360px] space-y-2 overflow-auto pr-1 text-sm text-text">
+            <ul className="max-h-none space-y-2 overflow-visible pr-0 text-sm text-text lg:max-h-[360px] lg:overflow-auto lg:pr-1">
               {filteredGovernors.map((gov) => (
                 <Surface
                   as="li"
                   key={gov.id}
                   variant="panelAlt"
                   radius="xl"
                   shadow="control"
-                  className="flex items-center justify-between px-3 py-2"
+                  className="flex flex-col gap-2 px-3 py-2 sm:flex-row sm:items-center sm:justify-between"
                 >
                   <div>
                     <p className="font-semibold">{gov.name}</p>
@@ -1137,7 +1137,10 @@ const Chamber: React.FC = () => {
                 ))
               )}
             </div>
-            <form onSubmit={handleChatSend} className="flex gap-2">
+            <form
+              onSubmit={handleChatSend}
+              className="flex flex-col gap-2 sm:flex-row"
+            >
               <Input
                 value={chatMessage}
                 onChange={(event) => setChatMessage(event.target.value)}

diff --git a/src/pages/chambers/Chambers.tsx b/src/pages/chambers/Chambers.tsx
@@ -208,14 +208,19 @@ const Chambers: React.FC = () => {
             badge={
               <Badge
                 size="md"
-                className="border-none bg-(--primary-dim) px-4 py-1 text-center text-sm font-bold tracking-wide whitespace-nowrap text-primary uppercase"
+                className="border-none bg-(--primary-dim) px-4 py-1 text-center text-sm font-bold tracking-wide text-primary uppercase"
               >
                 M × {chamber.multiplier}
               </Badge>
             }
             footer={
               <div className="flex w-full justify-center">
-                <Button asChild size="md" variant="primary" className="w-56">
+                <Button
+                  asChild
+                  size="md"
+                  variant="primary"
+                  className="w-full sm:w-56"
+                >
                   <Link to={`/app/chambers/${chamber.id}`}>Enter</Link>
                 </Button>
               </div>