feat: initial implementation of responsive app panes (#1198)

packages/web/src/stylesheets/_columns.scss

@@ -1,16 +1,50 @@
 .app-column-container {
-  display: grid;
-  grid-template-columns: auto auto 2fr;
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 768px) {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: auto auto 2fr;
+  }
 }
 
 .app-column-first {
   width: 220px;
+
+  @media screen and (max-width: 768px) {
+    width: 100% !important;
+  }
 }
 
 .app-column-second {
   width: 350px;
+
+  @media screen and (max-width: 768px) {
+    width: 100% !important;
+  }
 }
 
 .app-column {
   overflow: hidden;
+
+  .content {
+    height: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    &.selected {
+      flex-grow: 1;
+
+      .content {
+        height: 100%;
+        overflow-y: auto;
+      }
+    }
+
+    &:not(.selected) {
+      height: auto;
+      border-bottom: 1px solid var(--sn-stylekit-border-color);
+    }
+  }
 }

packages/web/src/stylesheets/_editor.scss

@@ -74,10 +74,13 @@ $heading-height: 75px;
     font-size: calc(var(--sn-stylekit-base-font-size) - 2px);
     text-transform: none;
     font-weight: normal;
-    text-align: right;
+
+    @media screen and (min-width: 768px) {
+      text-align: right;
+    }
 
     .desc,
-    .message:not(.warning):not(.danger) {
+    .message:not(.warning):not(.text-danger) {
       opacity: 0.35;
     }
   }

packages/web/src/stylesheets/_items-column.scss

@@ -2,11 +2,14 @@
 
 #items-column {
   background-color: var(--items-column-background-color);
-  border-left: 1px solid var(--items-column-border-left-color);
-  border-right: 1px solid var(--items-column-border-right-color);
   font-size: var(--sn-stylekit-font-size-h2);
   user-select: none;
 
+  @media screen and (min-width: 768px) {
+    border-left: 1px solid var(--items-column-border-left-color);
+    border-right: 1px solid var(--items-column-border-right-color);
+  }
+
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
@@ -20,11 +23,6 @@
     font-size: var(--sn-stylekit-font-size-h3);
   }
 
-  .content {
-    display: flex;
-    flex-direction: column;
-  }
-
   #items-title-bar-container {
     padding: 0.8125rem;
   }

packages/web/src/stylesheets/_navigation.scss

@@ -12,11 +12,11 @@ $content-horizontal-padding: 16px;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
+  display: flex;
+  flex-direction: column;
 
   &,
   #navigation-content {
-    display: flex;
-    flex-direction: column;
     background-color: var(--navigation-column-background-color);
   }