feat: add file view (#1064)

app/assets/stylesheets/_columns.scss

@@ -1,21 +1,14 @@
 .app-column-container {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: auto auto 2fr;
 }
 
 .app-column-first {
   width: 220px;
-  flex-shrink: 0.2;
 }
 
 .app-column-second {
   width: 350px;
-  flex-shrink: 0.5;
-}
-
-.app-column-third {
-  flex-grow: 1;
-  flex-shrink: 0.3;
 }
 
 .app-column {

app/assets/stylesheets/_editor.scss

@@ -26,7 +26,7 @@ $heading-height: 75px;
   max-width: 500px;
 }
 
-#editor-title-bar {
+.content-title-bar {
   width: 100%;
 
   padding-top: 14px;
@@ -108,19 +108,21 @@ $heading-height: 75px;
     flex: 1;
     width: 100%;
   }
+}
 
-  .editable {
-    overflow-y: scroll;
-    width: 100%;
-    background-color: var(--editor-pane-editor-background-color);
-    color: var(--editor-pane-editor-foreground-color);
+.editor-content .editable,
+#editor-content .editable,
+#file-text-preview {
+  overflow-y: scroll;
+  width: 100%;
+  background-color: var(--editor-pane-editor-background-color);
+  color: var(--editor-pane-editor-foreground-color);
 
-    border: none;
-    outline: none;
-    padding: 15px;
-    font-size: var(--sn-stylekit-font-size-editor);
-    resize: none;
-  }
+  border: none;
+  outline: none;
+  padding: 15px;
+  font-size: var(--sn-stylekit-font-size-editor);
+  resize: none;
 }
 
 #editor-pane-component-stack {

app/assets/stylesheets/utils/_padding.scss

@@ -62,6 +62,10 @@
   padding-bottom: 0;
 }
 
+.pb-0\.5 {
+  padding-bottom: 0.125rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }