Bug 1330977 - Flex the labels of boxes that have Learn More links on them. r=mconley

This is to make sure that the text will wrap and not force the box to have its full width. Also set white-space:nowrap on the Learn More link to prevent the short text from breaking across lines since it is expected to be such a short string in most locales.

MozReview-Commit-ID: IhTKomU3WbW

--HG--
extra : rebase_source : ee2d9607cdc45b05625c7d392e0c9ff5076f8454

browser/components/preferences/in-content/advanced.xul

@@ -209,9 +209,9 @@
                     accesskey="&enableHealthReport.accesskey;"/>
         </caption>
         <vbox>
-          <hbox class="indent">
-            <label>&healthReportDesc.label;</label>
-            <label id="FHRLearnMore"
+          <hbox class="indent" flex="1">
+            <label flex="1">&healthReportDesc.label;</label>
+            <label id="FHRLearnMore" flex="1"
                    class="learnMore text-link">&healthReportLearnMore.label;</label>
           </hbox>
           <hbox class="indent">
@@ -221,9 +221,9 @@
                           label="&enableTelemetryData.label;"
                           accesskey="&enableTelemetryData.accesskey;"/>
               </caption>
-              <hbox class="indent">
-                <label id="telemetryDataDesc">&telemetryDesc.label;</label>
-                <label id="telemetryLearnMore"
+              <hbox class="indent" flex="1">
+                <label id="telemetryDataDesc" flex="1">&telemetryDesc.label;</label>
+                <label id="telemetryLearnMore" flex="1"
                        class="learnMore text-link">&telemetryLearnMore.label;</label>
               </hbox>
             </groupbox>
@@ -239,9 +239,9 @@
                     label="&alwaysSubmitCrashReports.label;"
                     accesskey="&alwaysSubmitCrashReports.accesskey;"/>
         </caption>
-        <hbox class="indent">
-          <label>&crashReporterDesc2.label;</label>
-          <label id="crashReporterLearnMore"
+        <hbox class="indent" flex="1">
+          <label flex="1">&crashReporterDesc2.label;</label>
+          <label id="crashReporterLearnMore" flex="1"
                  class="learnMore text-link">&crashReporterLearnMore.label;</label>
         </hbox>
       </groupbox>

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -43,10 +43,10 @@ treecol {
   min-width: 26px;
 }
 
-/* For the "learn more" links, line up after text */
 .learnMore {
   margin-inline-start: 1.5em;
   font-weight: normal;
+  white-space: nowrap;
 }
 
 /* Category List */