diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts
index 48b2a4d34..0accbd7af 100644
--- a/src/app/components/nav/styles.css.ts
+++ b/src/app/components/nav/styles.css.ts
@@ -53,6 +53,11 @@ const NavItemBase = style({
   color: OnContainer,
   outline: 'none',
   minHeight: toRem(36),
+  '@media': {
+    // The room/nav row is the app's primary tap target; give it a 44px touch
+    // area on phones (desktop stays the denser 36px).
+    '(max-width: 750px)': { minHeight: toRem(44) },
+  },
 
   selectors: {
     '&:hover, &:focus-visible': {
diff --git a/src/app/components/sidebar/Sidebar.css.ts b/src/app/components/sidebar/Sidebar.css.ts
index a877e2bf1..94df7617b 100644
--- a/src/app/components/sidebar/Sidebar.css.ts
+++ b/src/app/components/sidebar/Sidebar.css.ts
@@ -81,6 +81,10 @@ export const SidebarItem = recipe({
       justifyContent: 'center',
       position: 'relative',
       transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
+      '@media': {
+        // Space-rail buttons to a 44px touch target on phones (2px larger).
+        '(max-width: 750px)': { minWidth: toRem(44), minHeight: toRem(44) },
+      },
 
       selectors: {
         '&:hover': {