Bug 1452206 - Tweak spacing and alignment of items in the Inspector Layout panel. r=jdescottes

devtools/client/inspector/layout/components/Accordion.css

@@ -49,6 +49,7 @@
 .accordion ._content {
   border-bottom: 1px solid var(--theme-splitter-color);
   font-size: 11px;
+  padding: 4px;
 }
 
 .accordion div:last-child ._content {
@@ -58,4 +59,6 @@
 .arrow {
   vertical-align: middle;
   display: inline-block;
+  padding-inline-start: 2px;
+  padding-inline-end: 1px;
 }

devtools/client/themes/boxmodel.css

@@ -35,7 +35,7 @@
 .boxmodel-info {
   display: flex;
   align-items: center;
-  padding: 4px 17px;
+  padding: 4px 19px;
 }
 
 .layout-geometry-editor::before {
@@ -373,6 +373,8 @@
 .boxmodel-properties-expander {
   vertical-align: middle;
   display: inline-block;
+  margin-inline-start: 2px;
+  margin-inline-end: 1px;
 }
 
 .boxmodel-properties-wrapper {
@@ -382,7 +384,7 @@
 }
 
 .boxmodel-properties-wrapper .computed-property-view {
-  padding-inline-start: 17px;
+  padding-inline-start: 20px;
 }
 
 .boxmodel-properties-wrapper .computed-property-name-container {

devtools/client/themes/common.css

@@ -771,8 +771,7 @@ checkbox:-moz-focusring {
 
 .devtools-sidepanel-no-result {
   font-style: italic;
-  text-align: center;
-  padding: 0.5em;
+  padding: 0.5em 21px;
   -moz-user-select: none;
   font-size: 12px;
 }

devtools/client/themes/layout.css

@@ -18,8 +18,8 @@
   display: flex;
   flex-direction: column;
   flex: 1 auto;
-  align-items: center;
   min-width: 140px;
+  margin-inline-start: 16px;
 }
 
 .grid-container:first-child {
@@ -44,18 +44,19 @@
 .grid-container li {
   display: flex;
   align-items: center;
-  padding: 4px 0;
+  padding: 3px 0;
 }
 
 .flexbox-container input
 .grid-container input {
-  margin: 0 5px;
+  margin-inline-end: 7px;
 }
 
 .flexbox-container label,
 .grid-container label {
   display: flex;
   align-items: center;
+  margin-inline-start: -3px;
 }
 
 /**
@@ -86,7 +87,7 @@
  */
 
 .grid-outline-container {
-  margin: 5px 0;
+  margin: 5px;
 }
 
 .grid-outline-container svg {
@@ -138,7 +139,7 @@
 .grid-color-swatch {
   width: 12px;
   height: 12px;
-  margin-left: 5px;
+  margin-inline-start: -1px;
   border: 1px solid var(--theme-highlight-gray);
   border-radius: 50%;
   cursor: pointer;