Bug 1547300 - Card content gets clipped when the viewport is too narrow.r=jdescottes,Ola,daisuke
authorBelén Albeza <balbeza@mozilla.com>
Wed, 08 May 2019 17:27:02 +0000
changeset 534980 0da5ad89c60ef6b5652edc179f16ba2cf7ce8499
parent 534979 0ec8134b1b62b3a3115e3b8ae939b49c1340dfc6
child 534981 bd2ad6987449e5be5014d0e35ccbe599159c9e82
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, Ola, daisuke
bugs1547300
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1547300 - Card content gets clipped when the viewport is too narrow.r=jdescottes,Ola,daisuke Differential Revision: https://phabricator.services.mozilla.com/D30070
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/App.css
devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -417,15 +417,17 @@ Form controls
 
 /*
  * Card UI, from Photon
  */
 .card {
   background-color: var(--white-100); /* from common.inc.css */
   border-radius: var(--card-shadow-blur-radius); /* from common.inc.css */
   box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
+  box-sizing: border-box;
+  min-width: min-content;
   padding-block: calc(var(--base-unit) * 5);
 }
 
 .card__heading {
   font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
   font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
 }
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -15,17 +15,18 @@
  * about:preferences, which uses the shared common.css
  */
 
 .app {
   /* from common */
   --sidebar-width: 280px;
   --app-top-padding: 70px;
   --app-bottom-padding: 40px;
-  --app-left-padding: 34px;
+  --app-left-padding: 32px;
+  --app-right-padding: 32px;
 
   box-sizing: border-box;
   width: 100vw;
   height: 100vh;
   overflow: hidden; /* we don't want the sidebar to scroll, only the main content */
 
   display: grid;
   grid-column-gap: 40px;
@@ -52,11 +53,13 @@
   /* padding will give space for card shadow to appear and
      margin will correct the alignment */
   margin-inline-start: calc(var(--card-shadow-blur-radius) * -1);
   padding-inline: var(--card-shadow-blur-radius);
 }
 
 .page {
   max-width: var(--page-width);
+  min-width: min-content;
   font-size: var(--body-20-font-size);
   font-weight: var(--body-20-font-weight);
+  padding-inline-end: var(--app-right-padding);
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css
@@ -1,14 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .fieldpair {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto;
   border-top: 1px solid var(--grey-20);
   padding-block: calc(var(--base-unit) * 2);
   padding-inline: calc(var(--base-unit) * 4) calc(var(--base-unit) * 2);
 }
 
 .fieldpair:last-child {
   padding-block-end: 0;
 }