diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 97ebd3b..53609f8 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -117,6 +117,17 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 7df5885..9c44477 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -69,7 +69,7 @@ function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: bo
     <button
       onClick={onClick}
       className={cn(
-        "w-full flex items-center gap-3 py-3 px-4 text-left transition-all duration-150 border-l-2 border-b border-border",
+        "w-full flex items-center gap-3 py-4 px-4 text-left transition-all duration-150 border-l-2 border-b border-border",
         selected
           ? "bg-accent border-l-primary"
           : "border-l-transparent hover:bg-accent hover:border-l-primary"
@@ -108,7 +108,7 @@ function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: bo
 
 function SkeletonRow() {
   return (
-    <div className="flex items-center gap-3 py-3 px-4 border-b border-border">
+    <div className="flex items-center gap-3 py-4 px-4 border-b border-border">
       <div className="w-2 h-2 rounded-full bg-muted animate-pulse" />
       <div className="w-16 h-3 bg-muted rounded animate-pulse" />
       <div className="flex-1 h-3 bg-muted rounded animate-pulse" />
@@ -477,8 +477,10 @@ function TicketListPageContent() {
       {/* Ticket list column */}
       <div
         className={cn(
-          "flex flex-col h-full overflow-hidden transition-all duration-300 ease-out",
-          selectedTicketId ? "w-80 min-w-80 flex-shrink-0" : "flex-1 min-w-0"
+          "flex flex-col h-full overflow-hidden transition-[width] duration-300 ease-out",
+          selectedTicketId
+            ? "w-full flex-shrink-0 border-r border-border max-lg:hidden lg:w-[40%] lg:min-w-[360px]"
+            : "flex-1 min-w-0"
         )}
       >
         {/* Top bar */}
@@ -575,7 +577,7 @@ function TicketListPageContent() {
       {/* Ticket detail column */}
       {selectedTicketId && (
         <div
-          className="flex-1 min-w-0 border-l overflow-hidden"
+          className="flex-1 min-w-0 lg:min-w-[480px] overflow-hidden"
           style={{ animation: "slide-in-right 300ms ease-out" }}
         >
           <TicketDetailPanel
diff --git a/web/src/components/app-shell.tsx b/web/src/components/app-shell.tsx
index fa0ed9a..5461ad2 100644
--- a/web/src/components/app-shell.tsx
+++ b/web/src/components/app-shell.tsx
@@ -306,7 +306,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         </aside>
 
         {/* Main */}
-        <main className="flex-1 overflow-y-auto">{children}</main>
+        <main className="flex-1 overflow-hidden">{children}</main>
 
         {/* Command Palette */}
         <CommandPalette open={commandOpen} onOpenChange={setCommandOpen} />