Merge pull request #1750 from leigh-pointer/BlazorTheme

Fix for #1736 Blazor theme not rendering correctly
oqtane · Nov 3, 2021 · 82e97aa · 82e97aa
2 parents e598178 + 6d8df26
commit 82e97aa
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/Oqtane.Client/Themes/BlazorTheme/Containers/Container.razor b/Oqtane.Client/Themes/BlazorTheme/Containers/Container.razor
@@ -1,7 +1,7 @@
-@namespace Oqtane.Themes.BlazorTheme
+@namespace Oqtane.Themes.BlazorTheme
 @inherits ContainerBase
 <div class="container">
-    <div class="row px-4">
+    <div class="row p-4">
         <div class="d-flex flex-nowrap">
             <ModuleActions /><h2><ModuleTitle /></h2>
         </div>

diff --git a/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor b/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
@@ -1,23 +1,26 @@
 @namespace Oqtane.Themes.BlazorTheme
 @inherits ThemeBase
 
+
 <div class="breadcrumbs">
     <Breadcrumbs />
 </div>
 
-<div class="sidebar">
-    <nav class="navbar">
-        <Logo /><Menu Orientation="Vertical" />
-    </nav>
-</div>
-
-<div class="main">
-    <div class="top-row px-4">
-        <div class="ms-auto"><UserProfile /> <Login /> <ControlPanel /></div>
+<div class="row flex-xl-nowrap gx-0">
+    <div class="sidebar">
+        <nav class="navbar">
+            <Logo /><Menu Orientation="Vertical" />
+        </nav>
     </div>
-    <div class="container">
-        <div class="row px-4">
-            <Pane Name="@PaneNames.Admin" />
+
+    <div class="main g-0">
+        <div class="top-row px-4">
+            <div class="ms-auto"><UserProfile /> <Login /> <ControlPanel /></div>
+        </div>
+        <div class="container">
+            <div class="row px-4">
+                <Pane Name="@PaneNames.Admin" />
+            </div>
         </div>
     </div>
 </div>

diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
@@ -124,6 +124,7 @@
 @media (min-width: 768px) {
     app {
         flex-direction: row;
+        display: block;
     }
 
     .app-logo {