Commit 2edb14f4 authored by Belén Albeza's avatar Belén Albeza
Browse files

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
parent fcaae0cc

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

+2 −0
Original line number Original line Diff line number Diff line
@@ -422,6 +422,8 @@ Form controls 
  background-color: var(--white-100); /* from common.inc.css */

  background-color: var(--white-100); /* from common.inc.css */

  border-radius: var(--card-shadow-blur-radius); /* 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-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);

  padding-block: calc(var(--base-unit) * 5);

}

}

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

+4 −1
Original line number Original line Diff line number Diff line
@@ -20,7 +20,8 @@ 
  --sidebar-width: 280px;

  --sidebar-width: 280px;

  --app-top-padding: 70px;

  --app-top-padding: 70px;

  --app-bottom-padding: 40px;

  --app-bottom-padding: 40px;

  --app-left-padding: 34px;

  --app-left-padding: 32px;

  --app-right-padding: 32px;





  box-sizing: border-box;

  box-sizing: border-box;

  width: 100vw;

  width: 100vw;
@@ -57,6 +58,8 @@ 




.page {

.page {

  max-width: var(--page-width);

  max-width: var(--page-width);

  min-width: min-content;

  font-size: var(--body-20-font-size);

  font-size: var(--body-20-font-size);

  font-weight: var(--body-20-font-weight);

  font-weight: var(--body-20-font-weight);

  padding-inline-end: var(--app-right-padding);

}
 
}

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

+2 −1
Original line number Original line Diff line number Diff line
@@ -3,7 +3,8 @@ 
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */





.fieldpair {

.fieldpair {

  display: flex;

  display: grid;

  grid-template-columns: auto auto;

  border-top: 1px solid var(--grey-20);

  border-top: 1px solid var(--grey-20);

  padding-block: calc(var(--base-unit) * 2);

  padding-block: calc(var(--base-unit) * 2);

  padding-inline: calc(var(--base-unit) * 4) calc(var(--base-unit) * 2);

  padding-inline: calc(var(--base-unit) * 4) calc(var(--base-unit) * 2);