In Blazor Server template, show login UI on small screens too. Fixes #13003

Author: SteveSandersonMS

src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/css/site.css

@@ -1,4 +1,4 @@
-@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
+@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -36,10 +36,16 @@ app {
         justify-content: flex-end;
     }
 
-        .main .top-row > a {
+        .main .top-row > a, .main .top-row .btn-link {
+            white-space: nowrap;
             margin-left: 1.5rem;
         }
 
+.main .top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
@@ -131,9 +137,17 @@ app {
 }
 
 @media (max-width: 767.98px) {
-    .main .top-row {
+    .main .top-row:not(.auth) {
         display: none;
     }
+
+    .main .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .main .top-row a, .main .top-row .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 768px) {

src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css

@@ -36,10 +36,16 @@ app {
         justify-content: flex-end;
     }
 
-        .main .top-row > a {
+        .main .top-row > a, .main .top-row .btn-link {
+            white-space: nowrap;
             margin-left: 1.5rem;
         }
 
+.main .top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
@@ -111,10 +117,37 @@ app {
     color: red;
 }
 
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
+
 @media (max-width: 767.98px) {
-    .main .top-row {
+    .main .top-row:not(.auth) {
         display: none;
     }
+
+    .main .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .main .top-row a, .main .top-row .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 768px) {

src/Components/Samples/BlazorServerApp/wwwroot/css/site.css

@@ -36,10 +36,16 @@ app {
         justify-content: flex-end;
     }
 
-        .main .top-row > a {
+        .main .top-row > a, .main .top-row .btn-link {
+            white-space: nowrap;
             margin-left: 1.5rem;
         }
 
+.main .top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
@@ -131,9 +137,17 @@ app {
 }
 
 @media (max-width: 767.98px) {
-    .main .top-row {
+    .main .top-row:not(.auth) {
         display: none;
     }
+
+    .main .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .main .top-row a, .main .top-row .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 768px) {

src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css

@@ -36,10 +36,16 @@ app {
         justify-content: flex-end;
     }
 
-        .main .top-row > a {
+        .main .top-row > a, .main .top-row .btn-link {
+            white-space: nowrap;
             margin-left: 1.5rem;
         }
 
+.main .top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
@@ -111,10 +117,37 @@ app {
     color: red;
 }
 
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
+
 @media (max-width: 767.98px) {
-    .main .top-row {
+    .main .top-row:not(.auth) {
         display: none;
     }
+
+    .main .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .main .top-row a, .main .top-row .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 768px) {

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/MainLayout.Auth.razor

@@ -5,7 +5,7 @@
 </div>
 
 <div class="main">
-    <div class="top-row px-4">
+    <div class="top-row px-4 auth">
         <LoginDisplay />
         <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
     </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/wwwroot/css/site.css

@@ -36,10 +36,16 @@ app {
         justify-content: flex-end;
     }
 
-        .main .top-row > a {
+        .main .top-row > a, .main .top-row .btn-link {
+            white-space: nowrap;
             margin-left: 1.5rem;
         }
 
+.main .top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
@@ -131,9 +137,17 @@ app {
 }
 
 @media (max-width: 767.98px) {
-    .main .top-row {
+    .main .top-row:not(.auth) {
         display: none;
     }
+
+    .main .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .main .top-row a, .main .top-row .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 768px) {