Bug 1547300 - Card content gets clipped when the viewport is too narrow.r=jdescottes,Ola,daisuke

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

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/base.css

@@ -422,6 +422,8 @@ Form controls
   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);
 }
 

devtools/client/aboutdebugging-new/src/components/App.css

@@ -20,7 +20,8 @@
   --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;
@@ -57,6 +58,8 @@
 
 .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);
 }

devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.css

@@ -3,7 +3,8 @@
  * 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);