fix: Share button relocation + snackbar z-index fixes (#1138)

## Summary

### Share button
- **Relocate share button** to top-right of content area (was floating
in an awkward position mid-page)
- **Fix visibility** — show on all content pages (previously only showed
on TOC-matched pages)

### Snackbar
- **Fix z-index** — raise `#snackbar` from `z-index: 1` to `z-index:
10001` so the "Copied!" toast appears above the cookie consent banner
(`z-index: 10000`)

### Nullable
- **Enable nullable globally** via `_ViewImports.cshtml` with `#nullable
enable` (instead of per-file directives that were causing Razor
compilation errors)

## Testing
- Share button visually confirmed via Playwright screenshot on a live
Aspire-hosted dev instance
- Snackbar z-index verified via browser CSS inspection (`z-index: 10001`
active in page)
- Cookie consent banner forced with `?testConsent=true` — snackbar
confirmed visible above banner

Author: BenjaminMichaelis

.gitignore

@@ -39,6 +39,7 @@ EssentialCSharp.Web/wwwroot/Chapters
 EssentialCSharp.Web/wwwroot/sitemap.xml
 EssentialCSharp.Web/Chapters/
 EssentialCSharp.Web/ListingSourceCode
+EssentialCSharp.Web/wwwroot/js/chapter-listings.json
 Utilities/EssentialCSharp.Web/Chapters/
 Utilities/EssentialCSharp.Web/wwwroot/sitemap.xml
 Utilities/EssentialCSharp.Web/wwwroot/Chapters/

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -158,6 +158,7 @@
     <main id="site-layout" class="layout">
         <div id="sidebarContainer" class="background-grey-lighten-2"></div>
         <div class="container my-5 pb-5">
+            <div id="page-share-host"></div>
             <div id="page-nav-host"></div>
             @RenderBody()
         </div>

EssentialCSharp.Web/src/App.vue

@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, provide, reactive, watch } from "vue";
 import HeaderStatus from "./components/HeaderStatus.vue";
 import SidebarPanel from "./components/SidebarPanel.vue";
 import PageNavigation from "./components/PageNavigation.vue";
+import PageShareAction from "./components/PageShareAction.vue";
 import SnackbarMessage from "./components/SnackbarMessage.vue";
 import ChatWidget from "./components/ChatWidget.vue";
 import CodeRunnerModal from "./components/CodeRunnerModal.vue";
@@ -74,6 +75,10 @@ watch(() => shell.smallScreen, updateLayoutClasses);
         <PageNavigation />
     </Teleport>
 
+    <Teleport to="#page-share-host">
+        <PageShareAction />
+    </Teleport>
+
     <Teleport to="#snackbar-host">
         <SnackbarMessage />
     </Teleport>

EssentialCSharp.Web/src/components/PageNavigation.vue

@@ -16,16 +16,6 @@ const shell = inject("shell");
                 ( or use the <i class="fa-solid fa-square-caret-left" /> key)
             </span>
         </div>
-        <div v-if="shell.isContentPage" class="turn-page-tooltip">
-            <button id="share-btn" type="button" class="arrow-btn" aria-label="Share this page" @click="shell.shareCurrentPage()">
-                <i class="fa-solid fa-share-from-square arrow-icon" />
-            </button>
-            <span class="turn-page-tooltip-text tooltip-center">
-                <b>Share Page</b>
-                <br />
-                Copies a link to this page
-            </span>
-        </div>
         <div class="turn-page-tooltip">
             <a v-if="shell.nextPageUrl" id="next-btn" :href="shell.nextPageUrl" class="arrow-btn">
                 <i class="fa fa-solid fa-arrow-right icon-light arrow-icon" />

EssentialCSharp.Web/src/components/PageShareAction.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { inject } from "vue";
+
+const shell = inject("shell");
+</script>
+
+<template>
+    <div v-if="shell.isContentPage" class="page-share-action">
+        <div class="turn-page-tooltip">
+            <button
+                id="share-btn"
+                type="button"
+                class="arrow-btn page-share-btn"
+                aria-label="Share this page"
+                @click="shell.shareCurrentPage()"
+            >
+                <i class="fa-solid fa-share-from-square arrow-icon" />
+            </button>
+            <span class="turn-page-tooltip-text page-share-tooltip">
+                <b>Share Page</b>
+                <br />
+                Copies a link to this page
+            </span>
+        </div>
+    </div>
+</template>

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -479,6 +479,54 @@ a:hover {
   padding: 0;
 }
 
+#page-share-host {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.page-share-action {
+  margin-bottom: 1rem;
+}
+
+.page-share-action .turn-page-tooltip {
+  display: inline-block;
+}
+
+.page-share-action .page-share-btn {
+  display: block;
+  border: none;
+  padding: 0;
+  border-radius: 3rem;
+  background-color: var(--primary-color);
+  background: var(--primary-color);
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  text-align: center;
+  position: relative;
+}
+
+.page-share-action .arrow-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+}
+
+.page-share-action .page-share-tooltip {
+  right: 0;
+  left: auto;
+  top: calc(100% + 0.5rem);
+}
+
+@media only screen and (max-width: 768px) {
+  .page-share-action {
+    margin-bottom: 0.75rem;
+  }
+}
+
 /* Chapter Navigation Sidebar Styles */
 
 .sidebar {
@@ -863,7 +911,7 @@ details > summary::-webkit-details-marker {
   border-radius: 2px; /* Rounded borders */
   padding: 16px; /* Padding */
   position: fixed; /* Sit on top of the screen */
-  z-index: 1; /* Add a z-index if needed */
+  z-index: 10001; /* Above cookie consent banner (z-index: 10000) */
   left: 50%; /* Center the snackbar */
   bottom: 30px; /* 30px from the bottom */
 }