fixed mobile ui and ux

assets/css/app.css

@@ -152,31 +152,6 @@ html, body {
   margin: 0 auto;
 }
 
-@media (max-width: 960px) {
-  .mx-root { grid-template-columns: 64px 1fr; }
-  .mx-rightbar { display: none; }
-}
-@media (max-width: 640px) {
-  .mx-root { grid-template-columns: 1fr; }
-  .mx-sidebar { display: none; }
-  /* space for fixed bottom nav */
-  .mx-main { padding-bottom: 72px; }
-  /* hide inline compose on mobile — the overlay handles it */
-  .mx-compose-wrapper { display: none; }
-  /* tighten card spacing */
-  .mx-feed { padding: 0.625rem 0.625rem; gap: 0.5rem; }
-  .mx-tweet { padding: 0.875rem 0.875rem; }
-  /* truncate long email addresses */
-  .mx-tweet-handle {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 180px;
-  }
-  .mx-header { padding: 0.75rem 1rem; }
-  .mx-detail { padding: 0.875rem 1rem; }
-}
-
 /* ── Sidebar ── */
 .mx-sidebar {
   position: sticky;
@@ -841,7 +816,7 @@ html, body {
   padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 960px) {
   .mx-mobile-nav { display: flex; }
 }
 
@@ -906,7 +881,7 @@ html, body {
   display: none;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 960px) {
   .mx-compose-overlay {
     display: flex;
     flex-direction: column;
@@ -959,3 +934,34 @@ html, body {
   overflow-y: auto;
   padding: 1.25rem;
 }
+
+/* ───────────────────────────────────────────────────────────────────────────────
+   Responsive layout overrides
+   IMPORTANT: these rules must live AFTER all component base rules so that
+   the cascade works correctly (later rule of equal specificity wins).
+─────────────────────────────────────────────────────────────────────────────── */
+
+/* Tablet + mobile (≤ 960 px): single column, no side panels, bottom nav */
+@media (max-width: 960px) {
+  .mx-root         { grid-template-columns: 1fr; }
+  .mx-sidebar      { display: none; }
+  .mx-rightbar     { display: none; }
+  /* room for fixed bottom nav */
+  .mx-main         { padding-bottom: 72px; }
+  /* hide inline compose — the overlay FAB handles it */
+  .mx-compose-wrapper { display: none; }
+}
+
+/* Narrow phones (≤ 640 px): tighten spacing */
+@media (max-width: 640px) {
+  .mx-feed  { padding: 0.625rem; gap: 0.5rem; }
+  .mx-tweet { padding: 0.875rem; }
+  .mx-tweet-handle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 180px;
+  }
+  .mx-header { padding: 0.75rem 1rem; }
+  .mx-detail { padding: 0.875rem 1rem; }
+}

assets/js/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useRef, useEffect } from "react";
+import React, { createContext, useContext, useState, useRef, useEffect, useSyncExternalStore } from "react";
 import { createRoot } from "react-dom/client";
 import { createPortal } from "react-dom";
 import {
@@ -53,6 +53,28 @@ type Tweet = {
 
 const AuthCtx = createContext({ email: "", userId: "" });
 
+// ── Responsive helper ─────────────────────────────────────────────────────────
+// Returns true when the viewport is wider than 960 px (desktop layout).
+// Uses useSyncExternalStore so it re-renders on resize without a manual
+// useEffect + useState dance.
+
+const DESKTOP_MQ = typeof window !== "undefined"
+  ? window.matchMedia("(min-width: 961px)")
+  : null;
+
+function subscribe(cb: () => void) {
+  DESKTOP_MQ?.addEventListener("change", cb);
+  return () => DESKTOP_MQ?.removeEventListener("change", cb);
+}
+
+function useIsDesktop(): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => DESKTOP_MQ?.matches ?? true,
+    () => true, // SSR snapshot (never actually used here)
+  );
+}
+
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
 function timeAgo(insertedAt?: string | null): string {
@@ -1203,6 +1225,7 @@ function App() {
   const profileUserId = appEl.dataset.userId || null;
 
   const [mobileCompose, setMobileCompose] = useState(false);
+  const isDesktop = useIsDesktop();
 
   const onFeedPage = page === "feed" || page === "tweet";
   const onUsersPage = page === "users" || page === "user-detail";
@@ -1267,58 +1290,62 @@ function App() {
     <AuthCtx.Provider value={{ email, userId }}>
       <QueryClientProvider client={queryClient}>
         <div className="mx-root">
-          <aside className="mx-sidebar">
-            <div className="mx-logo">
-              <span className="mx-logo-icon">⬡</span>
-              <span className="mx-logo-text">Mixer</span>
-            </div>
-            <nav className="mx-nav">
-              <a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-                </svg>
-                Feed
-              </a>
-              <a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
-                </svg>
-                Users
-              </a>
-            </nav>
-            <div className="mx-sidebar-footer">
-              {email ? (
-                <>
-                  <span className="mx-version" style={{ color: "var(--mx-fg2)" }}>{email}</span>
-                  <a className="mx-auth-link" href="/sign-out">Sign out</a>
-                </>
-              ) : (
-                <>
-                  <a className="mx-auth-link" href="/register">Create account</a>
-                  <a className="mx-auth-link" href="/sign-in">Sign in</a>
-                </>
-              )}
-              <span className="mx-version">v0.1.0</span>
-            </div>
-          </aside>
+          {isDesktop && (
+            <aside className="mx-sidebar">
+              <div className="mx-logo">
+                <span className="mx-logo-icon">⬡</span>
+                <span className="mx-logo-text">Mixer</span>
+              </div>
+              <nav className="mx-nav">
+                <a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+                  </svg>
+                  Feed
+                </a>
+                <a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
+                  </svg>
+                  Users
+                </a>
+              </nav>
+              <div className="mx-sidebar-footer">
+                {email ? (
+                  <>
+                    <span className="mx-version" style={{ color: "var(--mx-fg2)" }}>{email}</span>
+                    <a className="mx-auth-link" href="/sign-out">Sign out</a>
+                  </>
+                ) : (
+                  <>
+                    <a className="mx-auth-link" href="/register">Create account</a>
+                    <a className="mx-auth-link" href="/sign-in">Sign in</a>
+                  </>
+                )}
+                <span className="mx-version">v0.1.0</span>
+              </div>
+            </aside>
+          )}
 
           <main className="mx-main">
             {renderMain()}
           </main>
 
-          <div className="mx-rightbar">
-            <div className="mx-info-card">
-              <h3 className="mx-info-title">About Mixer</h3>
-              <p className="mx-info-body">
-                A minimal social feed built with Ash Framework, Phoenix, and React.
-              </p>
-              <div className="mx-stack">
-                {["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
-                  <span key={s} className="mx-tag">{s}</span>
-                ))}
+          {isDesktop && (
+            <div className="mx-rightbar">
+              <div className="mx-info-card">
+                <h3 className="mx-info-title">About Mixer</h3>
+                <p className="mx-info-body">
+                  A minimal social feed built with Ash Framework, Phoenix, and React.
+                </p>
+                <div className="mx-stack">
+                  {["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
+                    <span key={s} className="mx-tag">{s}</span>
+                  ))}
+                </div>
               </div>
             </div>
-          </div>
+          )}
         </div>
 
         {/* Mobile-only bottom nav — hidden on desktop via CSS */}