css

Shogi.UI/Pages/Home/GameBoard/GameBoardPresentation.razor

@@ -27,7 +27,9 @@
                      data-position="@(position)"
                      data-selected="@(isSelected)"
                      style="grid-area: @position">
-                    <GamePiece Piece="piece" Perspective="Perspective" />
+                     @if (piece != null){
+                        <GamePiece Piece="piece" Perspective="Perspective" />
+                     }
                 </div>
             }
         }

Shogi.UI/Pages/Home/GameBoard/GameboardPresentation.razor.css

@@ -1,7 +1,8 @@
 .game-board {
 	display: grid;
 	grid-template-areas: "board side-board icons";
-	grid-template-columns: max-content minmax(25rem, 1fr) 2fr;
+	grid-template-columns: 1fr minmax(9rem, 15rem) 3rem;
+	place-content: center;
 	gap: 0.5rem;
 	background-color: #444;
 	position: relative; /* For absolute positioned children. */
@@ -33,12 +34,11 @@
 		"rank A2 B2 C2 D2 E2 F2 G2 H2 I2"
 		"rank A1 B1 C1 D1 E1 F1 G1 H1 I1"
 		". file file file file file file file file file";
-	grid-template-columns: auto repeat(9, minmax(0, 1fr));
-	grid-template-rows: repeat(9, minmax(0, 1fr)) auto;
-	max-height: calc(100vh - 3rem);
-	width: calc(100vmin * 0.9167);
-	aspect-ratio: 0.9167;
+	grid-template-columns: auto repeat(9, 1fr);
+	grid-template-rows: repeat(9, 1fr) auto;
 	gap: 3px;
+	aspect-ratio: 0.9167;
+	max-height: calc(100vh - 2rem);
 }
 
 	.board[data-perspective="Player2"] {
@@ -61,6 +61,7 @@
 	display: grid;
 	place-content: center;
 	transition: filter linear 0.25s;
+	aspect-ratio: 0.9167;
 }
 
 .board .tile {

Shogi.UI/Pages/Home/Home.razor

@@ -13,8 +13,10 @@
     {
         <LoginModal />
     }
-    <PageHeader />
-    <GameBrowser ActiveSessionChanged="OnChangeSession" />
+    <aside class="sidebar">
+        <PageHeader />
+        <GameBrowser ActiveSessionChanged="OnChangeSession" />
+    </aside>
     @if (Account.User == null || activeSessionName == null)
     {
         <EmptyGameBoard />
@@ -29,7 +31,7 @@
     private bool welcomeModalIsVisible;
     private string activeSessionName;
     private ClientWebSocket socket;
-    
+
     public Home()
     {
         welcomeModalIsVisible = false;

Shogi.UI/Pages/Home/Home.razor.css

@@ -1,30 +1,24 @@
 .shogi {
 	display: grid;
 	grid-template-areas:
-		"pageHeader board"
-		"browser		board";
-	grid-template-columns: minmax(25rem, 25vw) 1fr;
-	grid-template-rows: max-content 1fr;
-	place-items: stretch;
-	gap: 1rem;
-	padding: 0.5rem;
+		"sidebar board";
+	grid-template-columns: clamp(5rem, 20vw, 25rem) 1fr;
+	gap: 3px 1rem;
 	position: relative; /* For absolute positioned children. */
 	background-color: var(--primary-color);
 }
 
+	.shogi > .sidebar {
+		grid-area: sidebar;
+
+		display: grid;
+		grid-template-rows: auto 1fr;
+		gap: 3px;
+	}
+	.shogi > .sidebar.collapsed {
+		width: 5rem;
+	}
+
 	.shogi > ::deep .game-board {
 		grid-area: board;
-		place-self: center start;
 	}
-
-	.shogi > ::deep .pageHeader {
-		grid-area: pageHeader;
-	}
-
-	.shogi > ::deep .game-browser {
-		grid-area: browser;
-	}
-
-	Modals {
-		display: none;
-	}

Shogi.UI/Pages/Home/PageHeader.razor

@@ -5,12 +5,11 @@
     <h1>Shogi</h1>
     @if (user != null)
     {
-            <div class="user">
-                <div>@user.Value.DisplayName</div>
-                <button type="button" class="logout" @onclick="AccountManager.LogoutAsync">Logout</button>
-            </div>
+        <div class="user">
+            <div>@user.Value.DisplayName</div>
+            <button type="button" class="logout" @onclick="AccountManager.LogoutAsync">Logout</button>
+        </div>
     }
-    @*<LoginDisplay />*@
 </div>
 
 @code {

Shogi.UI/wwwroot/css/app.css

@@ -1,7 +1,7 @@
 @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
 
 html, body, #app {
-	height: 100%;
+	height: 100vh;
 }
 
 body {