diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index baccc9d..bf9b56a 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -3112,17 +3112,23 @@ a.nav-item,
    Mobile Terminal Styles
    ============================================ */
 
- .mobile-terminal-wrapper {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas:
-    "header"
-    "content"
-    "keys";
+/* Mobile terminal shell - fills viewport */
+.shell.mobile-terminal-shell {
   height: 100vh;
-  height: 100dvh; /* Dynamic viewport height for mobile */
-  max-height: 100vh;
-  max-height: 100dvh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.shell.mobile-terminal-shell > * {
+  flex: 1;
+  min-height: 0;
+}
+
+.mobile-terminal-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
   background: #1e1e1e;
   position: relative;
   overflow: hidden;
@@ -3130,7 +3136,7 @@ a.nav-item,
 
 /* Mobile Terminal Header */
 .mobile-terminal-header {
-  grid-area: header;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3231,12 +3237,11 @@ a.nav-item,
 
 /* Mobile Terminal Content */
 .mobile-terminal-content {
-  grid-area: content;
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
   position: relative;
   background: #1e1e1e;
-  min-height: 0;
-  max-height: 100%;
 }
 
 /* Terminal wrapper - fills content area */
@@ -3270,7 +3275,7 @@ a.nav-item,
 
 /* Special Keys Strip */
 .special-keys-strip {
-  grid-area: keys;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   gap: 2px;