diff --git a/apps/portal/src/App.tsx b/apps/portal/src/App.tsx
index 5c743c1..d1bed9c 100644
--- a/apps/portal/src/App.tsx
+++ b/apps/portal/src/App.tsx
@@ -23,11 +23,13 @@ import {
   Check,
   Plus,
   X,
+  Menu,
 } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { clearApiKey, api, type Principal } from './api.js';
 import { useTenantBase } from './tenant-base.js';
 import { theme } from './theme.js';
+import { useIsMobile } from './lib/useMediaQuery.js';
 import { Dashboard } from './pages/Dashboard.js';
 import { LinksPage } from './pages/Links.js';
 import { CommissionsPage } from './pages/Commissions.js';
@@ -149,6 +151,8 @@ function Shell() {
   const [auth, setAuth] = useState<AuthState>({ loading: true, principal: null });
   const location = useLocation();
   const tenantBase = useTenantBase();
+  const isMobile = useIsMobile();
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
     api<Principal>('/auth/whoami')
@@ -156,13 +160,26 @@ function Shell() {
       .catch(() => setAuth({ loading: false, principal: null }));
   }, []);
 
+  // Close the drawer whenever the route changes — a NavItem tap navigates,
+  // which should dismiss the overlay. Also covers backdrop/programmatic nav.
+  useEffect(() => {
+    setDrawerOpen(false);
+  }, [location.pathname]);
+
   if (auth.loading) return <CenteredMessage>Loading…</CenteredMessage>;
   if (!auth.principal) return <Navigate to={`${tenantBase}/login`} state={{ from: location }} replace />;
 
   return (
     <div style={{ display: 'flex', minHeight: '100vh', background: theme.bg }}>
-      <Sidebar principal={auth.principal} />
+      {isMobile ? (
+        <MobileDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)}>
+          <Sidebar principal={auth.principal} variant="drawer" />
+        </MobileDrawer>
+      ) : (
+        <Sidebar principal={auth.principal} />
+      )}
       <main style={{ flex: 1, minWidth: 0, overflow: 'auto' }}>
+        {isMobile && <MobileTopBar onMenu={() => setDrawerOpen(true)} />}
         <Routes>
           <Route index element={<Dashboard principal={auth.principal} />} />
 
@@ -222,7 +239,102 @@ interface ProgramSettings {
   logoUrl: string | null;
 }
 
-function Sidebar({ principal }: { principal: Principal }) {
+/** Mobile-only top bar: hamburger + brand. Sticky so it stays reachable
+ *  while the page scrolls. Reuses the cached 'program-settings' query so
+ *  the brand name/logo match the drawer without a second fetch. */
+function MobileTopBar({ onMenu }: { onMenu: () => void }) {
+  const settings = useQuery({
+    queryKey: ['program-settings'],
+    queryFn: () => api<ProgramSettings>('/config/program'),
+    staleTime: 60_000,
+  });
+  const programName = settings.data?.programName || 'OpenPartner';
+  return (
+    <header
+      style={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 30,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        height: 56,
+        padding: '0 16px',
+        background: theme.sidebar,
+        borderBottom: `1px solid ${theme.borderSubtle}`,
+      }}
+    >
+      <button
+        onClick={onMenu}
+        aria-label="Open menu"
+        style={{
+          background: 'transparent',
+          border: 'none',
+          color: theme.text,
+          cursor: 'pointer',
+          display: 'inline-flex',
+          padding: 6,
+          marginLeft: -6,
+        }}
+      >
+        <Menu size={22} />
+      </button>
+      {settings.data?.logoUrl ? (
+        <img
+          src={settings.data.logoUrl}
+          alt={programName}
+          style={{ width: 24, height: 24, borderRadius: 6, objectFit: 'contain', background: theme.surface2 }}
+        />
+      ) : (
+        <Logo size={24} />
+      )}
+      <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em' }}>{programName}</div>
+    </header>
+  );
+}
+
+/** Slide-in drawer shell for the mobile sidebar. Stays mounted so the
+ *  panel can transition in/out; a tap on the backdrop or any nav link
+ *  inside closes it (route-change in Shell also closes it). */
+function MobileDrawer({ open, onClose, children }: { open: boolean; onClose: () => void; children: ReactNode }) {
+  return (
+    <>
+      <div
+        onClick={onClose}
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'rgba(0,0,0,0.5)',
+          opacity: open ? 1 : 0,
+          pointerEvents: open ? 'auto' : 'none',
+          transition: 'opacity 180ms ease',
+          zIndex: 49,
+        }}
+      />
+      <div
+        onClick={(e) => {
+          if ((e.target as HTMLElement).closest('a')) onClose();
+        }}
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: 'min(280px, 84vw)',
+          transform: open ? 'translateX(0)' : 'translateX(-100%)',
+          transition: 'transform 200ms ease',
+          boxShadow: open ? '0 0 40px rgba(0,0,0,0.5)' : 'none',
+          display: 'flex',
+          zIndex: 50,
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
+
+function Sidebar({ principal, variant = 'sidebar' }: { principal: Principal; variant?: 'sidebar' | 'drawer' }) {
   const nav = useNavigate();
   const tenantBase = useTenantBase();
   const settings = useQuery({
@@ -233,20 +345,22 @@ function Sidebar({ principal }: { principal: Principal }) {
   });
   const programName = settings.data?.programName || 'OpenPartner';
   const supportEmail = settings.data?.supportEmail || null;
+  const isDrawer = variant === 'drawer';
 
   return (
     <aside
       style={{
-        // Sticky + 100vh pins the aside to the viewport so the middle
-        // nav's overflow:auto actually scrolls. Without this, the
+        // Sidebar: sticky + 100vh pins the aside to the viewport so the
+        // middle nav's overflow:auto actually scrolls. Without this, the
         // aside would grow with the main content and the inner overflow
         // would never trigger.
-        width: 248,
-        height: '100vh',
-        position: 'sticky',
-        top: 0,
+        // Drawer (mobile): the MobileDrawer wrapper owns positioning; the
+        // aside just fills it as a normal flex column.
+        width: isDrawer ? '100%' : 248,
+        height: isDrawer ? '100%' : '100vh',
+        ...(isDrawer ? {} : { position: 'sticky', top: 0 }),
         background: theme.sidebar,
-        borderRight: `1px solid ${theme.borderSubtle}`,
+        borderRight: isDrawer ? 'none' : `1px solid ${theme.borderSubtle}`,
         display: 'flex',
         flexDirection: 'column',
         padding: '20px 14px',
diff --git a/apps/portal/src/global.css b/apps/portal/src/global.css
index 981260b..14cbca5 100644
--- a/apps/portal/src/global.css
+++ b/apps/portal/src/global.css
@@ -63,6 +63,22 @@ code, pre {
   color: #e6e8eb;
 }
 
+/* Responsive grid collapse.
+ *
+ * The portal styles with inline `style` objects, so multi-column grids set
+ * `grid-template-columns` inline (e.g. '1fr 1fr', '120px 1fr 140px'). There
+ * is no stylesheet rule to hang an @media override on — and a normal class
+ * rule would lose to the inline style. `!important` inside a media query is
+ * the one author-stylesheet declaration that DOES beat a non-important
+ * inline style, so we use it to force these grids to a single column on
+ * phones. Add `className="op-grid-collapse"` to any hardcoded multi-column
+ * grid that would overflow a ~360px viewport. */
+@media (max-width: 768px) {
+  .op-grid-collapse {
+    grid-template-columns: 1fr !important;
+  }
+}
+
 /* Remove default focus ring, add our own */
 *:focus {
   outline: none;
diff --git a/apps/portal/src/lib/useMediaQuery.ts b/apps/portal/src/lib/useMediaQuery.ts
new file mode 100644
index 0000000..5a52014
--- /dev/null
+++ b/apps/portal/src/lib/useMediaQuery.ts
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Subscribe a component to a CSS media query.
+ *
+ * The portal styles entirely with inline `style` objects, so there are no
+ * stylesheets to hang `@media` rules off of. This hook is how components
+ * branch their inline styles by viewport: it reads `matchMedia` and
+ * re-renders on change.
+ *
+ * SSR-safe: returns `false` when `window` is unavailable (the portal is a
+ * pure SPA today, but this keeps the hook honest if that ever changes).
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    // Sync immediately in case the query changed since the last render.
+    onChange();
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, [query]);
+
+  return matches;
+}
+
+/**
+ * Mobile breakpoint for the portal: 768px and below collapses the fixed
+ * sidebar into a drawer and stacks multi-column layouts into one column.
+ * Matches the common tablet-portrait / phone boundary.
+ */
+export const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile(): boolean {
+  return useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+}
diff --git a/apps/portal/src/pages/AdminPartnerCommission.tsx b/apps/portal/src/pages/AdminPartnerCommission.tsx
index fe468d3..29b07f7 100644
--- a/apps/portal/src/pages/AdminPartnerCommission.tsx
+++ b/apps/portal/src/pages/AdminPartnerCommission.tsx
@@ -188,7 +188,7 @@ function EditCard({
         Past commissions aren&rsquo;t recomputed — only future events.
       </p>
       <ErrorBanner error={save.error ?? clear.error} />
-      <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr auto', gap: 12, marginBottom: 14, alignItems: 'end' }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '140px 1fr auto', gap: 12, marginBottom: 14, alignItems: 'end' }}>
         <div>
           <Label>Rate type</Label>
           <Select value={type} onChange={(e) => setType(e.target.value as 'percent' | 'fixed')}>
diff --git a/apps/portal/src/pages/AdminPartnerCoupons.tsx b/apps/portal/src/pages/AdminPartnerCoupons.tsx
index 1e72cd2..48cba11 100644
--- a/apps/portal/src/pages/AdminPartnerCoupons.tsx
+++ b/apps/portal/src/pages/AdminPartnerCoupons.tsx
@@ -170,7 +170,7 @@ export function AdminPartnerCoupons() {
               </div>
             )}
             {availableCampaigns.length > 0 ? (
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 8, alignItems: 'end' }}>
+              <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 8, alignItems: 'end' }}>
                 <div>
                   <Label>Program</Label>
                   <select
diff --git a/apps/portal/src/pages/AdminPartners.tsx b/apps/portal/src/pages/AdminPartners.tsx
index 350b316..2a6784e 100644
--- a/apps/portal/src/pages/AdminPartners.tsx
+++ b/apps/portal/src/pages/AdminPartners.tsx
@@ -152,7 +152,7 @@ function CreatePartner({ onClose, onCreated }: { onClose: () => void; onCreated:
         They'll get an email with a one-time link to set up their dashboard.
       </div>
       <ErrorBanner error={mut.error} />
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
         <div>
           <Label>Name</Label>
           <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Ada Lovelace" />
diff --git a/apps/portal/src/pages/AdminPrograms.tsx b/apps/portal/src/pages/AdminPrograms.tsx
index 299c2e6..d0ac844 100644
--- a/apps/portal/src/pages/AdminPrograms.tsx
+++ b/apps/portal/src/pages/AdminPrograms.tsx
@@ -262,7 +262,7 @@ function EditProgramDates({
         Setting <strong>Ends</strong> to a past date marks the campaign Ended immediately. Past the
         end date, existing share-links keep redirecting but no new commissions accrue.
       </p>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 18 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 18 }}>
         <div>
           <Label>Starts</Label>
           <Input type="datetime-local" value={startsAt} onChange={(e) => setStartsAt(e.target.value)} />
@@ -456,7 +456,7 @@ function CreateProgram({ onClose, onCreated }: { onClose: () => void; onCreated:
           onCategoriesChange={setCategories}
         />
       )}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 14, marginBottom: 16 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 14, marginBottom: 16 }}>
         <div>
           <Label>Attribution window (days)</Label>
           <Input type="number" value={windowDays} onChange={(e) => setWindowDays(e.target.value)} />
@@ -503,7 +503,7 @@ function CreateProgram({ onClose, onCreated }: { onClose: () => void; onCreated:
           <option value="90">90 days</option>
         </Select>
       </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
         <div>
           <Label>Starts (optional)</Label>
           <Input type="datetime-local" value={startsAt} onChange={(e) => setStartsAt(e.target.value)} />
@@ -647,6 +647,7 @@ function SubRuleRow({
 
   return (
     <div
+      className="op-grid-collapse"
       style={{
         display: 'grid',
         gridTemplateColumns: '110px 180px 110px 1fr 90px auto',
@@ -943,6 +944,7 @@ function CustomerRewardEditor({
       </div>
       {enabled && reward && (
         <div
+          className="op-grid-collapse"
           style={{
             display: 'grid',
             gridTemplateColumns: '160px 130px 130px 1fr',
diff --git a/apps/portal/src/pages/Connect.tsx b/apps/portal/src/pages/Connect.tsx
index 84de88b..b6b8051 100644
--- a/apps/portal/src/pages/Connect.tsx
+++ b/apps/portal/src/pages/Connect.tsx
@@ -74,7 +74,7 @@ export function ConnectPage({ principal }: { principal: Principal }) {
               <code style={{ fontSize: 12, color: theme.textMuted }}>{s.accountId}</code>
             </div>
           </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
+          <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
             <ChecklistItem label="Details submitted" ok={!!s.detailsSubmitted} />
             <ChecklistItem label="Charges enabled" ok={!!s.chargesEnabled} />
             <ChecklistItem label="Payouts enabled" ok={!!s.payoutsEnabled} />
diff --git a/apps/portal/src/pages/Dashboard.tsx b/apps/portal/src/pages/Dashboard.tsx
index 0d7e551..c311fcd 100644
--- a/apps/portal/src/pages/Dashboard.tsx
+++ b/apps/portal/src/pages/Dashboard.tsx
@@ -257,7 +257,7 @@ function FunnelChart({ funnel }: { funnel: Funnel }) {
           {stages.map((s, i) => {
             const width = `${Math.max(6, (s.value / max) * 100)}%`;
             return (
-              <div key={s.key} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 140px', gap: 12, alignItems: 'center' }}>
+              <div key={s.key} className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '120px 1fr 140px', gap: 12, alignItems: 'center' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: theme.textMuted }}>
                   <span style={{ color: theme.accent, display: 'inline-flex' }}>{s.icon}</span>
                   {s.label}
@@ -389,7 +389,7 @@ function PartnerCard({
         </div>
         {partner.stripeConnected && <StatusPill status="connected" />}
       </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
         <MiniStat label="Revenue" value={money(partner.revenue)} />
         <MiniStat
           label="Payouts"
diff --git a/apps/portal/src/pages/Install.tsx b/apps/portal/src/pages/Install.tsx
index 5443679..9368bf1 100644
--- a/apps/portal/src/pages/Install.tsx
+++ b/apps/portal/src/pages/Install.tsx
@@ -147,7 +147,7 @@ export function InstallPage() {
           )}
           {mailKind === 'smtp' && (
             <>
-              <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 12 }}>
+              <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 12 }}>
                 <div>
                   <Label>SMTP host</Label>
                   <Input value={smtpHost} onChange={(e) => setSmtpHost(e.target.value)} placeholder="smtp.example.com" />
diff --git a/apps/portal/src/pages/admin/Admins.tsx b/apps/portal/src/pages/admin/Admins.tsx
index 7db6a70..b80f496 100644
--- a/apps/portal/src/pages/admin/Admins.tsx
+++ b/apps/portal/src/pages/admin/Admins.tsx
@@ -86,7 +86,7 @@ function InviteAdmin({ onClose, onCreated }: { onClose: () => void; onCreated: (
         They'll get an email with a one-time link to activate their account.
       </div>
       <ErrorBanner error={mut.error} />
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
         <div>
           <Label>Name</Label>
           <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Taylor Admin" />
diff --git a/apps/portal/src/pages/admin/Billing.tsx b/apps/portal/src/pages/admin/Billing.tsx
index f07b330..edd6034 100644
--- a/apps/portal/src/pages/admin/Billing.tsx
+++ b/apps/portal/src/pages/admin/Billing.tsx
@@ -323,7 +323,7 @@ function PlanCard({ status }: { status: BillingStatus }) {
 
 function PlanPicker({ onPick, disabled }: { onPick: (plan: Plan) => void; disabled?: boolean }) {
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
+    <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
       {(['flex', 'revshare'] as const).map((p) => (
         <button
           key={p}
diff --git a/apps/portal/src/pages/admin/NetworkCreators.tsx b/apps/portal/src/pages/admin/NetworkCreators.tsx
index 9d1ded6..4a808b2 100644
--- a/apps/portal/src/pages/admin/NetworkCreators.tsx
+++ b/apps/portal/src/pages/admin/NetworkCreators.tsx
@@ -232,7 +232,7 @@ function CreatorCard({ creator }: { creator: DirectoryRow }) {
           )}
         </div>
       )}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
         <Stat label="90d revenue" value={revenue > 0 ? `$${revenue.toLocaleString(undefined, { maximumFractionDigits: 0 })}` : '—'} accent={revenue > 0} />
         <Stat label="90d clicks" value={creator.clicks90d > 0 ? creator.clicks90d.toLocaleString() : '—'} />
       </div>
diff --git a/apps/portal/src/pages/admin/Settings.tsx b/apps/portal/src/pages/admin/Settings.tsx
index d1dc006..306a97f 100644
--- a/apps/portal/src/pages/admin/Settings.tsx
+++ b/apps/portal/src/pages/admin/Settings.tsx
@@ -123,7 +123,7 @@ function ProgramSection() {
         />
         <Hint>Partners see this in their portal footer.</Hint>
       </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
         <div>
           <Label>Brand color</Label>
           <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
@@ -751,7 +751,7 @@ function MailSection() {
       )}
       {kind === 'smtp' && (
         <>
-          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 12 }}>
+          <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 12 }}>
             <div>
               <Label>SMTP host</Label>
               <Input value={smtpHost} onChange={(e) => setSmtpHost(e.target.value)} placeholder="smtp.example.com" />
diff --git a/apps/portal/src/pages/admin/Webhooks.tsx b/apps/portal/src/pages/admin/Webhooks.tsx
index c276c88..c8c413c 100644
--- a/apps/portal/src/pages/admin/Webhooks.tsx
+++ b/apps/portal/src/pages/admin/Webhooks.tsx
@@ -410,7 +410,7 @@ function CreateEndpoint({
     <Card style={{ marginBottom: 14 }}>
       <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 14 }}>New endpoint</div>
       <ErrorBanner error={mut.error} />
-      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 14 }}>
+      <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12, marginBottom: 14 }}>
         <div>
           <Label>URL</Label>
           <Input value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://your-server.example/webhooks/openpartner" />
diff --git a/apps/portal/src/pages/creator/CreatorMyAffiliations.tsx b/apps/portal/src/pages/creator/CreatorMyAffiliations.tsx
index 8ac09ee..3ebd848 100644
--- a/apps/portal/src/pages/creator/CreatorMyAffiliations.tsx
+++ b/apps/portal/src/pages/creator/CreatorMyAffiliations.tsx
@@ -79,6 +79,7 @@ function EarningsBlock({ aff }: { aff: Affiliation }) {
               return (
                 <div
                   key={l.linkKey}
+                  className="op-grid-collapse"
                   style={{
                     display: 'grid',
                     gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr',
diff --git a/apps/portal/src/pages/creator/CreatorMyProfile.tsx b/apps/portal/src/pages/creator/CreatorMyProfile.tsx
index 12ca896..893aa25 100644
--- a/apps/portal/src/pages/creator/CreatorMyProfile.tsx
+++ b/apps/portal/src/pages/creator/CreatorMyProfile.tsx
@@ -500,7 +500,7 @@ function PlatformRowEditor({
   const dirty = handle.trim() !== (existing?.handle ?? '') || (followerCount === '' ? null : Number(followerCount)) !== (existing?.followerCount ?? null);
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 140px auto', gap: 8, alignItems: 'center' }}>
+    <div className="op-grid-collapse" style={{ display: 'grid', gridTemplateColumns: '110px 1fr 140px auto', gap: 8, alignItems: 'center' }}>
       <div style={{ fontSize: 13, color: theme.text }}>{label}</div>
       <Input value={handle} onChange={(e) => setHandle(e.target.value)} placeholder={placeholder} style={{ fontFamily: theme.fontMono, fontSize: 13 }} />
       <Input
diff --git a/apps/portal/src/pages/creator/CreatorOfferingDetail.tsx b/apps/portal/src/pages/creator/CreatorOfferingDetail.tsx
index 480cf9f..f1d67ae 100644
--- a/apps/portal/src/pages/creator/CreatorOfferingDetail.tsx
+++ b/apps/portal/src/pages/creator/CreatorOfferingDetail.tsx
@@ -334,6 +334,7 @@ function OfferingDetailBody({
 
       {/* Two-column body */}
       <div
+        className="op-grid-collapse"
         style={{
           display: 'grid',
           gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
diff --git a/apps/portal/src/pages/creator/CreatorShareLinks.tsx b/apps/portal/src/pages/creator/CreatorShareLinks.tsx
index 8754acf..38b0ba2 100644
--- a/apps/portal/src/pages/creator/CreatorShareLinks.tsx
+++ b/apps/portal/src/pages/creator/CreatorShareLinks.tsx
@@ -261,6 +261,7 @@ function MetricsRow({
   const stat = (n: number) => (loading ? '—' : n.toLocaleString());
   return (
     <div
+      className="op-grid-collapse"
       style={{
         display: 'grid',
         gridTemplateColumns: 'repeat(4, 1fr)',
diff --git a/apps/portal/src/pages/creator/CreatorShell.tsx b/apps/portal/src/pages/creator/CreatorShell.tsx
index 4b5d851..5f28805 100644
--- a/apps/portal/src/pages/creator/CreatorShell.tsx
+++ b/apps/portal/src/pages/creator/CreatorShell.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState, type ReactNode } from 'react';
 import { Link, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { Globe, Inbox, Link2, LogOut, Megaphone, Network, UserCog } from 'lucide-react';
+import { Globe, Inbox, Link2, LogOut, Megaphone, Menu, Network, UserCog } from 'lucide-react';
 import { theme } from '../../theme.js';
+import { useIsMobile } from '../../lib/useMediaQuery.js';
 import { Logo } from '../auth/Shared.js';
 import { creatorApi } from './creator-api.js';
 import { CreatorDiscoverPage } from './CreatorDiscover.js';
@@ -21,6 +22,8 @@ interface Whoami {
 export function CreatorShell() {
   const [auth, setAuth] = useState<{ loading: boolean; creator: Whoami['creator'] | null }>({ loading: true, creator: null });
   const location = useLocation();
+  const isMobile = useIsMobile();
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
     creatorApi<Whoami>('/creators/whoami')
@@ -28,6 +31,11 @@ export function CreatorShell() {
       .catch(() => setAuth({ loading: false, creator: null }));
   }, []);
 
+  // Dismiss the drawer on navigation (tapping a nav link changes the route).
+  useEffect(() => {
+    setDrawerOpen(false);
+  }, [location.pathname]);
+
   if (auth.loading) {
     return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: theme.bg, color: theme.textMuted }}>Loading…</div>;
   }
@@ -37,8 +45,15 @@ export function CreatorShell() {
 
   return (
     <div style={{ display: 'flex', minHeight: '100vh', background: theme.bg }}>
-      <CreatorSidebar creator={auth.creator} />
+      {isMobile ? (
+        <CreatorMobileDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)}>
+          <CreatorSidebar creator={auth.creator} variant="drawer" />
+        </CreatorMobileDrawer>
+      ) : (
+        <CreatorSidebar creator={auth.creator} />
+      )}
       <main style={{ flex: 1, minWidth: 0, overflow: 'auto' }}>
+        {isMobile && <CreatorMobileTopBar onMenu={() => setDrawerOpen(true)} />}
         <Routes>
           <Route index element={<Navigate to="discover" replace />} />
           <Route path="discover" element={<CreatorDiscoverPage />} />
@@ -57,21 +72,97 @@ export function CreatorShell() {
   );
 }
 
-function CreatorSidebar({ creator }: { creator: NonNullable<Whoami['creator']> }) {
-  const nav = useNavigate();
+/** Mobile-only top bar for the creator shell: hamburger + brand. */
+function CreatorMobileTopBar({ onMenu }: { onMenu: () => void }) {
   return (
-    <aside
+    <header
       style={{
-        // Sticky + 100vh pins the aside to the viewport so the middle
-        // nav's overflow:auto actually scrolls (otherwise the aside
-        // grows with the main content and the inner overflow never
-        // triggers).
-        width: 248,
-        height: '100vh',
         position: 'sticky',
         top: 0,
+        zIndex: 30,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        height: 56,
+        padding: '0 16px',
+        background: theme.sidebar,
+        borderBottom: `1px solid ${theme.borderSubtle}`,
+      }}
+    >
+      <button
+        onClick={onMenu}
+        aria-label="Open menu"
+        style={{
+          background: 'transparent',
+          border: 'none',
+          color: theme.text,
+          cursor: 'pointer',
+          display: 'inline-flex',
+          padding: 6,
+          marginLeft: -6,
+        }}
+      >
+        <Menu size={22} />
+      </button>
+      <Logo size={24} />
+      <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em' }}>OpenPartner</div>
+    </header>
+  );
+}
+
+/** Slide-in drawer shell for the creator mobile sidebar. */
+function CreatorMobileDrawer({ open, onClose, children }: { open: boolean; onClose: () => void; children: ReactNode }) {
+  return (
+    <>
+      <div
+        onClick={onClose}
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'rgba(0,0,0,0.5)',
+          opacity: open ? 1 : 0,
+          pointerEvents: open ? 'auto' : 'none',
+          transition: 'opacity 180ms ease',
+          zIndex: 49,
+        }}
+      />
+      <div
+        onClick={(e) => {
+          if ((e.target as HTMLElement).closest('a')) onClose();
+        }}
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: 'min(280px, 84vw)',
+          transform: open ? 'translateX(0)' : 'translateX(-100%)',
+          transition: 'transform 200ms ease',
+          boxShadow: open ? '0 0 40px rgba(0,0,0,0.5)' : 'none',
+          display: 'flex',
+          zIndex: 50,
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
+
+function CreatorSidebar({ creator, variant = 'sidebar' }: { creator: NonNullable<Whoami['creator']>; variant?: 'sidebar' | 'drawer' }) {
+  const nav = useNavigate();
+  const isDrawer = variant === 'drawer';
+  return (
+    <aside
+      style={{
+        // Sidebar: sticky + 100vh pins the aside to the viewport so the
+        // middle nav's overflow:auto actually scrolls. Drawer: the
+        // wrapper owns positioning; the aside just fills it.
+        width: isDrawer ? '100%' : 248,
+        height: isDrawer ? '100%' : '100vh',
+        ...(isDrawer ? {} : { position: 'sticky', top: 0 }),
         background: theme.sidebar,
-        borderRight: `1px solid ${theme.borderSubtle}`,
+        borderRight: isDrawer ? 'none' : `1px solid ${theme.borderSubtle}`,
         display: 'flex',
         flexDirection: 'column',
         padding: '20px 14px',
diff --git a/apps/portal/src/ui.tsx b/apps/portal/src/ui.tsx
index 2e5a65a..7e4cab9 100644
--- a/apps/portal/src/ui.tsx
+++ b/apps/portal/src/ui.tsx
@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { theme } from './theme.js';
+import { useIsMobile } from './lib/useMediaQuery.js';
 
 // ---------------- Layout ----------------
 
@@ -14,24 +15,28 @@ export function Page({
   actions?: ReactNode;
   children: ReactNode;
 }) {
+  const isMobile = useIsMobile();
   return (
-    <div style={{ padding: '32px 40px', maxWidth: 1280, margin: '0 auto' }}>
+    <div style={{ padding: isMobile ? '20px 16px' : '32px 40px', maxWidth: 1280, margin: '0 auto' }}>
       <header
         style={{
           display: 'flex',
+          // On mobile the title + actions stack so wide action buttons
+          // don't squeeze the heading into an unreadable column.
+          flexDirection: isMobile ? 'column' : 'row',
           justifyContent: 'space-between',
-          alignItems: 'flex-end',
-          marginBottom: 28,
-          gap: 16,
+          alignItems: isMobile ? 'stretch' : 'flex-end',
+          marginBottom: isMobile ? 20 : 28,
+          gap: isMobile ? 14 : 16,
         }}
       >
         <div>
-          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em' }}>{title}</h1>
+          <h1 style={{ margin: 0, fontSize: isMobile ? 21 : 24, fontWeight: 600, letterSpacing: '-0.01em' }}>{title}</h1>
           {subtitle && (
             <div style={{ color: theme.textMuted, fontSize: 14, marginTop: 4 }}>{subtitle}</div>
           )}
         </div>
-        <div style={{ display: 'flex', gap: 8 }}>{actions}</div>
+        {actions && <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{actions}</div>}
       </header>
       {children}
     </div>
@@ -120,7 +125,11 @@ export function Table({
   const cols = columns.map((c) => (typeof c === 'string' ? { label: c, align: 'left' as const } : c));
   return (
     <Card padded={false} style={{ overflow: 'hidden' }}>
-      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
+      {/* Horizontal scroll on narrow viewports: data tables routinely have
+          more columns than fit a phone, so let the table scroll inside the
+          card instead of blowing out the page width. */}
+      <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14, minWidth: 'max-content' }}>
         <thead>
           <tr>
             {cols.map((c) => (
@@ -170,6 +179,7 @@ export function Table({
           )}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }