use grid for main layout

Author: hojberg

src/css/main.css

@@ -844,23 +844,21 @@ button.secondary:hover {
 /* -- Application ---------------------------------------------------------- */
 
 #app {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: var(--main-sidebar-width) 1fr;
 }
 
 /* -- Main Sidebar --------------------------------------------------------- */
 
 #main-sidebar {
-  width: var(--main-sidebar-width);
-  background: var(--color-sidebar-bg);
-  color: var(--color-sidebar-fg);
-  border-right: 1px solid var(--color-sidebar-border);
   display: flex;
   flex-direction: column;
-  font-size: var(--font-size-medium);
   overflow: auto;
   height: 100vh;
+  background: var(--color-sidebar-bg);
+  color: var(--color-sidebar-fg);
+  border-right: 1px solid var(--color-sidebar-border);
+  font-size: var(--font-size-medium);
   padding: 1rem 1rem 1rem 1.5rem;
   scrollbar-width: thin;
   scrollbar-color: var(--color-sidebar-subtle-fg) var(--color-sidebar-bg);
@@ -1084,7 +1082,6 @@ button.secondary:hover {
 #workspace {
   background: var(--color-workspace-bg);
   color: var(--color-workspace-fg);
-  flex-grow: 1;
 }
 
 #workspace-toolbar {