Bug 1635403 - Part 1: Implement responsive layout at app/sidebar/page level r=jdescottes

Differential Revision: https://phabricator.services.mozilla.com/D75555

devtools/client/application/src/components/App.css

@@ -14,6 +14,21 @@ a.disabled-link:visited {
 }
 
 .app {
-	display: grid;
-	grid-template-columns: calc(var(--base-unit) * 50) auto;
+  display: grid;
+  min-width: calc(var(--base-unit) * 90);
+}
+
+/* wide layout -> two columns, 1 row */
+@media(min-width: 701px) {
+  .app {
+    grid-template-columns: calc(var(--base-unit) * 50) auto;
+    height: 100vh;
+  }
+}
+
+/* vertical layout -> 1 column, 2 rows */
+@media(max-width: 700px) {
+  .app {
+    grid-template-rows: auto 1fr;
+  }
 }

devtools/client/application/src/components/routing/PageSwitcher.css

@@ -8,10 +8,10 @@
  */
 
 .app-page {
-  min-height: 100vh;
   padding: calc(var(--base-unit) * 3) calc(var(--base-unit) * 8);
   display: grid;
   user-select: none;
+  overflow-y: auto;
 }
 
 .app-page--empty {

devtools/client/application/src/components/routing/Sidebar.css

@@ -7,13 +7,24 @@
  * Sidebar list container
  */
 .sidebar {
-  height: 100vh;
-	border-right: 1px solid var(--separator-color);
-	position: sticky;
-	top: 0;
 	background-color: var(--bg-color);
 }
 
+/* vertical layout -> the sidebar is the first row */
+@media(max-width: 700px) {
+	.sidebar {
+		border-block-end: 1px solid var(--separator-color);
+	}
+}
+
+/* wide layout -> the sidebar occupies a whole column on the side */
+@media(min-width: 701px) {
+	.sidebar {
+		min-height: 100vh;
+		border-inline-end: 1px solid var(--separator-color);
+	}
+}
+
 .sidebar__list {
 	list-style: none;
 	padding: 0;

devtools/client/application/src/components/service-workers/RegistrationList.css

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .aboutdebugging-plug {
-  padding-block-start: calc(var(--base-unit) * 3);
+  padding-block: calc(var(--base-unit) * 3);
   border-block-start: 1px solid var(--separator-color);
 
   /* display flex to handle showing the icon with ::before */