Refactor styling of VersionInfo and related HelpPanel components

src/sidebar/components/version-info.js

@@ -20,7 +20,7 @@ function VersionInfo({ toastMessenger, versionData }) {
   };
 
   return (
-    <div>
+    <div className="u-vertical-rhythm">
       <dl className="version-info">
         <dt className="version-info__key">Version</dt>
         <dd className="version-info__value">{versionData.version}</dd>
@@ -35,7 +35,7 @@ function VersionInfo({ toastMessenger, versionData }) {
         <dt className="version-info__key">Date</dt>
         <dd className="version-info__value">{versionData.timestamp}</dd>
       </dl>
-      <div className="version-info__actions">
+      <div className="u-layout-row--justify-center">
         <Button
           buttonText="Copy version details"
           onClick={copyVersionData}

src/styles/mixins/layout.scss

@@ -70,12 +70,14 @@
 
 /**
  * Establish a vertical (margin) rhythm for this element's immediate
- * children (i.e. put equal space between children). Currently set to 1em.
+ * children (i.e. put equal space between children).
+ *
+ * @param $size [var.$layout-margin--medium]: Spacing size (padding)
  * @FIXME Find workaround for SvgIcon exception
  */
-@mixin vertical-rhythm {
+@mixin vertical-rhythm($size: var.$layout-margin) {
   & > * + *:not([class*='svg-icon--inline']) {
-    margin-top: var.$layout-margin;
+    margin-top: $size;
   }
 }
 

src/styles/reset.scss

@@ -81,6 +81,9 @@ img::-moz-selection {
 
 ul,
 ol,
+dl,
+dd,
+dt,
 li {
   @include reset.reset-box-model;
 }

src/styles/sidebar/components/help-panel.scss

 @use "../../mixins/buttons";
+@use "../../mixins/layout";
 @use "../../mixins/molecules";
 @use "../../mixins/utils";
 @use "../../variables" as var;
@@ -12,6 +13,7 @@
   &__subcontent {
     @include utils.border-top;
     @include utils.border-bottom;
+    @include layout.vertical-space;
 
     a {
       text-decoration: underline;

src/styles/sidebar/components/tutorial.scss

 @use "../../variables" as var;
+@use "../../mixins/layout";
 @use "../../mixins/utils";
 
 .tutorial {
   &__list {
-    padding-left: 2em;
-  }
-
-  &__item {
-    margin: var.$layout-margin--small 0;
+    @include layout.vertical-rhythm(var.$layout-margin--small);
   }
 
   &__icon {

src/styles/sidebar/components/version-info.scss

@@ -2,28 +2,21 @@
 @use "../../mixins/layout";
 
 .version-info {
-  margin-top: var.$layout-margin--small;
+  @include layout.row;
+  // Allow multiple lines of content
+  flex-wrap: wrap;
 
   &__key {
-    float: left;
-    width: 8em;
-    margin-bottom: var.$layout-margin--small;
-    padding-right: var.$layout-margin;
-    line-height: 1.25em;
+    flex-basis: 25%;
     text-align: right;
     font-weight: 500;
-    color: var.$color-text;
   }
 
   &__value {
-    margin-bottom: var.$layout-margin--small;
-    margin-left: 8em;
+    margin-left: 1em; // Space between key and value
+    flex-basis: 70%;
+    flex-grow: 1;
     overflow-wrap: break-word; // Keep really long userids from overflowing
     color: var.$color-text-light;
   }
-
-  &__actions {
-    @include layout.row(center);
-    padding-bottom: var.$layout-margin--small;
-  }
 }

src/styles/util.scss

@@ -29,6 +29,11 @@
   @include layout.row($justify: right);
 }
 
+// Establish a row flex container that centers its children
+.u-layout-row--justify-center {
+  @include layout.row($justify: center);
+}
+
 // Use this class to make an element in a flex container "stretchy" and grow
 // when there is extra space available.
 .u-stretch {