fix: Screen cutting off sidebar when on certain page

.devcontainer/devcontainer.json

@@ -0,0 +1,9 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/dotnet",
+  "features": {
+    "ghcr.io/devcontainers/features/dotnet:2": {
+      "version": "latest"
+    }
+  },
+  "postCreateCommand": "dotnet --list-sdks"
+}

.vscode/launch.json

@@ -0,0 +1,35 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            // Use IntelliSense to find out which attributes exist for C# debugging
+            // Use hover for the description of the existing attributes
+            // For further information visit https://github.com/dotnet/vscode-csharp/blob/main/debugger-launchjson.md.
+            "name": ".NET Core Launch (web)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/EssentialCSharp.Web/bin/Debug/net9.0/EssentialCSharp.Web.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/EssentialCSharp.Web",
+            "stopAtEntry": false,
+            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,41 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/EssentialCSharp.Web.sln",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary;ForceNoAlign"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/EssentialCSharp.Web.sln",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary;ForceNoAlign"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "--project",
+                "${workspaceFolder}/EssentialCSharp.Web.sln"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -144,7 +144,7 @@
                 </div>
             </header>
 
-            <main class="layout">
+            <main :class="{ layout: true, 'has-sidebar': sidebarShown && !smallScreen }">
                 <div id="sidebarContainer" class="background-grey-lighten-2">
                     <Transition name="slide-fade">
                         <div v-cloak v-if="sidebarShown" :class="{sidebarSmall: smallScreen}" class="sidebar toc-padding" id="sidebar">

EssentialCSharp.Web/appsettings.Development.json

@@ -7,6 +7,6 @@
     }
   },
   "ConnectionStrings": {
-    "EssentialCSharpWebContextConnection": "Server=(localdb)\\mssqllocaldb;Database=EssentialCSharp.Web;Trusted_Connection=True;MultipleActiveResultSets=true"
+    "EssentialCSharpWebContextConnection": "Server=localhost;Database=EssentialCSharp.Web;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=true;"
   }
 }

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -166,6 +166,23 @@ a:hover {
   margin-top: var(--toolbar-height);
 }
 
+/* Prevent horizontal overflow on main content */
+.container {
+  max-width: 100vw;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* Ensure code blocks, tables, and pre elements wrap or scroll within themselves */
+.container pre,
+.container code,
+.container table {
+  max-width: 100%;
+  overflow-x: auto;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
 /* Search Bar Styles */
 
 @media (max-width: 768px) {
@@ -320,22 +337,41 @@ a:hover {
 /* Page Navigation Arrow Buttons */
 
 .turn-page {
-  top: calc(100vh - 9rem);
-  top: calc(100dvh - 9rem);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 2rem;
+  top: auto;
+  transform: none;
+  z-index: 1000;
   display: flex;
-  z-index: 99999; 
   justify-content: space-between;
-  position: -webkit-sticky; /* Safari */
-  position: sticky;
-  padding: 0 0.5rem 0 0.5rem;
-  transform: translate(0, 3rem);
-  height: 0;
+  padding: 0 0.5rem;
+  height: auto;
+  pointer-events: none; /* allow buttons to be clickable only */
+  margin-left: 0;
 }
 
+.turn-page .arrow-btn {
+  pointer-events: auto;
+}
+
+/* Hide turn-page buttons on mobile when sidebar is open */
 @media only screen and (max-width: 768px) {
+  .layout.has-sidebar .turn-page {
+    display: none;
+  }
+
   .turn-page {
-    top: calc(100vh - 13rem);
-    top: calc(100dvh - 9rem);
+    bottom: 4rem;
+    margin-left: 0;
+  }
+}
+
+/* Adjust turn-page positioning when sidebar is visible on larger screens */
+@media only screen and (min-width: 769px) {
+  .layout.has-sidebar .turn-page {
+    margin-left: 375px; /* Same as sidebar width */
   }
 }