refactor: 增加移动端适配

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor

@@ -1,5 +1,23 @@
 @page "/tutorials/template5"
-@layout TutorialsLoginLayout
+@layout TutorialsLayout
+
+<HeadContent>
+    <style>
+        .main:has(.background-image) {
+            height: calc(100vh - 56px - 175px);
+        }
+
+        @@media (min-width: 768px) {
+            .main:has(.background-image) {
+                height: calc(100vh - 50px);
+            }
+
+            .login-box {
+                width: 350px;
+            }
+        }
+    </style>
+</HeadContent>
 
 <div class="background-image">
     <div class="login-container">

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css

@@ -11,15 +11,15 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    height: 100%;
 }
 
 .login-box {
     background: white;
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-    width: 350px;
+    width: auto;
     font-family: "Segoe UI", sans-serif;
     text-align: left;
     position: relative;