diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 956fa63..375ad3c 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -53,6 +53,12 @@
 .headerHasMap .headerContent {
     padding-top: 0;
     margin-top: -0.5rem;
+}
+
+/* The title (not the whole content row) rises above the map fade. Keeping
+   .headerContent unpositioned matters: .actions must anchor to .header so it
+   floats over the map band, not over the title. */
+.headerHasMap .titleSection {
     position: relative;
     z-index: 3;
 }
@@ -63,6 +69,9 @@
     right: 14px;
     z-index: 6;
     margin: 0;
+    /* Beat the mobile `.actions { width: 100% }` rule — a floating button
+       must never stretch across the title. */
+    width: auto;
 }
 
 .headerHasMap .actions .btnAdd {
diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css
index 29b1a06..c188fda 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.module.css
+++ b/nextjs-app/components/SecondarySchoolDetailView.module.css
@@ -53,6 +53,12 @@
 .headerHasMap .headerContent {
     padding-top: 0;
     margin-top: -0.5rem;
+}
+
+/* The title (not the whole content row) rises above the map fade. Keeping
+   .headerContent unpositioned matters: .actions must anchor to .header so it
+   floats over the map band, not over the title. */
+.headerHasMap .titleSection {
     position: relative;
     z-index: 3;
 }
@@ -63,6 +69,9 @@
     right: 14px;
     z-index: 6;
     margin: 0;
+    /* Beat the mobile `.actions { width: 100% }` rule — a floating button
+       must never stretch across the title. */
+    width: auto;
 }
 
 .headerHasMap .actions .btnAdd {