css for the grid view

src/ui/web/css/layout.css

@@ -48,8 +48,11 @@ html {
 
 /* mobile layout */
 @media screen and (max-width: 800px) {
+    /* show back button */
     .RoomHeader button.back { display: block; }
-    div.RoomView, div.RoomPlaceholderView { display: none; }
+    /* hide grid button */
+    .LeftPanel button.grid { display: none; }
+    div.RoomView, div.RoomPlaceholderView, div.RoomGridView { display: none; }
     div.LeftPanel {flex-grow: 1;}
     div.room-shown div.RoomView { display: flex; }
     div.room-shown div.LeftPanel { display: none; }
@@ -61,7 +64,7 @@ html {
     min-width: 0;
 }
 
-.RoomPlaceholderView, .RoomView {
+.RoomPlaceholderView, .RoomView, .RoomGridView {
     flex: 1 0 0;
     min-width: 0;
 }
@@ -88,3 +91,21 @@ html {
 .RoomHeader {
     display: flex;
 }
+
+.RoomGridView {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    grid-template-rows: repeat(var(--rows), 1fr);
+}
+
+.RoomGridView > div {
+    display: flex;
+    min-width: 0;
+    grid-column: var(--column);
+    grid-row: var(--row);
+}
+
+.RoomGridView > div.focus-ring {
+    z-index: 1;
+    pointer-events: none;
+}

src/ui/web/css/themes/element/theme.css

@@ -211,6 +211,7 @@ a {
     background-color: #3D88FA;
     color: white;
     border-radius: 10px;
+    z-index: 2;
 }
 
 .room-shown .SessionStatusView {
@@ -258,6 +259,22 @@ a {
     color: #FF4B55;
 }
 
+
+/*.RoomGridView > :not(.focused) .MessageComposer {
+    display: none;
+} 
+*/
+
+.RoomGridView > div.container {
+    border-right: 1px solid rgba(245, 245, 245, 0.90);
+    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
+}
+
+.RoomGridView > div.focus-ring {
+    border: 2px solid rgba(134, 193, 165, 1);
+    border-radius: 2px;
+}
+
 .RoomHeader {
     background: rgba(245, 245, 245, 0.90);
     padding: 10px;

src/ui/web/session/leftpanel/LeftPanelView.js

@@ -41,7 +41,10 @@ export class LeftPanelView extends TemplateView {
                     filterInput.value = "";
                     vm.clearFilter();
                 }}, vm.i18n`Clear`),
-                t.button({onClick: () => vm.toggleGrid()}, vm => vm.gridEnabled ? "Single" : "Grid")
+                t.button({
+                    onClick: () => vm.toggleGrid(),
+                    className: "grid"
+                }, vm => vm.gridEnabled ? "Single" : "Grid")
             ]),
             t.view(new ListView(
                 {