From 15a17992e180ea70b2c7c656cafa1cc81e7ac9fe Mon Sep 17 00:00:00 2001
From: Cyber-preacher <davidkavazi@gmail.com>
Date: Thu, 12 Feb 2026 02:32:19 +0400
Subject: [PATCH] (ui)Vortex web mobile version: complete responsive reflow
 across governance surfaces

harden mobile navigation in AppSidebar/AppShell (toggle, close-on-route, mobile panel behavior)
reflow data-dense pages for small screens: MyGovernance, Proposals, ProposalPP, ProposalChamber, Feed
fix chamber/faction/human-node mobile layouts (stacked actions, wrapped badges/tiles, overflow-safe rows)
enforce mobile-first rendering behavior where needed (Human Nodes auto-list under <768px)
preserve desktop parity while removing horizontal clipping/overflow on phone widths
---
 src/app/AppShell.css                    | 25 ++-------
 src/app/AppSidebar.css                  | 74 +++++++++++++++++++++++++
 src/app/AppSidebar.tsx                  | 55 +++++++++++++++---
 src/components/StatGrid.tsx             |  2 +-
 src/pages/MyGovernance.tsx              |  6 +-
 src/pages/chambers/Chamber.tsx          | 13 +++--
 src/pages/chambers/Chambers.tsx         |  9 ++-
 src/pages/factions/Faction.tsx          | 16 +++---
 src/pages/factions/FactionCreate.tsx    |  2 +-
 src/pages/factions/Factions.tsx         |  2 +-
 src/pages/feed/Feed.tsx                 | 14 ++---
 src/pages/human-nodes/HumanNode.tsx     |  4 +-
 src/pages/human-nodes/HumanNodes.tsx    | 35 +++++++++---
 src/pages/profile/Profile.tsx           |  6 +-
 src/pages/proposals/ProposalChamber.tsx | 16 +++---
 src/pages/proposals/ProposalPP.tsx      |  4 +-
 src/pages/proposals/Proposals.tsx       | 20 ++-----
 17 files changed, 211 insertions(+), 92 deletions(-)

diff --git a/src/app/AppShell.css b/src/app/AppShell.css
index 868a78d..391b40e 100644
--- 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
index e98c02f..401e326 100644
--- 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
index 5cd15aa..e62f038 100644
--- 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
index 1b19270..a1596cf 100644
--- 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
index 7bcbf1c..174586c 100644
--- 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
index 9f9972d..065aebd 100644
--- 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,7 +919,7 @@ 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"
@@ -927,7 +927,7 @@ const Chamber: React.FC = () => {
                   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
index fa64e6f..c7e8f48 100644
--- 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>
diff --git a/src/pages/factions/Faction.tsx b/src/pages/factions/Faction.tsx
index 927160e..da60ea6 100644
--- a/src/pages/factions/Faction.tsx
+++ b/src/pages/factions/Faction.tsx
@@ -183,7 +183,7 @@ const Faction: React.FC = () => {
             <h1 className="text-xl font-semibold text-text">{faction.name}</h1>
             <p className="text-sm text-muted">{faction.description}</p>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2 sm:justify-end">
             <Badge variant="outline">Members: {faction.members}</Badge>
             <Badge variant="outline">Votes: {faction.votes}</Badge>
             {viewerRole ? (
@@ -193,7 +193,7 @@ const Faction: React.FC = () => {
         </CardContent>
       </Card>
 
-      <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2">
         {canJoin ? (
           <Button
             size="sm"
@@ -281,7 +281,7 @@ const Faction: React.FC = () => {
               onChange={(event) => setEditTagsText(event.target.value)}
               placeholder="Tags, comma separated"
             />
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               <Button
                 size="sm"
                 disabled={
@@ -363,7 +363,7 @@ const Faction: React.FC = () => {
                         Joined {new Date(membership.joinedAt).toLocaleString()}
                       </p>
                     </div>
-                    <div className="flex items-center gap-2">
+                    <div className="flex flex-wrap items-center gap-2">
                       {canManageMembers ? (
                         <Select
                           value={membership.role}
@@ -411,7 +411,7 @@ const Faction: React.FC = () => {
                   key={channel.id}
                   className="rounded-md border border-border px-3 py-2 text-sm"
                 >
-                  <div className="flex items-center justify-between gap-2">
+                  <div className="flex flex-wrap items-center justify-between gap-2">
                     <div>
                       <p className="font-semibold text-text">{channel.title}</p>
                       <p className="text-xs text-muted">
@@ -504,7 +504,7 @@ const Faction: React.FC = () => {
                   </div>
                   <p className="text-xs text-muted">{initiative.intent}</p>
                   {isFounderAdmin ? (
-                    <div className="mt-2 flex items-center gap-2">
+                    <div className="mt-2 flex flex-wrap items-center gap-2">
                       <Select
                         value={initiative.status}
                         onChange={(event) =>
@@ -598,7 +598,7 @@ const Faction: React.FC = () => {
                 key={thread.id}
                 className="space-y-2 rounded-md border border-border px-3 py-2"
               >
-                <div className="flex items-center justify-between gap-2">
+                <div className="flex flex-wrap items-center justify-between gap-2">
                   <div>
                     <p className="text-sm font-semibold text-text">
                       {thread.title}
@@ -635,7 +635,7 @@ const Faction: React.FC = () => {
                   </div>
                 ) : null}
                 {canPost ? (
-                  <div className="flex items-center gap-2">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
                     <Input
                       value={replyByThread[thread.id] ?? ""}
                       onChange={(event) =>
diff --git a/src/pages/factions/FactionCreate.tsx b/src/pages/factions/FactionCreate.tsx
index 1c47570..44c0cb7 100644
--- a/src/pages/factions/FactionCreate.tsx
+++ b/src/pages/factions/FactionCreate.tsx
@@ -114,7 +114,7 @@ const FactionCreate: React.FC = () => {
           </Button>
         </CardHeader>
         <CardContent className="space-y-5">
-          <div className="grid gap-2 sm:grid-cols-3">
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
             {[
               { n: 1, label: "Identity" },
               { n: 2, label: "Access & goals" },
diff --git a/src/pages/factions/Factions.tsx b/src/pages/factions/Factions.tsx
index 140b200..f5b9468 100644
--- a/src/pages/factions/Factions.tsx
+++ b/src/pages/factions/Factions.tsx
@@ -221,7 +221,7 @@ const Factions: React.FC = () => {
                   </p>
                   <p className="text-xs text-muted">{faction.description}</p>
                 </div>
-                <div className="grid min-w-[180px] grid-rows-1 justify-items-start gap-2 text-xs text-muted">
+                <div className="flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted">
                   <Badge variant="outline">Members: {faction.members}</Badge>
                 </div>
                 <Button asChild size="sm">
diff --git a/src/pages/feed/Feed.tsx b/src/pages/feed/Feed.tsx
index f8295ea..8711eae 100644
--- a/src/pages/feed/Feed.tsx
+++ b/src/pages/feed/Feed.tsx
@@ -552,7 +552,7 @@ const Feed: React.FC = () => {
                       </span>
                     </Surface>
 
-                    <div className="grid gap-3 md:grid-cols-2">
+                    <div className="grid gap-3 sm:grid-cols-2">
                       <StageDataTile
                         title="Attention quorum"
                         description={`Engaged ${poolStats.engaged} / ${poolStats.engagedNeeded} governors`}
@@ -618,7 +618,7 @@ const Feed: React.FC = () => {
                       </div>
                     </Surface>
 
-                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                       <StageDataTile
                         title="Voting quorum"
                         description={`Governors ${chamberStats.engaged} / ${chamberStats.activeGovernors} (needs ${chamberStats.quorumNeeded})`}
@@ -683,7 +683,7 @@ const Feed: React.FC = () => {
                       </div>
                     </Surface>
 
-                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                       {formationPage.stageData.slice(0, 3).map((entry, idx) => (
                         <StageDataTile
                           key={`${item.id}-formation-${idx}`}
@@ -716,7 +716,7 @@ const Feed: React.FC = () => {
                       </div>
                     </Surface>
 
-                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                       <StageDataTile
                         title="Evidence"
                         description="Items submitted"
@@ -778,7 +778,7 @@ const Feed: React.FC = () => {
                       <p className="mt-1 text-sm text-muted">{item.summary}</p>
                     </Surface>
 
-                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                       <StageDataTile
                         title="Type"
                         description="Where it lives"
@@ -812,7 +812,7 @@ const Feed: React.FC = () => {
                     <p className="text-sm font-semibold text-text">
                       Stage data
                     </p>
-                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                       {item.stageData.map((entry) => (
                         <StageDataTile
                           key={entry.title}
@@ -831,7 +831,7 @@ const Feed: React.FC = () => {
                 item.stage !== "thread" ? (
                   <div className="space-y-2">
                     <p className="text-sm font-semibold text-text">Key stats</p>
-                    <ul className="grid gap-2 text-sm text-text md:grid-cols-2">
+                    <ul className="grid gap-2 text-sm text-text sm:grid-cols-2">
                       {item.stats.map((stat) => (
                         <DashedStatItem
                           key={stat.label}
diff --git a/src/pages/human-nodes/HumanNode.tsx b/src/pages/human-nodes/HumanNode.tsx
index 271c1e6..0ea93da 100644
--- a/src/pages/human-nodes/HumanNode.tsx
+++ b/src/pages/human-nodes/HumanNode.tsx
@@ -170,7 +170,9 @@ const HumanNode: React.FC = () => {
             />
           </div>
           <div className="flex flex-col items-center text-center">
-            <h1 className="text-3xl font-semibold text-text">{headerTitle}</h1>
+            <h1 className="text-2xl font-semibold text-text sm:text-3xl">
+              {headerTitle}
+            </h1>
             <div className="flex flex-wrap items-center justify-center gap-2 text-xs text-muted">
               {showShortBadge ? (
                 <Badge variant="muted">{shortAddress(profile.id)}</Badge>
diff --git a/src/pages/human-nodes/HumanNodes.tsx b/src/pages/human-nodes/HumanNodes.tsx
index 0db8ba1..06875c8 100644
--- a/src/pages/human-nodes/HumanNodes.tsx
+++ b/src/pages/human-nodes/HumanNodes.tsx
@@ -65,6 +65,20 @@ const HumanNodes: React.FC = () => {
   });
   const { sortBy, tierFilter, statusFilter, cmRange } = filters;
   const [view, setView] = useState<"cards" | "list">("cards");
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 767px)");
+    const sync = () => {
+      const mobile = mediaQuery.matches;
+      setIsMobileViewport(mobile);
+      if (mobile) setView("list");
+    };
+    sync();
+    mediaQuery.addEventListener("change", sync);
+    return () => mediaQuery.removeEventListener("change", sync);
+  }, []);
 
   useEffect(() => {
     let active = true;
@@ -161,6 +175,8 @@ const HumanNodes: React.FC = () => {
     cmRange,
   ]);
 
+  const effectiveView = isMobileViewport ? "list" : view;
+
   return (
     <div className="flex flex-col gap-6">
       <PageHint pageId="human-nodes" />
@@ -236,13 +252,13 @@ const HumanNodes: React.FC = () => {
         </CardHeader>
         <CardContent className="space-y-3 pt-0">
           <div className="flex flex-wrap items-center justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <Label htmlFor="sort" className="font-semibold whitespace-nowrap">
+            <div className="flex w-full flex-col items-start gap-2 sm:w-auto sm:flex-row sm:items-center">
+              <Label htmlFor="sort" className="font-semibold">
                 Sort by
               </Label>
               <Select
                 id="sort"
-                className="h-10 min-w-[180px]"
+                className="h-10 w-full sm:min-w-[180px]"
                 value={sortBy}
                 onChange={(e) =>
                   setFilters((curr) => ({
@@ -259,8 +275,11 @@ const HumanNodes: React.FC = () => {
             </div>
             <ToggleGroup
               className="ml-auto"
-              value={view}
-              onValueChange={(val) => setView(val as "cards" | "list")}
+              value={effectiveView}
+              onValueChange={(val) => {
+                if (isMobileViewport) return;
+                setView(val as "cards" | "list");
+              }}
               options={[
                 { value: "cards", label: "Cards" },
                 { value: "list", label: "List" },
@@ -268,7 +287,7 @@ const HumanNodes: React.FC = () => {
             />
           </div>
 
-          {view === "cards" ? (
+          {effectiveView === "cards" ? (
             <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
               {filtered.map((node) => {
                 const factionName = factionsById[node.factionId]?.name ?? "—";
@@ -338,7 +357,7 @@ const HumanNodes: React.FC = () => {
                           </Badge>
                         </div>
                       </div>
-                      <div className="grid auto-rows-fr grid-cols-2 gap-3">
+                      <div className="grid auto-rows-fr grid-cols-1 gap-3 sm:grid-cols-2">
                         {tileItems.map((item) => (
                           <StatTile
                             key={item.label}
@@ -380,7 +399,7 @@ const HumanNodes: React.FC = () => {
                 <Card key={node.id}>
                   <CardContent className="pt-4 pb-3">
                     <div className="flex flex-wrap items-center gap-4">
-                      <div className="min-w-[200px] flex-1">
+                      <div className="min-w-0 flex-1">
                         <h4 className="text-base font-semibold">{node.name}</h4>
                         <p className="text-sm text-muted">{node.role}</p>
                       </div>
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index 67db245..97d02a9 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -192,7 +192,9 @@ const Profile: React.FC<ProfileProps> = ({ showHint = true }) => {
             />
           </div>
           <div className="flex flex-col items-center text-center">
-            <h1 className="text-3xl font-semibold text-text">{headerTitle}</h1>
+            <h1 className="text-2xl font-semibold text-text sm:text-3xl">
+              {headerTitle}
+            </h1>
             {headerAddress ? (
               <div className="flex flex-wrap items-center justify-center gap-2 text-xs text-muted">
                 {showShortBadge ? (
@@ -316,7 +318,7 @@ const Profile: React.FC<ProfileProps> = ({ showHint = true }) => {
               }))}
             />
             {filteredActions.length ? (
-              <div className="grid max-h-72 grid-cols-1 gap-3 overflow-y-scroll pr-2 sm:grid-cols-2 xl:grid-cols-3">
+              <div className="grid max-h-none grid-cols-1 gap-3 overflow-visible pr-0 sm:grid-cols-2 lg:max-h-72 lg:overflow-y-auto lg:pr-2 xl:grid-cols-3">
                 {filteredActions.map((action) => (
                   <ActivityTile
                     key={`${action.title}-${action.timestamp}`}
diff --git a/src/pages/proposals/ProposalChamber.tsx b/src/pages/proposals/ProposalChamber.tsx
index ab8b7a9..51f8ddb 100644
--- a/src/pages/proposals/ProposalChamber.tsx
+++ b/src/pages/proposals/ProposalChamber.tsx
@@ -206,10 +206,10 @@ const ProposalChamber: React.FC = () => {
             label="Voting quorum (%)"
             value={
               <>
-                <span className="whitespace-nowrap">
+                <span>
                   {quorumPercent}% / {quorumNeededPercent}%
                 </span>
-                <span className="text-xs font-semibold whitespace-nowrap text-muted">
+                <span className="text-xs font-semibold text-muted">
                   {engaged} / {quorumNeeded}
                 </span>
               </>
@@ -222,19 +222,18 @@ const ProposalChamber: React.FC = () => {
             label="Vote split (%)"
             value={
               <>
-                <span className="whitespace-nowrap">
+                <span>
                   <span className="text-accent">{yesPercentOfTotal}%</span> /{" "}
                   <span className="text-destructive">{noPercentOfTotal}%</span>{" "}
                   / <span className="text-muted">{abstainPercentOfTotal}%</span>
                 </span>
-                <span className="text-xs font-semibold whitespace-nowrap text-muted">
+                <span className="text-xs font-semibold text-muted">
                   {yesTotal} / {noTotal} / {abstainTotal}
                 </span>
               </>
             }
             variant="panel"
             className="flex min-h-24 flex-col items-center justify-center gap-1 py-4"
-            labelClassName="whitespace-nowrap"
             valueClassName="flex flex-col items-center gap-1 text-2xl font-semibold"
           />
           <StatTile
@@ -242,17 +241,16 @@ const ProposalChamber: React.FC = () => {
             value={proposal.timeLeft}
             variant="panel"
             className="flex min-h-24 flex-col items-center justify-center gap-1 py-4"
-            labelClassName="whitespace-nowrap"
-            valueClassName="whitespace-nowrap text-2xl font-semibold"
+            valueClassName="text-2xl font-semibold"
           />
           <StatTile
             label="Passing (%)"
             value={
               <>
-                <span className="whitespace-nowrap">
+                <span>
                   {yesPercentOfQuorum}% / {passingNeededPercent}%
                 </span>
-                <span className="text-xs font-semibold whitespace-nowrap text-muted">
+                <span className="text-xs font-semibold text-muted">
                   Yes within quorum
                 </span>
               </>
diff --git a/src/pages/proposals/ProposalPP.tsx b/src/pages/proposals/ProposalPP.tsx
index 5cfdf9d..f9d3ab0 100644
--- a/src/pages/proposals/ProposalPP.tsx
+++ b/src/pages/proposals/ProposalPP.tsx
@@ -185,7 +185,7 @@ const ProposalPP: React.FC = () => {
               }
               variant="panel"
               className="flex min-h-24 flex-col items-center justify-center gap-1 py-4"
-              valueClassName="text-2xl font-semibold whitespace-nowrap"
+              valueClassName="text-2xl font-semibold"
             />
             <StatTile
               label="Upvote floor (%)"
@@ -196,7 +196,7 @@ const ProposalPP: React.FC = () => {
               }
               variant="panel"
               className="flex min-h-24 flex-col items-center justify-center gap-1 py-4"
-              valueClassName="text-2xl font-semibold whitespace-nowrap"
+              valueClassName="text-2xl font-semibold"
             />
           </div>
         </section>
diff --git a/src/pages/proposals/Proposals.tsx b/src/pages/proposals/Proposals.tsx
index 7dd6913..a597fac 100644
--- a/src/pages/proposals/Proposals.tsx
+++ b/src/pages/proposals/Proposals.tsx
@@ -403,18 +403,10 @@ const Proposals: React.FC = () => {
                           : undefined
                       }
                     />
-                    <Badge
-                      variant="muted"
-                      size="sm"
-                      className="whitespace-nowrap"
-                    >
+                    <Badge variant="muted" size="sm">
                       {proposal.chamber.replace(/\s*chamber\s*$/i, "")}
                     </Badge>
-                    <Badge
-                      variant="muted"
-                      size="sm"
-                      className="whitespace-nowrap"
-                    >
+                    <Badge variant="muted" size="sm">
                       {proposal.tier}
                     </Badge>
                   </>
@@ -525,7 +517,7 @@ const Proposals: React.FC = () => {
                         </div>
                       </Surface>
 
-                      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                         <StageDataTile
                           title="Voting quorum"
                           description={`Governors ${chamberStats.engaged} / ${chamberStats.activeGovernors} (needs ${chamberStats.quorumNeeded})`}
@@ -595,7 +587,7 @@ const Proposals: React.FC = () => {
                         </div>
                       </Surface>
 
-                      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                         {formationPage.stageData
                           .slice(0, 3)
                           .map((item, index) => (
@@ -613,7 +605,7 @@ const Proposals: React.FC = () => {
                       <p className="text-sm font-semibold text-text">
                         Stage data
                       </p>
-                      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                         {proposal.stageData.map((item, index) => (
                           <StageDataTile
                             key={`${proposal.id}-stage-${index}`}
@@ -629,7 +621,7 @@ const Proposals: React.FC = () => {
 
                   <div className="space-y-2">
                     <p className="text-sm font-semibold text-text">Key stats</p>
-                    <ul className="grid gap-2 text-sm text-text md:grid-cols-2">
+                    <ul className="grid gap-2 text-sm text-text sm:grid-cols-2">
                       {proposal.stage === "pool" && poolPage && poolStats ? (
                         <>
                           <DashedStatItem